0Pricing
React Academy · Lektion

Erste Schritte mit Playwright für React

Schreiben Sie Playwright-Tests, die einen Browser öffnen, mit der React-App interagieren und Ergebnisse prüfen.

Erste Schritte mit Playwright für React ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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 React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist Playwright?

Playwright ist ein E2E-Testframework für Node.js, das echte Chromium-, Firefox- und WebKit-Browser steuert. Es eignet sich ideal, um vollständige Abläufe einer React-App einschließlich Routing, Authentifizierung und API-Interaktionen zu testen.

Installation

Installieren Sie Playwright und die zugehörigen Browser-Binärdateien mit einem einzigen Befehl.

# npm init playwright@latest
# or
# npx playwright install

# playwright.config.ts is created automatically

Playwright-Konfiguration für React

Konfigurieren Sie Playwright so, dass vor dem Ausführen der Tests Ihr Entwicklungsserver gestartet wird.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  use: { baseURL: 'http://localhost:5173' },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

Ihren ersten Test schreiben

Tests verwenden page, ein Browserseitenobjekt. Navigieren Sie zu einer URL, interagieren Sie mit Elementen und überprüfen Sie das Ergebnis.

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

test('home page shows heading', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});

Locatoren

Die Locatoren von Playwright ähneln den Abfragen von RTL. Bevorzugen Sie rollenbasierte Locatoren, damit die Tests robust bleiben.

// By role
const button = page.getByRole('button', { name: 'Submit' });
// By label
const input = page.getByLabel('Email address');
// By text
const link = page.getByText('Sign in');
// By placeholder
const search = page.getByPlaceholder('Search products');

Klicken und Text eingeben

Interagieren Sie mit Elementen mithilfe von click(), fill(), press() und selectOption().

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

Auf Navigation warten

Playwright wartet automatisch, bis Elemente bereit sind. Sie können jedoch auch explizit darauf warten, dass eine Navigation oder ein Netzwerk-Request abgeschlossen ist.

// Wait for URL to change after form submit
await page.waitForURL('/dashboard');

// Wait for a specific request
const [response] = await Promise.all([
  page.waitForResponse('/api/users'),
  page.click('button[type="submit"]'),
]);

Überprüfungen

Verwenden Sie expect(locator) mit den integrierten Matchern von Playwright. Diese warten automatisch darauf, dass die Bedingung erfüllt ist.

await expect(page.getByRole('heading')).toHaveText('Dashboard');
await expect(page.getByTestId('user-count')).toContainText('5 users');
await expect(page.getByRole('button', { name: 'Delete' })).toBeDisabled();
await expect(page).toHaveURL('/success');

Bei Fehlern Screenshots erstellen

Playwright erstellt bei einem Testfehler automatisch Screenshots und Traces, wenn dies konfiguriert ist. Aktivieren Sie diese Option in der Konfiguration.

use: {
  screenshot: 'only-on-failure',
  trace: 'retain-on-failure',
  video: 'retain-on-failure',
}

Tests ausführen

Führen Sie alle Tests ohne sichtbare Browseroberfläche aus oder verwenden Sie --ui für den interaktiven Test-Explorer, mit dem Sie Tests visuell Schritt für Schritt durchgehen können.

# Run all tests
npx playwright test

# Run with UI mode
npx playwright test --ui

# Run a specific file
npx playwright test e2e/login.spec.ts

# Debug mode
npx playwright test --debug

Playwright Trace Viewer

Wenn ein Test fehlschlägt, öffnen Sie die Trace-Datei mit npx playwright show-trace, um den Test Schritt für Schritt mit Screenshots, Netzwerk-Requests und Konsolenprotokollen abzuspielen.

CI-Integration

Playwright läuft in CI standardmäßig ohne sichtbare Browseroberfläche. Installieren Sie die Browser mit npx playwright install --with-deps und führen Sie die Tests wie ein normales npm-Skript aus.

# .github/workflows/e2e.yml
- name: Install Playwright Browsers
  run: npx playwright install --with-deps
- name: Run Playwright tests
  run: npx playwright test

Kurzer Check

Welche Playwright-Methode sollten Sie verwenden, um ein Texteingabefeld auszufüllen?

Zusammenfassung

Playwright testet echte Browser und wartet automatisch auf Elemente. Verwenden Sie rollenbasierte Locatoren, fill() und click() für Interaktionen, expect(locator) für Überprüfungen und den --ui-Modus für visuelles Debugging während der Entwicklung.

Häufig gestellte Fragen

Ist die Lektion „Erste Schritte mit Playwright für React“ kostenlos?

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

Was lerne ich in „Erste Schritte mit Playwright für React“?

Schreiben Sie Playwright-Tests, die einen Browser öffnen, mit der React-App interagieren und Ergebnisse prüfen. Du übst React 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 React Academy zu starten?

Keine Vorkenntnisse erforderlich. React 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 3 von 4.

Wie lange dauert die Lektion „Erste Schritte mit Playwright für React“?

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 React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React 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

  1. Integrationstests mit React Testing Library
  2. Asynchrone UIs und API-Aufrufe mit MSW testen
  3. Erste Schritte mit Playwright für React
  4. Formulare und Benutzerabläufe von Anfang bis Ende testen
← Zurück zu React Academy