Playwright VS Code-Entwicklungsumgebung einrichten

Für die Playwright-Entwicklung wird empfohlen,VS Codezu verwenden, da es leistungsstarke Unterstützung für JavaScript/TypeScript, den Debugger und Erweiterungen bietet.

VS Code installieren

  • Gehen Sie zuder offiziellen VS Code-Website, um sie herunterzuladen und zu installieren.
  • Nach der Installation wird empfohlen, zusätzlichdas chinesische Sprachpaketzu installieren (suchen Sie im Erweiterungs-MarketplaceChinese (Simplified)）。

VS Code-bezogene Referenzen:https://www.example.com/vscode/vscode-tutorial.html

Unverzichtbare Erweiterungen

Suchen Sie im VS Code-Erweiterungsbereich nach den folgenden Erweiterungen und installieren Sie sie:

Playwright Test for VSCode

  • Die offizielle Playwright-Erweiterung
  • Funktionen: Tests ausführen/debuggen, Testberichte anzeigen, Skripte aufzeichnen, Trace generieren
  • Erweiterungs-ID:ms-playwright.playwright

JavaScript-/TypeScript-Unterstützung(In VS Code integriert, normalerweise keine separate Installation erforderlich)

Empfohlen (optional):

  • ESLint(Um einen einheitlichen Codestil sicherzustellen)
  • Prettier - Code formatter(Codeformatierung mit einem Klick)

Playwright-Projekt initialisieren

Wenn du noch kein Projekt initialisiert hast, führe zuerst aus:

npm init playwright@lates

Die VS Code-Erweiterung erkennt automatisch dieplaywright.config.ts/jsdes Projekts und aktiviert die Testansicht.

VS Code-Einstellungen

Öffne die VS Code-Einstellungen (TastenkürzelCtrl+,oderCmd+,) und bestätige die folgenden Einstellungen:

  • Formatieren beim Speichern
    Suche nachformat on save→ AktivierenEditor: Format On Save

  • Standard-Terminal-Shell(Je nach System auswählen)
    Windows empfohlen:PowerShelloderGit Bash
    macOS/Linux Standard ist in Ordnung

Debug-Konfiguration (launch.json)

Klicken Sie in VS Code in der linken Seitenleiste aufAusführen und Debuggen→ Konfiguration erstellen, wählen SieNode.js, generieren.vscode/launch.json, fügen Sie eine Playwright-Debugkonfiguration hinzu, zum Beispiel:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Playwright Test",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/playwright",
      "args": ["test", "--project=chromium", "--headed"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

Auf diese Weise können Sie in VS Code drücken,F5um das Debuggen zu starten, und Playwright wird im headed-Modus ausgeführt, um eine einfache Beobachtung zu ermöglichen.

Verwenden des Playwright-Erweiterungsbereichs

Nach der Installation derPlaywright Test for VSCode-Erweiterung erscheint links ein "Playwright"-Symbol:

  • Sie können die Testdateien und die Testfallliste im Projekt direkt sehen.
  • Klicken Sie auf die ▶-Schaltfläche rechts neben einem Testfall, um ihn auszuführen.
  • Klicken Sie mit der rechten Maustaste und wählen SieDebug Test, um schrittweise zu debuggen.
  • Bei fehlgeschlagenen Tests können Sie direktTrace-Dateien anzeigen.

Häufige Befehle

Im VS Code-Terminal ausführen:

npx playwright test           # 运行全部测试
npx playwright test login.spec.js # 运行指定文件
npx playwright codegen        # 启动录制工具（自动生成脚本）
npx playwright show-report    # 打开测试报告

Testen-Seitenleiste

Nach der Installation der Erweiterung erscheint auf der linken Seite von VS Code ein Test-Symbol (ein Laborbecher-Symbol).

Klicken Sie hier, um die Test-Seitenleiste zu öffnen, und Sie sehen eine Liste aller Testdateien.

Hier können Sie:

  • Erweitern Sie eine Datei, um jeden Test anzuzeigen.describeundtest
  • Klicken Sie auf den Play-Button, um einen einzelnen Test oder alle Tests auszuführen.
  • Testausführungsstatus in Echtzeit anzeigen (grün für bestanden, rot für fehlgeschlagen, grau für übersprungen).
  • Klicken Sie mit der rechten Maustaste auf einen Test, um weitere Optionen aufzurufen (Debuggen, Zur Definition springen usw.).

Debug-Modus

Mit der VS Code-Erweiterung können Sie Playwright-Tests genauso debuggen wie normalen Code:

Haltepunkte setzen

Klicken Sie links neben die Zeilennummer im Code, um einen roten Haltepunkt hinzuzufügen.

Klicken Sie mit der rechten Maustaste neben den Haltepunkt und wählen SieDebug Testaus, und der Test wird am Haltepunkt angehalten.

Debugging-Funktionen

  • Step Over (F10), Step Into (F11), Step Out (Shift+F11)
  • Aktuelle Variablenwerte anzeigen
  • Aufrufliste anzeigen
  • Ausdrücke in der Debug-Konsole auswerten

Live-Debugging

Live-Debugging ist eine einzigartige Funktion der VS Code-Erweiterung.

Aktivieren SieShow Browser. Wenn Sie Tests mit dieser Option ausführen, klicken Sie im Code auf einen Locator, und das entsprechende Seitenelement wird im Browserfenster hervorgehoben.

Wenn ein Locator mit mehreren Elementen übereinstimmt, hebt Playwright alle übereinstimmenden Elemente gleichzeitig hervor.

Sie können den Locator direkt im Code bearbeiten, und der Browser zeigt die aktualisierten Übereinstimmungsergebnisse in Echtzeit an.

Pick Locator

Klicken Sie unten in der Test-Seitenleiste auf die SchaltflächePick Locator.

Klicken Sie in dem sich öffnenden Browser auf das Zielelement, und dasPick Locator-Feld von VS Code zeigt den besten Locator an.

Drücken Sie die Eingabetaste, um ihn in die Zwischenablage zu kopieren, und fügen Sie ihn dann in den Testcode ein.

Playwright wählt automatisch den stabilsten und semantischsten Locator (Priorität: role > text > testid).

Neuen Test aufzeichnen

In der Test-Seitenleiste auf die SchaltflächeNeu aufzeichnenklicken.

Playwright öffnet ein Browserfenster, und alle Ihre Aktionen darin (Navigation, Klicks, Eingaben) werden aufgezeichnet.

Sie können auch Assertions über die Symbolleiste generieren:

  • Sichtbarkeit prüfen— prüfen, dass das Element sichtbar ist
  • Text prüfen— prüfen, dass das Element Text enthält
  • Wert prüfen— den Wert des Elements prüfen

Nach Abschluss der Aufzeichnung schließen Sie den Browser, und der Code wird automatisch generiert in dertest-1.spec.tsDatei.

Am Cursor aufzeichnen

Platzieren Sie im vorhandenen Testcode den Cursor an der Stelle, an der Sie Aktionen einfügen möchten, und klicken Sie aufAm Cursor aufzeichnen。

Playwright zeichnet die nachfolgenden Aktionen im Browser auf und fügt den generierten Code an der Cursorposition ein.

Diese Funktion ist ideal, um Schritte zu einem vorhandenen Test hinzuzufügen.

Andere Erweiterungen