Visual regression testing

Il visual regression testing (test di regressione visiva) verifica come appare la pagina invece di cosa c’è nel DOM. La prima esecuzione cattura uno screenshot di riferimento (baseline); le esecuzioni successive scattano un nuovo screenshot e lo confrontano pixel per pixel (o con un algoritmo percettivo) con quella baseline. Qualsiasi differenza oltre una soglia fa fallire il test e produce un’immagine diff che evidenzia cosa è cambiato. Intercetta problemi che le asserzioni funzionali non vedono, come un pulsante spinto fuori dallo schermo da una modifica CSS.

Esempio (Playwright)

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

test('dashboard looks right', async ({ page }) => {
  await page.goto('/dashboard');
  await expect(page).toHaveScreenshot('dashboard.png', {
    fullPage: true,
    mask: [page.getByTestId('last-updated')],
    maxDiffPixels: 100,
  });
});

test('pricing card', async ({ page }) => {
  await page.goto('/pricing');
  await expect(page.getByTestId('pro-plan')).toHaveScreenshot();
});

La prima esecuzione fallisce perché non esiste una baseline e ne scrive una. Dopo una modifica di design voluta, rigenera le baseline con:

npx playwright test --update-snapshots

toHaveScreenshot è una web-first assertion: riscatta lo screenshot finché due catture consecutive non coincidono, evitando così di confrontare un frame a metà animazione.

Renderlo stabile

• Stesso ambiente per baseline ed esecuzioni. Font e anti-aliasing cambiano da un sistema operativo all’altro, ed è per questo che Playwright salva le baseline per browser e piattaforma. Generale nella stessa immagine Docker usata dalla CI.
• Maschera i contenuti dinamici. Timestamp, avatar, pubblicità e grafici con dati live saranno sempre diversi.
• Congela tempo e dati. Usa dati di test fissi e, dove serve, un orologio mockato.
• Disattiva le animazioni. Playwright disattiva di default le animazioni CSS per gli screenshot.
• Preferisci i componenti alle pagine intere. Lo screenshot di una card fallisce per un motivo; una pagina intera per venti.

Errori comuni

• Approvare i diff senza guardarli. Aggiornare le baseline in blocco trasforma la suite in un timbro di approvazione.
• Tolleranza zero ovunque. Minime differenze di rendering generano rumore. Imposta una soglia piccola, ma non così grande da nascondere regressioni reali.
• Usarlo al posto dei test funzionali. Uno screenshot può mostrare che il totale è nel posto giusto, non che sia il numero giusto.