31. Diagnostic Artifacts & Time-Travel Trace Viewer

1. Capturing Screenshots

// Viewport screenshot
await page.screenshot({ path: "screenshots/home.png" });
// Full page screenshot (scrolls and stitches full document)
await page.screenshot({ path: "screenshots/full-page.png", fullPage: true });
// Specific element screenshot
await page.getByTestId("invoice-card").screenshot({ path: "screenshots/invoice.png" });

---

2. Enabling Traces in playwright.config.ts

The industry best practice is on-first-retry or retain-on-failure:

export default defineConfig({
  use: {
    // Only capture full traces when a test fails, saving disk space:
    trace: "retain-on-failure",
    video: "retain-on-failure",
    screenshot: "only-on-failure",
  },
});

---

3. Opening Trace Viewer

When a test fails, Playwright produces a trace.zip file. View it via CLI:

npx playwright show-trace test-results/my-test-chromium/trace.zip

Or drop it on https://trace.playwright.dev in any browser. You can inspect:
- Action filmstrip
- Before/After DOM snapshots
- Exact console errors
- Every single network request and header