How to start debugging Cypress Tests

Just like with Chrome Devtools or Firefox Devtools debugging, you can use the debugger keyword in your code to force Cypress to stop the code execution.
When Cypress detects the debugger keyword, execution will halt and the user will be able to open the developer tools of the browser.

Various tabs in the Devtools are available for debugging, including:

• Elements
• Console
• Sources
• Network

The debugger keyword should always be in a chain with then(). If it is not used in combination with then(), the debugger might not halt the code execution.

While console.log can not be directly used with Cypress, there's a workaround to use it in both headless and headful mode by adding a task.

To add a task capable of handling console.log, you'll need to follow these steps:

• Open index.js (or .ts) in the cypress/plugins folder, or any folder declared as pluginFolder in cypress.json.
• Add a task such as the one below:
  
  

  module.exports = (on, config) => {
    on('task', {
      log(message) {
        console.log(message)
        return null
      },
    })
  }

Now you can use the task (cy.task) in your scripts:

When Cypress fails to find an element on the page, it throws an error with a clear error message.
When an error happens, you can click View stack trace and see a detailed stack trace of where the error originated.

An example of such an error message might be: Timed out retrying after 4000ms: Expected to find element: #my-button, but never found it..

If you've configured the Cypress IDE / File Opener option, you can even click the file where the error originated from and open it in your favorite IDE.
This is useful when creating or debugging tests, as you can directly open a file from inside of Cypress.

To change your File Opener Preferences in Cypress, please follow these steps:

• Open the Cypress main window
• Click the settings button
• Expand the tab labelled File Opener Preference
• Choose an IDE in the list or specify a path to your IDE. This could be any IDE or editor, for example Visual Studio Code or Sublime Text

Once you've set this up, any future errors will contain an option to click the file and open it directly in your IDE.

Cypress provides a built-in method to debug tests: .debug().

This command allows you to pause in between test steps. It provides for a clean and readable way to pause the execution of the Cypress test.

You can chain the .debug() method with cy or any other method. It yields the same return from the previous method.

For an example, please see the code below where Cypress will pause the test execution in between finding an element on the page and clicking that same element.

The .pause() is very similar to the .debug() method.
It allows you to pause the test script, inspect the code and state of the test and then resume the test by using the next command.

The differences with the .debug() method are:

• .pause() does not provide any extra debugging information, .debug() does provide this
• with .pause() you can resume the test execution, .debug() does not allow this
• .debug() will only pause the execution when the Developer Tools are open, .pause() will always pause the execution

For an example, please see the code below where Cypress will pause the test execution in between finding an element on the page and clicking that same element.

As soon as Cypress has executed the visit command, it will pause the test execution, allowing you to inspect everything through the Developer Tools.

Cypress provides various methods to integrate with your favorite IDE such as Microsoft Visual Studio Code and the IntelliJ platform.

There are some ways to integrate debugging with Visual Studio code, such as cross-env and Debugger for Chrome, but unfortunately these are in maintenance-mode and no longer receive updates.