How to debug in Cypress

Debugging is a core criterion when choosing an automation framework. For example, let’s say a tester has written ten lines of test script and it is throwing an error or tests are failing. They need to analyze why it is failing. However, a framework with robust debugging capabilities will let them fix issues much faster, often in minutes. 

The debug capability in any tool provides:

      • Readable error messages

      • The option to pause test execution

      • The option to modify or alter values of scripts during run time

Cypress provides an easy way to debug test scripts. It offers powerful options such as:

1. Using stack trace
   
2. Using debugger
   
3. Using console logs

Consider a simple test script:

In the code above, the selector #product-menu-toggle1′ doesn’t exist in https://www.browserstack.com. So when the script runs, Cypress throws up a clear error message. Testers can use the View stack trace option to view the detailed stack trace, and can even print the stack trace to the browser console as follows:

How to configure Cypress IDE/File Opener Options in Cypress

With Cypress, one can directly open files from a stack trace in their IDE. For example, if a tester sets the File Opener preference as Visual Studio Code IDE, then from stack track they can directly open the file causing the error, and cursor focus will be on the exact line with the error.

This is useful as testers don’t have to search and open files and lines with issues.

Setup a File Opener Preference in Cypress

1. Navigate to Cypress main window.
2. Click on Settings.
3. Expand “File Opener Preference” Tab.
4. Click on the desired IDE.

This example sets Visual Studio Code as the default IDE for Cypress. After setting up the preference, click on stack trace and it will take us to the concerned file or line. For example, in the code above, cy.get(‘#product-menu-toggle1’).click(); is throwing an error. So the file causing the issue can be opened directly in the IDE from Cypress.

Cypress provides options to use the native debugger keyword in tests. Just put the debugger keyword at the juncture at which the test execution should pause. 

In the above example the debugger is deployed in the second it(). When the test runs, it will pause as soon as it encounters the debugger keyword.

At this point, testers can easily navigate to different tabs in developer tools like console, Elements, etc. to inspect or check what is happening at that part of the script.

Note: The Debugger keyword should always be a chain with then(). Just using the debugger keyword directly without using then() may cause it to work incorrectly. For example, the code snippet below might not work as expected.

The debugger might not work

With Cypress, testers can print logs on the browser console and the Cypress window console. They can even print the stack trace to the browser console.

There are two ways to use console logs in Cypress:

    I. cy.log() command

    II. console.log() by configuring cypress tasks

a) Using Cypress cy.log()

It helps print a message to the Cypress Command Log. It is quite useful to print a message or value after the execution of a particular line of code.

In the above example, cy.log() is used to print the message Navigated to the home page after execution of the above code, Cypress prints the message in the Cypress command log. One can also click on the log to print the message in the browser console.

Note: Cypress doesn’t print logs directly in the browser console. First, it prints on the Cypress window and from there one can print it on the console.