Der Button soll deutlicher werden. Nach der Änderung sieht die Angebotskarte am großen Bildschirm gut aus. Auf einer schmalen Ansicht drückt die breitere Schaltfläche jedoch den Preis aus der Zeile. Die Änderung war klein, ihre Wirkung betrifft ein ganzes Verhältnis zwischen Inhalten.
Playwright dokumentiert Screenshotvergleiche mit Referenzbildern und weist auf Einflüsse der Aufnahmeumgebung hin. Das Verfahren liefert einen nützlichen Anlass für eine eigene Übung. Nicht jeder Pixelunterschied ist ein Fehler, und ein gleiches Bild beweist noch keine richtige Aktion. Entscheidend ist, welche sichtbare Erwartung du mit dem Vergleich untersuchen möchtest.
Schreibe auf, was sich ändern soll und was bleiben muss
Für unsere fiktive Karte lautet die Absicht: Der Button wird leichter erkennbar, während Titel, Preis und notwendiger Hinweis vollständig lesbar bleiben. Dieser Satz enthält die gewünschte Veränderung und ihren Rahmen. „Mach den Button besser“ wäre deutlich schwerer zu beurteilen.
Bereite drei Inhaltsfälle vor: einen kurzen Titel, einen langen Titel und einen Titel mit einer zusätzlichen Bedingung. Verwende dieselben Angaben vor und nach der Änderung. Ein Vergleich mit bequemem Mustertext kann genau jene Enge verbergen, die später bei echten Inhalten auftritt.
Wähle außerdem mindestens eine breite und eine schmale Ansicht. Diese Breiten sind Teil der Fragestellung und keine pauschale Aussage über alle Geräte. Ein schmaler Fall prüft, ob das Verhältnis unter wenig Platz erhalten bleibt.
Die Referenz braucht eine kontrollierte Umgebung
Browser, Betriebssystem, Schriften und weitere Bedingungen können die Aufnahme beeinflussen. Ein Vorherbild aus einer anderen Umgebung ist deshalb ein schwächerer Bezug. Halte die relevante Umgebung konstant und dokumentiere sie zusammen mit dem Test.
Ein eigenes kurzes Playwright-Beispiel für eine vorbereitete Testseite kann so aussehen. Es setzt ein bereits eingerichtetes Projekt mit passender baseURL voraus und wurde für diesen Artikel nicht ausgeführt:
import { test, expect } from '@playwright/test';
test('Angebotskarte bleibt schmal lesbar', async ({ page }) => {
await page.setViewportSize({ width: 390, height: 844 });
await page.goto('/angebot-demo');
await expect(page).toHaveScreenshot('angebot-390.png');
});Die Seite und Dateinamen gehören zum Lehrbeispiel. Der dokumentierte Screenshotvergleich stellt eine Aufnahme der Referenz gegenüber. Die wichtige redaktionelle Arbeit bleibt die Interpretation: Ist der Unterschied beabsichtigt oder verdrängt er einen notwendigen Inhalt?
Eine Abweichung ist zunächst eine Beobachtung
Betrachte das Differenzbild nicht nur am Button. Prüfe Preis, Zeilenumbrüche und angrenzenden Hinweis. Vielleicht ist die größere Schaltfläche richtig, während das Layout daneben mehr Flexibilität braucht. Vielleicht war die vermeintliche Verbesserung nur auf der breiten Ansicht sinnvoll.
Erhöhe die erlaubte Abweichung nicht reflexartig, bis der Test wieder grün ist. Das würde die Frage verändern, ohne das Problem zu verstehen. Eine Toleranz kann begründet sein, muss aber zur Art der beobachteten Unterschiede passen.
Ebenso ist eine neue Referenz eine Entscheidung. Ein beabsichtigter neuer Stand darf anders aussehen. Er sollte erst nach der inhaltlichen Beurteilung zum Vergleichsmaßstab werden. Sonst wird eine unerkannte Nebenwirkung einfach zum neuen Sollbild erklärt.
Die Darstellung braucht noch den tatsächlichen Klickweg
Ein identischer Knopf kann die falsche Aktion auslösen. Ergänze deshalb zur Sichtprüfung einen Durchgang: mit Tastatur erreichen, auslösen, erwarteten Zielzustand beobachten. Ein Screenshot und ein Verhaltenstest beantworten unterschiedliche Fragen.
Wenn du die Übung an einer eigenen WordPress-Seite durchführst, kann eine Arbeitskopie im KENJTEC WordPressBuilder ai den zu verändernden Stand von der echten Seite trennen. Den Playwright-Vergleich führst du mit deinem eigenen Werkzeug außerhalb von KENJTEC aus. Eine Übernahme aus der Arbeitskopie ist anschließend ein eigener Schritt und muss den passenden Umfang wählen.
Der Gewinn fester Vergleichsansichten liegt nicht darin, Veränderung zu verhindern. Sie machen sichtbar, ob die gewünschte Verbesserung ihre Nachbarn respektiert. Erst Erwartung, Beobachtung und tatsächliche Bedienung zusammen ergeben ein vernünftiges Urteil über den neuen Button.
Quellen und Stand
Recherche- und Dokumentationsstand: 25. Oktober 2026. Visual comparisons.
