Visueller Regressionstest

Ein visueller Regressionstest prüft, wie die Seite aussieht, und nicht, was im DOM steht. Der erste Lauf erstellt einen Baseline-Screenshot; spätere Läufe erstellen einen neuen Screenshot und vergleichen ihn Pixel für Pixel (oder mit einem perzeptuellen Algorithmus) mit dieser Baseline. Jede Abweichung über einem Schwellenwert lässt den Test fehlschlagen und erzeugt ein Diff-Bild, das die Änderung hervorhebt. So werden Probleme gefunden, die funktionale Assertions übersehen, etwa ein Button, den eine CSS-Änderung aus dem sichtbaren Bereich geschoben hat.

Beispiel (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();
});

Der erste Lauf schlägt fehl, weil noch keine Baseline existiert, und schreibt eine. Nach einer bewussten Designänderung erzeugen Sie die Baselines neu mit:

npx playwright test --update-snapshots

toHaveScreenshot ist eine Web-First-Assertion: Sie nimmt den Screenshot so lange erneut auf, bis zwei aufeinanderfolgende Aufnahmen übereinstimmen. Das verhindert den Vergleich eines Frames mitten in einer Animation.

Stabil machen

• Dieselbe Umgebung für Baselines und Läufe. Schriften und Kantenglättung unterscheiden sich zwischen Betriebssystemen, deshalb speichert Playwright Baselines pro Browser und Plattform. Erzeugen Sie sie im selben Docker-Image, das die CI verwendet.
• Dynamische Inhalte maskieren. Zeitstempel, Avatare, Werbung und Diagramme mit Live-Daten werden immer abweichen.
• Zeit und Daten einfrieren. Verwenden Sie feste Testdaten und, wo nötig, eine gemockte Uhr.
• Animationen deaktivieren. Playwright deaktiviert CSS-Animationen für Screenshots standardmäßig.
• Komponenten statt ganzer Seiten bevorzugen. Ein Screenshot einer einzelnen Karte schlägt aus einem Grund fehl, eine ganze Seite aus zwanzig.

Häufige Fehler

• Diffs freigeben, ohne hinzusehen. Baselines pauschal zu aktualisieren macht aus der Suite ein reines Abnicken.
• Überall null Toleranz. Winzige Rendering-Unterschiede erzeugen Rauschen. Setzen Sie einen kleinen Schwellenwert, aber keinen so großen, dass er echte Regressionen verdeckt.
• Ihn statt funktionaler Tests einsetzen. Ein Screenshot kann zeigen, dass die Summe an der richtigen Stelle steht, aber nicht, dass sie den richtigen Betrag hat.