DEV Community

Cover image for Time-Travel Debugging: A Playwright Traces Tutorial
Jeremy SFEZ
Jeremy SFEZ

Posted on • Originally published at argos-ci.com

Time-Travel Debugging: A Playwright Traces Tutorial

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',
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Github fail test

Argos with Trace

Further Reading

Top comments (2)

Collapse
 
christinepinto profile image
Christine Pinto

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! 🛠️

Collapse
 
jsfez profile image
Jeremy SFEZ

@christinepinto Thank you for your lovely message !