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 😎
