Visuelle Tests mit Playwright

Wenn wir Tests für Web-Apps schreiben, geht es meist nur um die Funktionalität. Aber lohnt es sich nicht, auch andere Dinge zu testen? Stimmt das CSS? Wird die richtige Grafik auf das Canvas-Element gemalt? Wird das richtige SVG generiert? Wie wird das 3D-Modell dargestellt?

Mit visuellen Tests können wir das schaffen. "Visuelle Tests" bedeutet ganz banal, dass wir Screenshots vergleichen. Das Konzept gibt es schon eine Weile, aber es ist nicht ganz trivial. Schwer aufzusetzen, schwer zu warten und die Tests
sind oft fragil. Daher verzichten wir meist auf diese Art von Tests.

Playwright, eines der neueren E2E-Testing-Frameworks, unterstützt Screenshot-Vergleiche out-of-the-box. Aber löst es auch die üblichen Probleme, die bei visuellen Tests auftreten?

In diesem Talk lernst du, visuelle Tests mit Playwright aufzusetzen, welche Fallstricke dich dabei erwarten und wie du sie vermeidest.

Vorkenntnisse

• Basiskenntnisse in JavaScript
  
• Interesse am Testen von Webanwendungen

Lernziele

• Welche Fallstricke gibt es bei visuellen Tests?
  
• Wie konfiguriert man Playwright, um diese Probleme zu umgehen?