How to Test If Your Website Logs Errors to the Console

Nobody likes to see their website output script errors to the JavaScript console. Luckily, it is a great time for automated testing, so nobody has to! In this post, I’ll demonstrate how to write a Mocha test that uses Nightmare JS to automatically check for console.error() messages and unhandled exception messages in the console:

To get started, create a project directory and install the project requirements with

mkdir nightmare-console-errors
cd nightmare-console-errors
yarn add nightmare mocha chai

We’ll use Mocha as a test runner and Chai as an assertion library. Create a file named test.js with the following contents:

const Nightmare = require('nightmare');
const expect = require('chai').expect;

describe('DevTools console for demo page', function() {
  it('should not log any errors', function (done) {
    this.timeout(20000);

    const nightmare = new Nightmare({
      openDevTools: {
        mode: 'detach'
      },
      show: true,
    });

    const url = 'http://intoli.com/blog/nightmare-console-errors/demo.html';
    const errors = [];

    nightmare
      .on('page', function(type, message, stack) {
        if (type == 'error') {
          errors.push(message);
        }
      })
      .on('console', function(type, message) {
        if (type == 'error') {
          errors.push(message);
        }
      })
      .goto(url)
      .end()
      .then((result) => {
        expect(errors).to.have.lengthOf(0);
        done();
      })
      .catch(done)
  });
});

This will visit a demo page I’ve prepared at https://intoli.com/blog/nightmare-console-errors/demo.html whose console displays a message from both console.error() and throw new Error(). You can see the exact output in the screenshot above, or by visitinig the page and opening the console. Running the test with

./node_modules/.bin/mocha

should display something like

  DevTools console for demo page
    1) should not log any errors


  0 passing (1s)
  1 failing

  1) DevTools console for demo page
       should not log any errors:

      AssertionError: expected [ Array(2) ] to have a length of 0 but got 2
      + expected - actual

      -2
      +0

      at nightmare.on.on.goto.end.then (test.js:32:32)
      at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

What makes this possible are the two event handlers specified (before the .goto statement!) via .on('page', ...) and .on('console', ...). The events get triggered thanks to Nightmare’s default preload script. A final remark about the code is that the extra parameters to Nightmare are only there in order to display the browser window and DevTools panel during the test for the purposes of this how to guide.

Let’s also make sure the test passes when there are in fact no errors. Change the value of url in test.js to https://intoli.com/blog/nightmare-console-errors/demo.html?clean=true, which will prevent the page from displaying any errors. Running the test again would time display something like:

  DevTools console
    ✓ should not log any errors (687ms)


  1 passing (693ms)

I hope you found this short how-to useful, especially if coming from Google looking for this exact problem. We blog about testing, automation, scraping, and other interesting issues on the Intoli blog. You can also subscribe to our mailling list or get in touch if you need help with an automation or data project.