Cypress.io

5 Ways To Debugging Cypress Tests

In this article, we are going to cover 5 great ways to debugging cypress tests.
debugging is an important step and cypress help to make this much easier.

Screenshots

Cypress comes with the ability to take screenshots, whether you are running via open mode or run mode even in CI.

To take a manual screenshot you can always use the cy.screenshot() command.

When running tests with cypress run mode it will automatically capture screenshots when a failure happens, they will be saved under the screenshots folder.

We can also manage the default settings in the cypress.json file when set false it will not take screenshots in the run mode.

"screenshotOnRunFailure": false

Videos

Cypress records a video for each spec file when running tests via run mode.
When running tests via open mode videos are not automatically recorded.

The video is a great way to debug and give a lot of information about the failure, you can see the test from the start until the failure point.

Video recording can be turned off by setting “video” to false within your cypress.json file.

"video": false

Videos are stored in the “videosFolder” which is set to cypress/videos by default.

Cy.pause() Command

The pause command is a powerful tool for debugging.
It is possible to use it only from the GUI mode and it gives you the ability to pause the tests in a specific spot.

Therefore we can you the pause command right before problematic assertion or action that caused the test to fail.
When the test executing the pause command you are able to see in the top navbar the stop icon was replaced with a paused icon and when you finishing to investigate the failure, by pressing the play icon the test will complete the rest from the paused stop.

it('pause command', () => {

    cy.get('[data-testid="userName"]').pause()


})

Console.log()

Cypress is a pure JavaScript that runs inside a browser, which means you can make use of all the powers of DevTools.

console.log() is a function in JavaScript which is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user.

        cy.get('[name="client.name"]').type(clientID_Alpha()).invoke('val')
        .then((value) => {
            this.client = value;
            console.log(value)

        })
        
        function clientID_Alpha() {
            var text = "";
            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

            for (var i = 0; i < 5; i++)
            text += possible.charAt(Math.floor(Math.random() * possible.length));

            return text;
        }

This code will output the value of the clientID_Alpha function. You will be able to see the output in your browser console.

To open the console in Chrome, use this keyboard shortcut: Cmd + Option + J (on a Mac) or Ctrl +Shift +J (on Windows).

As an alternative, you can right-click on the webpage and click “Inspect” to open the developer console.
Click the “Console” tab in that window

Cypress Dashboard

One of the most powerful tool cypress offering is the Cypress Dashboard.
Is free to use for 500 monthly recordings (cypress considers each run of individual it() functions as a test result).

To be able to record tests in the dashboard you must use the –record flag, as soon you will start record tests with the dashboard you and your team will be able to look at all the videos and screenshots.

Cypress will also label all the flaky tests and will collect the most common failure of your tests.

Ofir Blumental

QA Automation Engineer - ofirblumental1@gmail.com

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button