How to Debug Your Cypress Tests

How to Debug Your Cypress Tests

Ferenc Almasi β€’ 2021 December 10 β€’ Read time 2 min read
  • twitter
  • facebook

To debug your Cypress tests, you can either use the debugger keyword in a callback, use Chrome's DevTools, or use the built-in cy.debug command. Let's have a look at each one by one.


Using the debugger

Since Cypress runs inside a browser, you have access to the reserved debugger keyword. This means you can debug your Cypress tests using this keyword. Now you may be tempted to add a debugger to a new line where you want to stop code execution, like this:

Copied to clipboard!
cy.get('button');

// Trying to stop code execution to debug the previous command
debugger;

Unfortunately, however, this wouldn't work. The reason being is that Cypress works asynchronously. This means by the time your browser comes across the debugger keywords, the previous commands haven't been executed yet.

In order to get around this, we want to call the debugger in a callback function, so we can translate the above code example to the following:

Copied to clipboard!
cy.get('button').then($button => {
    debugger;
});

We can chain a then callback from the command to make sure Cypress has finished the execution. We can then safely call debugger inside the callback to get the desired behavior.


Using cy.debug

Cypress also has a built-in command for debugging, cy.debug, which can be called from another Cypress command to get additional information about it:

Copied to clipboard! Playground
cy.get('button').debug();

// Don’t display the command in the command log:
cy.get('button').debug(false);

// Call cy.debug on its own
cy.debug();

Just as the debugger keyword, it will stop code execution wherever you call .debug, additionally, you will get some debug information logged to the console about the command you chain cy.debug from.

You can also call cy.debug on its own, in this case, however, you will only get code execution stopped. If you don't disable logging, the values logged to the console will be undefined, since you haven't attached it to any other command.


Want to learn Cypress from end to end? Check out my Cypress course on Educative where I cover everything:

Learn Cypress with Educative
How to Debug Your Cypress Tests
If you would like to see more webtips, follow @flowforfrank
Looking to improve your skills? Check out our interactive course to master Cypress from start to finish.
Master Cypressinfo Remove ads

Resources:

  • twitter
  • facebook
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.