The Cypress team is still hard at work (per usual), bringing us regular releases. The latest iteration of Cypress (4.6.0) is out, and with it comes a surprising feature. It's something that I always wanted but didn't think was even possible, so I never asked for it or tried to build it out myself.
I'll give it to you straight from their Changelog:
Errors in the Test Runner now display a code frame to preview where the failure occurred with the relevant file, line number, and column number highlighted. Clicking on the file link will open the file in your preferred file opener and highlight the line and column in editors that support it.
So imagine for a moment the test runner shows a test failed at the cy.get() command, perhaps because you got the selector wrong. It happens to the best of us. Below the usual stack trace and message, Timed out retrying: Expected to find element: #login, but never found it., is a code frame which shows the line in your spec containing the failing command and a couple of lines of surrounding code for context. That's cute. At this point you'd have to go back to your editor and find the file and line where the failure occurred so you can start fixing it. But - at the top of the code frame is the relative path to the spec file (that you created in VSCode). And - here's the best part - clicking on that file opens it in VSCode with the offending line highlighted and your cursor in the precise spot where you need to make the correction. Pretty sweet, right?
Here it is in action:
This issue was created over a year ago, so completion of this is a testament to the diligence of the Cypress team in delivering an amazing, ever-evolving product.
In addition to regular updates, Cypress also comes with outstanding documentation if you want instructions to set up the File Opener Preference or how Cypress Errors work in general.
Enjoy this new feature and be sure to share your feedback with the Cypress team.
Top comments (0)