Trace viewer

Recording traces

Five modes. I use on-first-retry on CI — records only when a test retries (which means it failed). No storage waste on passing tests. retain-on-failure is the alternative if you don't use retries but still want traces for failed tests.

// playwright.config.ts
export default defineConfig({
  retries: process.env.CI ? 2 : 0,
  use: {
    // 'on-first-retry'    — тільки при першому повторі (рекомендую для CI)
    // 'retain-on-failure' — записувати, видаляти якщо тест пройшов
    // 'on'                — завжди (дорого за місцем, для локального дебагу)
    // 'off'               — не записувати
    trace: process.env.CI ? 'on-first-retry' : 'off',
  },
})

# Локальний запуск з трейсом — для дебагу конкретного тесту
npx playwright test orders.spec.ts --trace on

Opening traces

Three ways to open a trace. From HTML report is the easiest — run the tests, open the report, click the trace icon next to a failed test. Directly by path if you have the trace.zip file. Online at trace.playwright.dev if you want to share with someone without installing Playwright.

# Відкрити трейс з HTML-репорту
npx playwright show-report

# Відкрити трейс напряму за шляхом
npx playwright show-trace test-results/my-test/trace.zip

# Або перетягнути .zip на trace.playwright.dev

Reading a trace — workflow I use

My debugging flow: find the red marker on the timeline (where the test failed) → look at the failing assertion in the Actions panel → click it to see the Before/After DOM snapshots → check what the page actually looked like vs what I expected → if the DOM is right but the test failed, switch to Network tab to see what API responded.

Timeline — top strip with colored blocks: blue for actions, green for navigations. Red marker = failure point. Drag the slider to select a range and filter all other tabs to that timeframe.

Actions panel — every locator call, click, fill. Hover to see DOM snapshot. Double-click to pin and filter Network/Console to that action. Log tab — what Playwright was waiting for, which actionability checks ran.

DOM snapshots — Before, Action, After

For each action, Playwright stores three snapshots: Before (the state before the action), Action (the moment of the click/fill — shows exactly where Playwright clicked), and After (the state after). The Action snapshot is the one that reveals 'Playwright was clicking here, not there'.

You can also pop out the DOM snapshot into a separate browser window and use DevTools to inspect the HTML and CSS — useful when the visual snapshot isn't enough to understand the layout.

Sharing traces from CI

Traces are uploaded as CI artifacts alongside the HTML report. Team members can download the zip from GitHub Actions → workflow run → Artifacts section. Or you can open a trace remotely by passing its URL to npx playwright show-trace.

Note: traces can contain auth tokens and test user credentials — treat them as sensitive data and don't post to public Slack channels.