Use Playwright’s Trace Viewer for Debugging Tests Playwright provides a built-in Trace Viewer that allows you to view a detailed, step-by-step trace of your test run, including interactions, screenshots, and video captures. Tracing is particularly useful for debugging failing tests or understanding what happens at each step.
Example:
import { test, expect, chromium } from '@playwright/test';
test('Debug with Trace Viewer', async () => {
const browser = await chromium.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();
// Start tracing
await context.tracing.start({ screenshots: true, snapshots: true });
await page.goto('https://example.com');
// Perform some actions on the page
await page.click('text=Sign up');
await page.fill('input[name="email"]', 'test@example.com');
await page.click('button[type="submit"]');
// Stop tracing and save the trace
await context.tracing.stop({ path: 'trace.zip' });
await browser.close();
console.log('Trace file saved as trace.zip');
});
After the test runs, you can open the trace.zip file with Playwright’s Trace Viewer to analyze the sequence of events, such as page loads, clicks, and form submissions. This tool will also show screenshots and network requests, providing a comprehensive overview for debugging.