Cómo hacer visual testing con Playwright: guía práctica para QA

Por /

Las pruebas funcionales verifican que la aplicación hace lo que debe hacer. Pero hay un tipo de bug que no detectan — los cambios visuales no intencionados. Un botón que cambió de color, un texto desalineado, un componente que desapareció en móvil. Para eso existe el visual testing.

Qué es el visual testing

El visual testing consiste en comparar capturas de pantalla de la aplicación entre diferentes versiones para detectar cambios visuales no intencionados.

El proceso es sencillo: haces una captura de referencia — el baseline — y en cada ejecución posterior comparas con esa referencia. Si hay diferencias el test falla.

Capturas de pantalla con Playwright

python

from playwright.sync_api import Page

def test_captura_home(page: Page):
    page.goto("https://miweb.com")
    
    page.screenshot(path="screenshots/home.png", full_page=True)
    page.screenshot(path="screenshots/home-viewport.png")
    page.locator(".header").screenshot(path="screenshots/header.png")

Visual testing con to_have_screenshot()

Playwright tiene soporte nativo para comparación visual. En la primera ejecución genera el baseline. En ejecuciones posteriores compara con ese baseline:

python

from playwright.sync_api import Page, expect

def test_visual_home(page: Page):
    page.goto("https://miweb.com")
    expect(page).to_have_screenshot("home.png")

def test_visual_header(page: Page):
    page.goto("https://miweb.com")
    expect(page.locator(".header")).to_have_screenshot("header.png")

def test_visual_mobile(page: Page):
    page.set_viewport_size({"width": 375, "height": 812})
    page.goto("https://miweb.com")
    expect(page).to_have_screenshot("home-mobile.png")

Para generar los baselines por primera vez:

bash

pytest tests/ --update-snapshots

Configurar tolerancia a diferencias

python

def test_visual_con_tolerancia(page: Page):
    page.goto("https://miweb.com")
    
    expect(page).to_have_screenshot(
        "home.png",
        max_diff_pixels=100,
        threshold=0.2
    )

Organizar los baselines en el repositorio

tests/
├── __screenshots__/
│   ├── test_visual.py-snapshots/
│   │   ├── home-chromium.png
│   │   ├── home-firefox.png
│   │   └── home-mobile-chromium.png
├── conftest.py
└── test_visual.py

Playwright genera baselines separados por navegador automáticamente.

Integrar visual testing en GitHub Actions

yaml

- name: Ejecutar visual tests
  run: pytest tests/test_visual.py -v

- name: Subir screenshots en caso de fallo
  uses: actions/upload-artifact@v3
  if: failure()
  with:
    name: screenshots-diff
    path: tests/__screenshots__/

Cuando un test falla Playwright genera automáticamente tres imágenes: la captura actual, el baseline y una imagen diff que muestra exactamente qué cambió resaltado en rojo.

Cuándo usar visual testing y cuándo no

Úsalo en componentes de UI estables — botones, cards, headers, footers — y para verificar responsive design en diferentes tamaños de pantalla.

No lo uses en partes que cambian constantemente como dashboards con datos en tiempo real.

Si quieres profundizar en Playwright puedes leer cómo usar locators en Playwright o cómo hacer cross-browser testing.

Y si necesitas implementar visual testing en tu proyecto puedes ver mis servicios en fatimaqa.com.

Scroll al inicio