🎥 Cypress test replays with Cypress Debugger

Capture and replay everything that is happening in Cypress during CI runs with a free, open-source plugin cypress-debugger. It is like Playwright Traces but for Cypress.

Cypress Test Replay is an exciting new feature that’s planned to launch in Cypress 13. Cypress ambassadors and the marketing team have been promoting Test Replay, emphasizing how good it is for debugging failed CI executions.

True, it is super-effective but is only available for Cypress Cloud paying subscribers.

Back in Feb 2023 we started working on cypress-debugger — a free, open-source, standalone plugin that is equivalent to… Cypress Test Replay. We launched the plugin in May 2023. See the original video here. Republishing the original blog post below.

Cypress Debugger — capture and replay everything that is happening in Cypress during CI runs

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?

Replaying Cypress trace with Cypress Debugger (https://cypress-debugger.dev)

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 simple JSON file that you 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 step-by-step, rewind, open browser developers tools to explore the actual DOM tree that was captured on every cypress step.

Here are 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.

The plugin currently supports only Chromium family browsers only.

We do plan to enable native support of this plugin as part of Currents and Sorry Cypress dashboard.