← Volver al listado de tecnologías

Capítulo 10: Visual Testing

Por: Siempre Listo
playwrightvisual-testingscreenshotsregresiones

Visual Testing

Detecta cambios visuales no deseados comparando screenshots entre ejecuciones.

Screenshot Básico

import { test, expect } from '@playwright/test';

test('capturar screenshot', async ({ page }) => {
  await page.goto('https://ejemplo.com');
  await page.screenshot({ path: 'screenshot.png' });
});

Comparación Visual

test('comparación visual', async ({ page }) => {
  await page.goto('https://ejemplo.com');

  // Compara con snapshot guardado
  await expect(page).toHaveScreenshot('homepage.png');
});

Opciones de Screenshot

// Página completa
await page.screenshot({
  path: 'full.png',
  fullPage: true
});

// Solo elemento
const header = page.locator('header');
await header.screenshot({ path: 'header.png' });

// Con máscara (ocultar elementos dinámicos)
await expect(page).toHaveScreenshot({
  mask: [page.locator('.fecha-actual')],
});

// Tolerancia de diferencia
await expect(page).toHaveScreenshot({
  maxDiffPixels: 100,
});

// Porcentaje de diferencia
await expect(page).toHaveScreenshot({
  maxDiffPixelRatio: 0.1,
});

Actualizar Snapshots

# Actualizar todos los snapshots
npx playwright test --update-snapshots

# Actualizar test específico
npx playwright test visual.spec.ts --update-snapshots

Configuración en playwright.config.ts

export default defineConfig({
  expect: {
    toHaveScreenshot: {
      maxDiffPixels: 10,
      animations: 'disabled',
    },
  },
  use: {
    screenshot: 'only-on-failure',
  },
});

Ejercicio Práctico

Objetivo

Crear tests visuales para TodoMVC.

Pasos

  1. Captura screenshot de la página inicial
  2. Agrega una tarea y captura nuevo screenshot
  3. Compara elementos específicos (header, lista)
  4. Usa máscara para elementos dinámicos
Ver solución 
import { test, expect } from '@playwright/test';

test('visual - página inicial', async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');
  await expect(page).toHaveScreenshot('todomvc-inicial.png');
});

test('visual - con tarea', async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');

  await page.getByPlaceholder('What needs to be done?')
    .fill('Mi tarea');
  await page.keyboard.press('Enter');

  await expect(page.locator('.todo-list'))
    .toHaveScreenshot('lista-con-tarea.png');
});

test('visual - header', async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');

  await expect(page.locator('header'))
    .toHaveScreenshot('header.png');
});

Criterios de Éxito

← Volver al listado de tecnologías