Categories
Automated Testing Playwright

Playwright Trace Viewer

One of the things that people really like about Cypress is the ability to see a step by step replay of what happened with snapshots of the DOM as it ran.

Well Playwright also offers this 😎

An easy way to get access to these is to set your Playwright config to rerun failed tests and to capture a trace on the second attempt:

playwright.config.ts:

module.exports = {
  use: {
    headless: true,
    screenshot: "only-on-failure",
    video: "retry-with-video",
    trace: "on-first-retry",
  },
  retries: 1,
};

A trace zip file will be generated on a failed 2nd attempt.

I uploaded an example here. You simply run

npx playwright show-trace ./doco/exampletrace.zip

which displays an interactive step by step trace viewer 😎

An example trace viewer

Leave a Reply

Your email address will not be published. Required fields are marked *