Troubleshoot - Cypress

Issues with Percy Cypress SDK during the visual testing process.

Cypress is a modern JavaScript end-to-end testing framework designed for web applications. It simplifies the testing process by providing a robust, user-friendly environment for writing and running tests with ease. This page describes how to troubleshoot various issues when using Percy Cypress SDK during the visual testing process.

Debugging in CI

Sometimes snapshots fail to be taken while running in CI and it’s difficult to debug what’s going on in a remote environment. In these cases, we have found the Cypress dashboard with video recording to be extremely helpful. This will allow you to watch your tests run within the browser on CI and see the log output on screen.

Once you sign up to Cypress and set your dashboard record key you can pass the --record flag to cypress run. You now will be able to watch the video of your tests run in CI. This will help surface errors that are happening within the browsers command log.

Waiting for elements

It’s important that you capture the percySnapshot at the correct time during your Cypress tests, to help make sure the snapshot is captured at the right time when the DOM has stabilized and assets are fully loaded.

Cypress has sophisticated internal waiting logic, which is triggered when interacting with elements. You can use normal Cypress assertions to naturally wait for elements to load, as well as for functional testing of your application.

For example:

Copy snippet

Freezing date/time

As an example, if you have a date picker that auto selects the current day, each time new day you run your tests, Percy is going to snapshot a different day selected. In order to overcome this issue you need to freeze time in Cypress. You can do so by adding the following to your tests:

Copy snippet

Missing assets

If your screenshots end up missing any assets, its possible they were missed while we did asset discovery on the snapshot that was taken. This can happen for various reasons, usually due to network latency. To work around this, you can up the default asset discovery idle timeout (which is 50) by passing a -t flag via the CLI: