Features

How to start debugging Cypress Tests

  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • Share on HackerNews

The Cypress Framework is an end-to-end browser test framework, which is popular among developers and QA for testing websites.


Cypress provides a clean and easy way to write cross browser tests. When using Cypress, you might end up wanting to debug Cypress tests.
This article will focus on how to debug your Cypress tests with Cypress debugger and other developer tools.

Debug Cypress Tests using the Debugger

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.

Debug Cypress Tests using console logs

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:

describe('Test TestingBot Home Page', () => {
    it('Verify if the TestingBot logo is visible', () => {
        cy.visit('https://testingbot.com/')
        cy.task('log', 'this is a console.log')
    })
})

Debug Cypress tests using the stack trace

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.

Debug Cypress with .debug() option

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.

describe('Test the TestingBot HomePage', () => {
    it('verify if we can click the signup button', () => {
        cy.visit('https://testingbot.com/');
        cy.get("a[title='Sign Up']").first().debug().click()
    })
})

The .debug() method will only halt test execution if the Developer Tools are open at the time of running the test.

Debug Cypress with .pause() option

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.


describe('Verify TestingBot HomePage', () => {
    it('verify if we can click the signup button', () => {
        cy.visit('https://testingbot.com/').pause()
        cy.get("a[title='Sign Up']").first().click()
    })
})

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

Debug Cypress Tests with your IDE

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.

  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • Share on HackerNews
TestingBot Logo

Sign up for a Free Trial

Start testing your apps with TestingBot.

No credit card required.

Other Articles

Working with cookies - Selenium WebDriver

Handling cookies with Selenium WebDriver is a common task, since most websites use cookies. In this guide, we'll show you how to do this with Selenium.

Read more
How to use the Actions Class In Selenium

Selenium WebDriver comes with an Action Class, which allows you to simulate user input events, such as mouse and keyboard actions.

Read more
Handling Captcha during Automated Testing

We will discuss possible solutions to run automated tests with Captcha enabled websites.

Read more