Playwright-Debugging-Tools

Dieses Kapitel stellt die drei wichtigsten Debugging-Tools von Playwright vor: UI Mode, Trace Viewer und den Debug-Modus auf der Kommandozeile.

Vollständige Einführung in den UI Mode

Der UI Mode ist die in Playwright integrierte grafische Testoberfläche und bietetein All-in-One-Erlebnis zum Erkunden, Ausführen und Debuggen von Tests.

UI Mode starten

npx playwright test --ui

Testliste durchsuchen

Nach dem Start zeigt die linke Seitenleiste alle Testdateien an.

Sie können jede Datei erweitern unddescribeBlock, um jeden Test einzeln auszuführen, anzuzeigen, zu überwachen oder zu debuggen.

Watch-Modus

Nach dem Klicken auf die Schaltfläche „Watch“ überwacht Playwright Dateiänderungen und führt betroffene Tests automatisch erneut aus, sobald der Testcode oder Quellcode aktualisiert wurde.

Timeline-Ansicht

Nach der Testausführung erscheint oben eine Timeline-Ansicht, die Navigation und Aktionen mit unterschiedlichen Farben markiert.

Du kannst den Mauszeiger darüber bewegen, um Snapshots der einzelnen Schritte anzuzeigen, oder doppelklicken, um einen Zeitraum auszuwählen und dessen detaillierte Logs anzuzeigen.

DOM-Snapshot

Beim Klicken auf einen Schritt in der Timeline wird rechts der DOM-Snapshot dieses Moments angezeigt.

Du kannst den tatsächlichen Zustand der Seite vor und nach der Aktion sehen und Probleme schnell erkennen.

Testfilterung

Der UI-Modus unterstützt mehrere Filtermethoden:

  • Nach Testnamen suchen, um
  • drücken
    @tag
    filter
  • Nach Projekt filtern
  • Nach Status filtern: bestanden, fehlgeschlagen, übersprungen

Eingehendes Debugging mit dem Trace Viewer

Trace Viewer ist das Aufzeichnungs- und Wiedergabetool von Playwright, mit dem dujeden Schritt eines Tests genau wie beim Debuggen einer Aufzeichnung untersuchen kannst.。

Konfigurieren der Trace-Sammlung

Beispiel

// Dateipfad: playwright.config.ts
export default defineConfig({
  Verwenden Sie: {
    // Trace nur beim Wiederholen nach einem Fehler erfassen
    trace: 'on-first-retry',

    // Optionale Werte:
    // 'off' —— Nicht erfassen
    // 'on' —— Jedes Mal erfassen
    // 'on-first-retry' —— Nur bei der ersten Wiederholung erfassen (empfohlen)
    // 'retain-on-failure' —— Trace nur bei Fehler behalten
  },
});

Trace öffnen

# 本地打开
npx playwright show-trace path/to/trace.zip

Du kannst es auch auftrace.playwright.devhochladen, um es online anzusehen.

Im Trace enthaltene Informationen

InhaltBeschreibung
DOM-SnapshotVollständige DOM-Snapshots der Seite vor und nach der Ausführung jedes Schritts
NetzwerkanfragenAlle HTTP-Anfragen und -Antworten (URL, Statuscode, Header, Body)
KonsolenprotokolleAlle von der Browserkonsole ausgegebenen Nachrichten
ScreenshotsSeitenscreenshots für jeden Schritt
AktionsprotokollAufrufargumente und Ausführungszeit aller Playwright-Aktionen
QuellcodeStelle im Testquellcode, die jeder Aktion entspricht

Trace zum Lokalisieren von Fehlern verwenden

Finde den fehlgeschlagenen Schritt in der Trace Viewer-Zeitleiste, untersuche den DOM-Zustand und die Netzwerkanfragen der Seite vor und nach diesem Schritt und identifiziere die Ursache des Fehlers.

Trace ist das leistungsstärkste Debugging-Tool. Wenn ein Test in CI fehlschlägt, du ihn aber lokal nicht reproduzieren kannst, kannst du die von CI generierte Trace-Datei herunterladen, um die Ursache des Fehlers offline zu analysieren.

--debug-Modus und page.pause()

--debug-Kommandozeilenmodus

npx playwright test --debug

Funktionen:

  • Öffnet automatisch das Playwright Inspector-Fenster
  • Operationen einzeln schrittweise durchgehen
  • Debuggen in den Browser-DevTools
  • Verwenden Sie
    F10
    (Step Over) und
    F11
    (Step Into), um die Ausführung zu steuern

page.pause() pausiert die Ausführung

Beispiel

// Setze einen Breakpoint im Code
test('Test zum Debuggen', async ({ page }) => {
  await page.goto('https://www.example.com/');

  // Ausführung anhalten und den Inspector öffnen
  await page.pause();

  // Im Inspector können Sie die nachfolgenden Aktionen schrittweise durchgehen
  await page.getByText('EXAMPLE Tutorial').click();
});

Nach der Verwendung vonpage.pause()Wenn Sie den Test ausführen, öffnet Playwright automatisch das Inspector-Fenster, sodass Sie den Seitenzustand Schritt für Schritt untersuchen können.

Auswahl zwischen den drei Debugging-Methoden

MethodeAnwendungsfall
UI-ModusTägliche Entwicklung, Durchsuchen der Testliste, schnelles Überprüfen des Teststatus
Trace ViewerLokalisieren von CI-Fehlern, Analysieren jedes Schritts komplexer Tests
--debug / page.pause()Entwickeln neuer Tests, eingehendes Debuggen bestimmter Schritte
Andere Erweiterungen