I like to write almost as much as I like to build. I write about dashboards, maps, freelancing, music, and the outdoors. If this interests you too, please join my mailing list to get updates whenever I publish new content.
Subscribe
Failing a Test on console.error in Cypress
Date: 1/12/2021
Time to Read: 1 minutes
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.
1// /cypres/support/index.js2Cypress.on("window:before:load", win => {3 cy.stub(win.console, "error").callsFake(msg => {4 // log out to the terminal5 cy.now("task", "error", msg)6 // log to Command Log and fail the test7 throw new Error(msg)8 })9})10
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
1# npm2npm install cypress-fail-on-console-error --save-dev3
4# yarn5yarn add cypress-fail-on-console-error -D6
Then make a small tweak to cypress/support/index.js
.
1// /cypress/support/index.js2import failOnConsoleError from "cypress-fail-on-console-error"3
4failOnConsoleError()5
That's it!