Angular Academy · Lektion

Playwright-Tests schreiben

Browser-Abläufe mit Playwright automatisieren

Playwright-Tests schreiben ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Ihr erster Playwright-Test

Ein Playwright-Test ist eine asynchrone Funktion, die Fixtures wie page erhält. Sie importieren test und expect aus @playwright/test und beschreiben ein Benutzerszenario.

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

test('opens the home page', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveURL(/.*localhost/);
});

Das page-Fixture

Das Objekt page stellt einen einzelnen Browser-Tab dar. Jeder Test erhält eine neue, isolierte page in einem sauberen Kontext, sodass Tests nicht versehentlich Cookies oder Speicher gemeinsam nutzen.

Mit goto navigieren

page.goto(url) lädt eine URL und wartet, bis die Seite bereit ist. Zusammen mit baseURL in der Konfiguration können Sie relative Pfade verwenden.

await page.goto('/login');      // resolves against baseURL
await page.goto('https://example.com'); // absolute also works

Elemente mit Locators finden

Ein Locator ist ein verzögert aufgelöstes Handle für ein Element, das automatisch wartet. Bevorzugen Sie semantische Locators wie getByRole, getByLabel und getByText gegenüber fragilen CSS-Selektoren.

const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');

Text eingeben und klicken

Verwenden Sie fill, um Eingabewerte zu setzen, und click, um Schaltflächen zu betätigen. Playwright wartet automatisch, bis Elemente sichtbar und aktiviert sind, bevor eine Aktion ausgeführt wird.

await page.getByLabel('Email').fill('ada@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();

Automatisches Warten beseitigt fehleranfällige Sleeps

Anders als ältere Werkzeuge wartet Playwright automatisch auf Elemente und darauf, dass Assertions wahr werden. Manuelle Timeouts benötigen Sie fast nie – genau das macht Tests stabil.

// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();

Tests mit describe gruppieren

Verwenden Sie test.describe, um zusammengehörige Szenarien zu gruppieren und mit beforeEach eine gemeinsame Einrichtung zu verwenden.

test.describe('Login flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('shows the form', async ({ page }) => {
    await expect(page.getByLabel('Email')).toBeVisible();
  });
});

Einen vollständigen Benutzerablauf testen

Verketten Sie Aktionen, um einen vollständigen Ablauf nachzubilden. Jeder Schritt liest sich wie ein Skript des Benutzerverhaltens.

test('user can log in and see dashboard', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('ada@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page).toHaveURL(/.*dashboard/);
});

Die Tests ausführen

Führen Sie alle Specs über die CLI aus. Fügen Sie --headed hinzu, um den Browser zu beobachten, oder --ui, um Playwrights interaktiven Test-Runner zu öffnen.

npx playwright test
npx playwright test --headed
npx playwright test --ui

Fehler debuggen

Bei einem Fehler kann Playwright Screenshots, Videos und einen Trace aufzeichnen, den Sie Schritt für Schritt wiedergeben können. Der Trace Viewer zeigt das DOM bei jeder Aktion und macht sporadische Fehler leicht diagnostizierbar.

npx playwright test --trace on
npx playwright show-trace trace.zip

Testisolierung ist wichtig

Da jeder Test einen eigenen Browserkontext erhält, dürfen Sie sich nicht auf die Reihenfolge oder einen gemeinsam genutzten Zustand zwischen Tests verlassen. Richten Sie die Daten, die jeder Test benötigt, in einem eigenen beforeEach oder direkt im Test ein.

Kurze Überprüfung

Warum sollten Sie waitForTimeout vermeiden?

Zusammenfassung

Ein Playwright-Test verwendet das page-Fixture: goto zum Navigieren, semantische Locators (getByRole, getByLabel) zum Finden von Elementen sowie fill/click zur Interaktion. Automatisches Warten beseitigt fehleranfällige Sleeps. Gruppieren Sie mit describe, führen Sie mit npx playwright test aus und debuggen Sie mit Traces.

Häufig gestellte Fragen

Ist die Lektion „Playwright-Tests schreiben“ kostenlos?

Ja — der vollständige Text von „Playwright-Tests schreiben“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Playwright-Tests schreiben“?

Browser-Abläufe mit Playwright automatisieren Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Playwright-Tests schreiben“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy