Webinar Recap: Introducing The New Era of Debugging

September 12, 2023

By Jessamyn Sweet

Recently, we were joined by Cypress Ambassadors and Brian Mann, the visionary founder behind Cypress, to discuss an exciting new feature released in Cypress 13: Test Replay! In this article, we’ve summarized the key takeaways from the webinar. If you’re curious for more, the full recording is available on YouTube.

Last week, we announced the release of Test Replay in Cypress Cloud. This feature allows you to interact with previous tests as they occurred during Continuous Integration (CI), eliminating the need for reproducing failures locally.

What is Cypress Cloud?

On most teams, merging your code up beyond your local environment means executing automated tests in a CI pipeline.

Cypress Cloud is a service that unlocks the full potential of Cypress test automation tools in your CI pipeline. Cloud takes the rich result data coming from tests run the Cypress app and provides developers with a variety of tools for scaling every facet of Cypress testing:

  • Smart orchestration tools to increase speed and conserve resources in your CI runs
  • Integrations with popular version control tools like GitHub, GitLab, and BitBucket
  • Increased visibility into test flake and failure
  • Analytics for measuring and optimizing your entire test suite.

The challenge with CI debugging

With the Cypress app, developers have access to built-in time travel functionality, enabling them to inspect and navigate the DOM and analyze network traffic. These high-fidelity debugging tools provide valuable insight into what's happening behind the scenes.

However, CI environments are typically headless, so developers lose access to these tools, turning debugging into a slow and frustrating process. Developers are often left with only videos and screenshots as their debugging aids. While these resources can offer some insight into the root problem, developers often find themselves needing to locally reproduce issues to uncover the “why” behind test failures, investing hours in attempts to recreate these problems on their local machines. In some cases, this recreation may prove impossible due to factors like failed network requests or the inability to replicate exact server configurations locally.

Enter Test Replay

Test Replay brings the local debugging experience to tests run in CI in the Cypress Cloud. Test Replay automatically captures all the important information between Cypress, the browser and your test code, including network requests, console logs, and JavaScript errors. We then stitch everything back together so you can pause, play, rewind, and inspect your application as if it were running in your local environment.

Test Replay Product Demo

Test Replay is not a separate add-on; it's included in all Cypress Cloud plans (including the Free one!). Currently, Test Replay is available only for Chromium-based browsers.

What Ambassadors are saying

Walmyr Lima, Founder & Instructor at Talking About Testing
“With Test Replay, I don’t need to come back to my local environment…and you can easily share replay links with colleagues so they can see what’s going on and help you out.”

Murat Ozcan, Staff Eng, Test Architect at Extend
“You immediately save time diagnosing issues…Test Replay gets right to the source of the problem and reduces friction debugging.”

Kiran Chilakamarri, Sr. Test Automation Eng, Bank of New Zealand
“I’ve tried Test Replay with about 25 tests, and have saved 3 to 4 hours debugging depending on the issue I’m facing…we have more peace of mind with being able to solve failures in CI.”

Where Cypress is today

The Cypress app focuses on guiding users towards best practices in testing. Cypress Cloud focuses on running a large or growing test suite and managing test quality at scale.

Our roadmap for our open-source application includes performance improvements and enabling developers to test multiple tabs or windows simultaneously. Additionally, we are actively developing Cloud features to enhance your team’s test management capabilities.

One of these features is Branch Review, which identifies whether you’ve introduced or resolved failed, flaky, or pending tests. By reviewing the before-and-after of test suite changes side-by-side, your team can quickly pinpoint the differences, streamline review cycles for greater efficiency, and prevent regressions. Branch Review is currently available in public beta, and you can enable it in your Organization Settings within Cypress Cloud. We’re also working on improvements to flake detection, empowering developers to proactively identify flakiness before tests progress through the software development lifecycle, thanks to automated retesting of new or modified tests.

Where Cypress is heading

Cypress aims to go beyond functional testing and test management by naturally extending the value of the test. By building off of your existing testing workflow, Cypress aims to measure and surface other dimensions of application quality in pre-production environments, without any extra work from developers. Users will gain automatic access to insightful reports, including:

  • Visual diffing, which highlights visual changes in your application from one commit to the next.
  • Accessibility reporting, which evaluates accessibility violations on a per-page basis, providing an objective measure of your application’s accessibility to people with disabilities.
  • Interactivity coverage, which generates a three-dimensional visual “heatmap” that indicates which interactive elements on the page are being tested and identifies areas with potentially redundant coverage.

Centralizing this information within the Cypress toolkit means that teams can simplify their tech stacks, streamline the testing process, and ship with confidence.

Wrapping Up

To learn more about Test Replay, check out our documentation. You can learn more about what to expect in Cypress 13 in our migration guide.

Introducing The New Era of Debugging: Webinar Recording