Playwright Codegen-Testgenerator

Dieses Kapitel stellt Playwrights Kommandozeilen-Testgenerator Codegen vor, der Testcode durch Browseroperationen automatisch generiert.

Was ist Codegen

Codegen (Code Generator) ist Playwrights integriertes interaktives Testgenerierungstool.

Sie bedienen den Browser wie ein normaler Benutzer, und Codegen wandelt Ihre Operationen automatisch in Playwright-Testcode um.

Codegen starten

# 基本用法：打开一个 URL 并开始录制
npx playwright codegen https://www.example.com/

# 指定代码生成的语言（默认 TypeScript）
npx playwright codegen --target=javascript https://www.example.com/
npx playwright codegen --target=python https://www.example.com/

Nach dem Start werden zwei Fenster geöffnet:

Browserfenster: In diesem Fenster interagieren Sie mit der Seite
Playwright-Inspector-Fenster: Zeigt den generierten Code in Echtzeit an

Operationen aufzeichnen

Wenn Sie eine beliebige Operation im Browserfenster ausführen, generiert Codegen automatisch den entsprechenden Playwright-Code:

Navigation

Das Eingeben einer neuen URL in die Adressleiste und Drücken der Eingabetaste erzeugtpage.goto()Anweisung weglassen.

Click

Das Klicken auf ein beliebiges Element (Schaltfläche, Link, Menü) erzeugtpage.getByRole(...).click()oder ähnlichen Code zum Lokalisieren und Klicken.

Eingabe

Das Eingeben von Text in ein Eingabefeld erzeugtpage.getByLabel(...).fill(...)oderpage.getByPlaceholder(...).fill(...)。

Auswählen

Das Auswählen einer Option aus einem Dropdown-Menü erzeugtpage.getByLabel(...).selectOption(...)。

Kontrollkästchen

Das Aktivieren oder Deaktivieren eines Kontrollkästchens erzeugtpage.getByLabel(...).check()oder.uncheck()。

Automatische Auswahl des besten Locators

Codegen analysiert die Attribute von Seitenelementen und generiert einen Locator nach folgender Priorität:

getByRole()— Element hat eine explizite ARIA-Rolle
getByText()— Element hat klaren Textinhalt
getByLabel()— Formularelement hat ein zugehöriges Label
getByPlaceholder()— Eingabefeld hat einen Platzhalter
getByAltText()— Bild hat ein alt-Attribut
getByTestId()— Element hat data-testid
getByTitle()— Element hat ein title-Attribut
locator()— CSS-Selektor (letzte Möglichkeit)

Wenn Codegen mehrere übereinstimmende Elemente findet, optimiert es den Locator automatisch, bis das Zielelement eindeutig identifiziert werden kann.

Assertions generieren

In der Symbolleiste des Inspector-Fensters können Sie auf die Assertion-Schaltfläche klicken, um Assertion-Code zu generieren:

Sichtbarkeit prüfen— Nach dem Klicken ein Element auswählen, generiertawait expect(locator).toBeVisible()
Text prüfen— Generiertawait expect(locator).toHaveText(...)
Wert prüfen— Generiertawait expect(locator).toHaveValue(...)
Snapshot prüfen— Generiertawait expect(locator).toHaveScreenshot()

Gängige Codegen-Optionen

Option	Beschreibung
`--target=javascript`	JavaScript-Code generieren (standardmäßig TypeScript)
`--target=python`	Python-Code generieren
`--target=java`	Java-Code generieren
`--target=csharp`	C#-Code generieren
`--save-storage=auth.json`	Authentifizierungsstatus nach der Aufzeichnung speichern
`--load-storage=auth.json`	Vorhandenen Authentifizierungsstatus vor der Aufzeichnung laden
`-o tests/test.spec.ts`	Ausgabedatei angeben (standardmäßig Ausgabe im Terminal)
`--viewport-size=375,812`	Benutzerdefinierte Viewport-Größe (mobile Geräte simulieren)
`--device="iPhone 15"`	Gerätevoreinstellungen verwenden
`--color-scheme=dark`	Farbschema angeben

Codegen vs. VS Code Recording: So treffen Sie die Wahl

Methode	Anwendungsfall
VS Code Record New	Tägliche Testentwicklung; der Code gelangt direkt in den Editor und kann sofort geändert werden
Codegen-Befehlszeile	Schnelles Prototyping, sprachübergreifende Codegenerierung, keine IDE-Abhängigkeit

Weitere Erweiterungen

PlaywrightFortgeschritten

Referenzhandbuch