Faster Debugging with Test Error Code Frames in Cypress 4.6

Back to Cypress blog

Cypress 4.6 marks a significant improvement in test error messaging via code frame snippets that directly link to the source of the failure within a code editor.

One of the essential things a test framework must do well is the communication of error or test failure messages. For these messages to be useful, they must be highly readable and actionable. Cypress has always prioritized this experience by providing human-readable error messages and making the error stack trace easily accessible. Even with these features, the developer still has to map back the cause of the error to their source code to begin debugging.

To mitigate this additional step and speed up the debugging process, we've enhanced Cypress error messages with the associated code frame snippet and link.

Test Assertion Error Message with Code Frame Snippet and Link

The code frame snippet previews the exact line of code that caused an error and provides a quick context around the problem-point. Once you're ready to take action or take a more in-depth look, the code frame link takes you directly to the line and column of the error source within your desired code editor.

When you use a code frame link for the first time, Cypress will prompt you to select your desired file opener. Popular editors like VS Code, Sublime Text, Vim, and WebStorm are supported out-of-the-box, and you can configure any other editor that supports inline highlighting of files. This configuration can always be changed in the Cypress settings section, and you can learn more about it within the File Opener Preference docs.

File Opener Preference Settings

Cypress includes inline source maps to provide useful stack traces and code frames. If you use a modified preprocessor, please ensure that you are generating inline source maps to get the best error message experience. Read more about this within the Debugging guide.

These latest error message improvements in Cypress 4.6 minimize the time-gap between error discovery and resolution and are a part of our ongoing effort to deliver the best-in-class developer experience.

Let us know what you think; we're always listening. Catch you on the next release.