Ever wished you could replay a test that failed in your CI? That's where Playwright Traces come in! This guide shows how it seamlessly fits into your CI workflow, making bug-hunting easier and more effective.
Debugging Trace in Action
Let's jump right into a practical scenario. In the video below, I'll show how to use the Playwright Trace Viewer to inspect a failed test, identify the issue, and apply a fix.
In this video, I focus on resolving a complex locator issue. Besides this, Playwright Trace Viewer offers an extensive array of features for pinpointing test failures, including network logs, and console messages or step-by-step snapshots, not covered here.
Integrating with Your CI
1. Record Traces when a Test Fails
To automatically record traces on your CI, simply update your Playwright config file with this option:
use: {
trace: 'on-first-retry',
}
Now, whenever a test fails, a trace file is generated, ready for download or online viewing with a third-party reporter.
2. Open Trace Files
To open a Trace file, either upload it to trace.playwright.dev or run the command:
npx playwright show-trace <TRACE_FILE_PATH>.zip
3. Third-Party Reporting with Argos
To enhance your workflow, you can integrate your CI with Argos for direct access to Playwright Traces online. This seamless connection eliminates the need to download trace files, offering a more streamlined approach.
Check out the Argos Playwright setup guide for easy integration steps.
Top comments (2)
Absolutely loved this tutorial on time-travel debugging with Playwright traces! 🚀 The way you've broken down the process and showcased the power of Playwright Traces is both enlightening and exciting. It's clear that this feature could be a game-changer for debugging efforts, and I'm eager to give it a try in my own projects.
I was also intrigued to learn about Argos CI from your article. It's the first I've heard of it, and it definitely sounds like a valuable tool.
Thanks for sharing this valuable knowledge with the community. Your article is a fantastic resource for anyone looking to streamline their debugging process with Playwright. Can't wait to dive deeper into these tools! 🛠️
@christinepinto Thank you for your lovely message !