Warum Screenshots im E2E-Testing wichtig sind

Screenshots helfen dabei, Fehler in UI-Tests visuell nachvollziehbar zu machen. Mit Playwright kannst du sowohl automatisch bei Fehlern als auch gezielt im Testverlauf Screenshots aufnehmen. In diesem Beitrag zeige ich dir beides – anhand eines realen Beispiels: Ein UI-Test auf stepstone.com, bei dem die Sprache von Englisch auf Deutsch umgestellt wird.

Beispieltest: Stepstone-Startseite und Sprachwechsel

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

test("open Stepstone, has title and switches to German, check german title", async ({ page }) => {
  await page.goto("https://www.stepstone.com/");

  await expect(page).toHaveTitle(/We help companies to hire the right talent/);

  const languageButton = page.locator("button.language-switcher__button").first();
  await expect(languageButton).toBeVisible();
  await languageButton.click();

  const germanLink = page.locator("ul.language-switcher__list li.lang-item-deutsch a").first();
  await expect(germanLink).toBeVisible();
  await germanLink.click();

  await page.waitForURL("**/deutsch/");
  await expect(page).toHaveURL(/deutsch/);

  await expect(page).toHaveTitle(/Wir helfen Unternehmen, die richtigen Talente zu finden/);

  await page.screenshot({
    path: "screenshots/stepstone-test.png",
    fullPage: true,
  });
});

In diesem Test prüfen wir den Titel auf Englisch, wechseln die Sprache zu Deutsch und verifizieren den deutschen Seitentitel. Anschließend speichern wir einen Screenshot der vollständigen Seite.

Manuelle Screenshots – gezielt im Testverlauf

Die Zeile am Ende des Tests:

await page.screenshot({
  path: "screenshots/stepstone-test.png",
  fullPage: true,
});

sichert die Seite im Zustand nach dem Sprachwechsel. Du kannst alternativ auch nur den sichtbaren Bereich (Viewport) speichern:

await page.screenshot({
  path: "screenshots/stepstone-test-viewport.png"
});

Voila, nach dem Wechsel in die deutsche Sprache liegt der Screenshot im entsprechenden Ordner:

Wichtig: Der Ordner screenshots/ muss existieren. Falls nicht, kannst du ihn mit mkdir screenshots erstellen.

Automatische Screenshots bei Fehlern

Zusätzlich kannst du Playwright so konfigurieren, dass bei einem Testfehlschlag automatisch ein Screenshot gemacht wird – ganz ohne extra Code im Test.

Dazu in deiner playwright.config.ts:

use: {
  headless: false,
  screenshot: "only-on-failure",
},
reporter: "html",

Wenn ein Test fehlschlägt, legt Playwright automatisch einen Screenshot im HTML-Report ab (playwright-report). Den kannst du dir mit folgendem Befehl ansehen:

npx playwright show-report

Dort findest du:

• Die genaue Fehlermeldung
• Einen Trace der Schritte
• Den Screenshot vom Fehlerzustand

Gerade bei Tests wie dem Stepstone-Sprachwechsel hilft das sehr: Du siehst auf einen Blick, ob z. B. der Button nicht gefunden wurde oder die Seite nach dem Sprachwechsel anders reagiert hat.

Fazit

Playwright macht die Aufnahme von Screenshots besonders einfach – ob automatisch oder manuell. Der Stepstone-Test zeigt: Gerade bei UI-Veränderungen (wie Sprachumschaltern) helfen Screenshots dabei, den tatsächlichen Zustand der Seite zu dokumentieren.

Du kannst Screenshots nutzen:

• zur Fehlersuche (Regression)
• zur Dokumentation von Testläufen
• zur Beweissicherung bei komplexen UI-Abläufen