Testing for Console Errors in Cypress

Cypress is a popular tool for end-to-end testing for web applications. Often you want to be sure you did not forget console messages or did not introduce errors in your final application. This article shows how to test for that in Cypress.

About Cypress

Cypress is a web testing tool created by the company Cypress.io, Inc. from Atlanta, USA. They are backed by a number of venture capitalists like Sapphire Ventures and Bessemer.

Cypress wants to make testing for developers and QA engineers as easy as possible. It is free open source software and comes with additional commercial plans.

The Cypress tool tests at the layer of end-user interaction, meaning it tests end-to-end. In difference to unit tests that test individual units of code, end-to-end testing involves the finished web application and its user interactions in the browser.

Traditionally, tools like Selenium were used for that, but they are cumbersome to use and have no great developer experience.

Testing for Console Errors

Often there is the case that one leaves console messages or introduces runtime errors that result in a console error log.

For both cases, one can use Cypress to test web applications for the introduction of these kinds of console logs.

Cypress knows the concept of a spy. A spy is a function that records if and how often it is called. The spy function wraps the function to test. In our case, we would like to spy on the console.error() function. Every time the console.error() function is called, we will know it and can write our tests accordingly.

Behind the scenes, Cypress integrates the Sinon.js spy library.

Test Code

This is the Cypress code that I use to test my blog and be sure no console errors have been introduced:

Blog.spec.js

let windowErrorSpy;

Cypress.on('window:before:load', (win) => {
  windowErrorSpy = cy.spy(win.console, 'error'); 
});

const DELAY = 1000;

describe('Blog', () => {
  afterEach(() => {
    cy.wait(DELAY).then(() => {
      expect(windowErrorSpy).to.not.be.called; 
    });
  });

  it('Visit main English page', () => {
    cy.visit(
      'https://www.tderflinger.com'
    )
    cy.contains('Thoughts by Thomas Derflinger')
    cy.contains('Imprint')
  })

  it('Visit main French page', () => {
    cy.visit(
      'https://www.tderflinger.com/fr'
    )
    cy.contains('Réflexions par Thomas Derflinger')
    cy.contains('Mentions légales')
    cy.contains('Contactez-moi')
  })
})

The spy is created before the window loads with cy.spy(win.console, 'error'). In this function, the win variable is the correct window instance. The console object with the error function is part of window.

Later, after each test, we check that the spy for the console.error function has not been called with expect(windowErrorSpy).to.not.be.called. This means there are no console errors in the page of my Blog if the test runs successfully.

Conclusion

Cypress is an easy testing tool that also allows for such testing cases like checking if console.error() does occur by using spies.

References

• Cypress: https://www.cypress.io/

• Sinon.js: https://sinonjs.org/