Failing a Test on console.error in Cypress
Published on Jan 12, 2021 by Ben Tyler
We recently switched over to Cypress for our end to end testing at my job. We were previously using a combination of Mocha and Puppeteer that made our tests so flakey to the point we just turned them off. This flake has totally disappeared and all things considered it was a relatively easy process to port all of our tests. If you have not had a chance to use Cypress I highly recommend checking it out.
As part of this process of porting tests over, I realized that Cypress was not failing our tests on console.error
statements. There are two easy workarounds for this though: 1) add a small bit of logic to the cypress/support/index.js
file or 2) the cypress-fail-on-console-error
package. Both options are totally valid. We ended up opting for option 1 because it worked for us and meant we didn’t have to add another dev dependency to our project.
Method 1 - Update commands.js
The first method is to add the following logic to cypress/support/index.js
. This solution was adapted from Ryan Yost’s post, Advanced Cypress Tips.
// /cypres/support/index.jsCypress.on("window:before:load", win => { cy.stub(win.console, "error").callsFake(msg => { // log out to the terminal cy.now("task", "error", msg) // log to Command Log and fail the test throw new Error(msg) })})
Here is a walk through of what is going on.
- we use Cypress.on() to listen for the
window:before:load
event to hook into and modify thewindow
before any of our app’s code runs - we stub out the
console.error
method and attachcallsFake
so that we can ensure our desired logic gets run cy.now()
is a bit of a hack here that Ryan Jost discusses in his blog post but it allows us to ensure the error gets logged out to the terminal. More info oncy.now()
can be found here- and lastly we intercept the contents of the
console.error
and throw them as a proper error.
Method 2 - Use the cypress-fail-on-console-error package
This method is pretty straightforward as well and has some additional configuration options that you can read about in the project repo.
Install the package
# npmnpm install cypress-fail-on-console-error --save-dev# yarnyarn add cypress-fail-on-console-error -D
Then make a small tweak to cypress/support/index.js
.
// /cypress/support/index.jsimport failOnConsoleError from "cypress-fail-on-console-error"failOnConsoleError()
That’s it!
About Me
Howdy, I am Ben Tyler. I am a product-focused engineer who cares deeply about finding the simplest solution to a user's problem.
I love collaborating on projects, so if you need a hand, please schedule a call or get in touch at hello@lostcreekdesigns.co!
Schedule a Call!