How to Debug Failing Tests
Knowing how to debug failing tests is arguably one of the most important and useful skills for you to learn. In this lesson we will discuss various tips, methods and techniques to help you debug and fix your failing tests.
The Cypress UI is one of the fastest ways to figure out what went wrong with your tests.
It can also be incredibly useful to see all of the steps your tests took before the error was triggered. When you click on a step, Cypress will output useful information to the browser's console.
For example, in the failing test above, when clicking upon the assertion step, Cypress logs out the actual array in the console.
Screenshots & Videos
When you are running Cypress in headless mode by using the
cypress run command, screenshots and videos will automatically be recorded anytime there is a failure. This is incredibly useful, especially when running your tests in CI, as it provides you with not only a screenshot at the exact point of failure, but also a video of your failing test.
You can tell Cypress to take a screenshot manually by using the cy.screenshot() command.
There are two useful ways to log information from your tests. One way is to use cy.log() the other is to use
cy.log() will print a message to the Cypress Command Log
You can also use
console.log() which will log to the browser's console.
console.log("my custom message")
Browser Dev Tools
Since Cypress runs in the browser, you have full access to all of the information from your browser's developer tools. This means you can use the same techniques and functionality you are used to using when debugging issues with your application code to debug your failing Cypress tests too.
If you would like to practice how to debug failing tests in Cypress, we have created a special repo which can be found here. The installation instructions are located in the README.md file.
The practice file you are looking for can be found in cypress/e2e/Practice/debug-failing-tests.spec.js.
Should you get stuck or need some help, all of the answers are provided within cypress/e2e/Answers/debug-failing-tests.spec.js