Debugging
What you'll learn
- How Cypress runs in the same event loop with your code, keeping debugging less demanding and more understandable
- How Cypress embraces the standard Developer Tools
- How and when to use debugger and the shorthand .debug() command
Using debugger
it('let me debug when the after the command executes', () => {
cy.mount(<MyComponent />)
cy.get('[data-testid="selector-in-question"]').then(($selectedElement) => {
// Debugger is hit after the cy.visit
// and cy.get commands have completed
debugger
})
})
it('let me debug like a fiend', () => {
cy.mount(<MyComponent />)
cy.get('[data-testid="selector-in-question"]').debug()
})
The current subject that is yielded by the cy.get() is exposed as the variable subject within your Developer Tools so that you can interact with it in the console
Step through test commands
it('adds items', () => {
cy.pause()
cy.get('[data-testid="new-todo"]')
// more commands
})
Using the Developer Tools
All of Cypress's commands, when clicked on within the Command Log, print extra information about the command, its subject, and its yielded result