Cypress test replays with Cypress Debugger

Edit (Sep 13, 2023): Updated the article due to September 2023 release of Cypress 13

We are excited to announce the release of Cypress Debugger 🎉 Cypress debugger is a free, open-source plugin that you can start using today (actually since May 2023) for more efficient troubleshooting of failed Cypress executions in CI.

When running Cypress in a CI pipeline, we get screenshots, videos, and terminal logs. Sometimes it's not enough to debug a failed or flaky test. What if we could save everything that's happening in a browser and capture the actual network requests, browser console messages for every cypress step, so that we can replay those steps after test completion?

Some of you can be familiar with Playwright Traces. So what if we had Cypress test replays or traces?

We have a plugin that does exactly that! https://github.com/currents-dev/cypress-debugger

The plugin is free and open source. You can start using it today on your CI setup. When installed it will capture:

• capture Cypress test execution steps
• capture DOM snapshots for each step
• capture browser console messages
• capture browser the networks requests (HAR)

All this information will be dumped into a file that we can then load into a web player for replaying. The player is available at https://cypress-debugger.dev

After loading the file, you can replay the execution, open developers tools to browse the actual code associated with the Cypress steps.

Here're a few examples of how to use this plugin in a CI environment (GitHub Actions):

• https://github.com/currents-dev/cypress-debugger/blob/main/.github/workflows/example.yml
• Integrated together with cypress-cloud: https://github.com/currents-dev/gh-actions-example/tree/debugger-example

We were able to build this plugin by using amazing open-source packages like cypress-har-generator and rrweb.

Please start using it today. Share your feedback. You can also play and change the code yourself.

Are there any limitations?

The plugin currently supports only Chromium family browsers only.

Do Currents and Sorry Cypress support it?

We do plan to enable native support of this plugin as part of Currents and Sorry Cypress dashboard. Meanwhile, you can store the generated trace files on your own CI storage.

Can I install the player on my premises?

Yes! The web player is a static web-app that can be deployed on your own infrastructure. See how

Is it similar to Cypress Test Replay?

Yes - they are similar. Both provide similar information and allow more effective troubleshooting of failed and flaky tests.

The differences are:

• cypress-debugger is compatible with cypress 10.0.0+

• cypress-debugger is a free, standalone and open-source (GPL) software

• cypress-debugger is standalone - it doesn't require a dashboard (neither Cypress Cloud nor Currents nor Sorry Cypress)

• cypress-debugger is built on 100% open-source technologies

• cypress-debugger was released 3 months before Cypress Test Replay 👻, but it's unfair to claim innovation - see the remark below

• Cypress Test Replay is not open source - it is proprietary software; it is not part of the MIT-licensed cypress runner

• Cypress Test Replay requires Cypress Cloud account and an active subscription

Are those tools innovative? No.

The original issue had languished since 2017 and only got attention 6 years later in January 2023. This delay can be attributed to the extensive work needed to improve the Cypress runner, enabling it to support such a feature. However, the timing reveals something else that's noteworthy.

New disruptors challenged the status quo - companies like Replay.io (funny, not interested in testing at inception) and DeploySentinel (hi Michael, are you HyperDX now?) demonstrated what's possible and raised the bar for effective troubleshooting.

The outcome is beneficial for the community of developers - you can pick a tool that matches your needs and budget, and have less flaky or failing tests!