DEV Community

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

Posted on • Originally published at argos-ci.com

5

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

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 !

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more