I’m writing Cypress tests in JavaScript using VS Code, and I’m looking for a way to interactively debug, something similar to byebug in Ruby.
Is there a built-in Cypress pause mechanism that lets me stop test execution and try out different cy commands in the browser console, instead of repeatedly editing code and rerunning the tests?
Ah, you’re looking for a way to pause a Cypress test and experiment with commands?
I’ve been using cy.pause() quite a lot for this. It’s pretty handy, like adding a breakpoint in your tests. When Cypress hits cy.pause() in open mode, it halts the test execution, and you get a chance to interact with the browser. You can inspect elements, modify your selectors, or even run other cy commands directly from the browser console.
It’s definitely a game-changer when debugging flaky tests or when I need to explore certain UI behaviors in depth without constantly rerunning my tests.
Yeah, @joe-elmoufak , cy.pause() is great, but I’ve also found that the Cypress Test Runner’s time-travel feature is super helpful when you’re debugging. It lets you hover over commands in the Command Log and see how the app was at that specific point in time. Combine that with cy.pause() or even using debugger (for JS breakpoints) and you can try out different selectors or assertions on the fly.
It’s not quite like byebug in Ruby, but honestly, once you get used to it, the visual and interactive nature of it makes it even more intuitive for me. So, you get that same interactive feel while debugging, but with the bonus of it all happening right in the UI.