Debugging in Cypress

Debugging in software development is necessary to trace errors in your programs or scripts. In Cypress, you can use debug() method to quickly inspect any part of your application during the test.

debug

You can attach debug() to any Cypress command chain, such as:

cy.debug().visit('https://maps.google.com') //Pause to debug at beginning of commands
cy.get('.searchbox-hamburger-container').debug().type('Golden Gate Bridge') //Debug the 'get' command's yield
cy.get(‘.searchbox-searchbutton-container’).click().debug() //Debug the 'click' command's yield
cy.url().debug(true).should('eq', 'https://www.google.com/maps/search/Golden+Gate+Bridge/@37.8199286,-122.4804438,17z') //debugging is turned on

Console output of cy.debug().visit(‘https://maps.google.com')

Console output of cy.get().debug(), click().debug(), cy.url().debug(true)

You can also pass in an options object to change the default behavior of debug() method with debug(options).

options object of debug()

cy.url().debug(false).should('eq', 'https://www.google.com/maps/search/Golden+Gate+Bridge/@37.8199286,-122.4804438,17z') //debugging is turned off 

console output of debug(false), no debug info shown for cy.url().debug()

Don’t forget to open Developer Tools in Cypress Dashboard to hit the breakpoint.

Thanks for reading.