cypress-fail-on-console-error

Fail Cypress tests when the application under test calls console.error(). Set up once in your support file, it checks every test for errors that your app or third-party scripts catch and only log, which Cypress doesn't fail on. Works for e2e and component tests.

To fail tests on network errors, see cypress-fail-on-network-error.

Installation

npm install cypress-fail-on-console-error --save-dev

Usage

Call failOnConsoleError() in your support file: cypress/support/e2e.js for e2e tests, cypress/support/component.js for component tests, or the .ts versions of these files.

import failOnConsoleError from 'cypress-fail-on-console-error';

failOnConsoleError();

When the application calls console.error(), the test fails after the current command:

Configuration

| Option | Default | Description | | ----------------------- | ----------- | ----------- | | ignoreConsoleMessages | [] | Console messages that don't fail a test, see Matching messages. | | consoleTypes | ['error'] | Console methods that fail a test: error, warn, info, debug, trace, table, log or assert. | | debug | false | Also logs each message that ignoreConsoleMessages ignores, with the entry that matched it. See Debugging. |

import failOnConsoleError, { type Config } from 'cypress-fail-on-console-error';

const config: Config = {
    ignoreConsoleMessages: [
        'ResizeObserver loop',
        'unique "key" prop',
        { type: 'warn', message: 'is deprecated' }, // only for console.warn
    ],
    consoleTypes: ['error', 'warn'],
};

failOnConsoleError(config);

To fail only on messages that contain some text, ignore every message that doesn't contain it:

failOnConsoleError({
    // ignore every message that doesn't contain React
    ignoreConsoleMessages: [/^(?![\s\S]*React)/],
});

Matching messages

An entry is a string, a RegExp, or { type, message }, which only ignores calls of that console method. A message that matches any entry is ignored.

• A string or RegExp matches anywhere in the message. Strings are converted with new RegExp(string), so escape special characters.
• The message is all arguments of the console call, joined with spaces. Objects are converted to JSON: console.error('Failed to load user', { id: 42 }) becomes Failed to load user {"id":42}.
• An Error becomes its name, message and stack trace, such as TypeError: user is undefined followed by lines like at render (app.js:12:5), so you can also match the file an error came from.

Ignoring messages in one test

To change the ignored messages in a test, register the commands in your support file:

import failOnConsoleError, {
    addIgnoredConsoleMessagesCommands,
} from 'cypress-fail-on-console-error';

const failOnConsole = failOnConsoleError(config);
addIgnoredConsoleMessagesCommands(failOnConsole);

Then use them in a test. Changes last until the end of the test.

it('should show the page without recommendations', () => {
    cy.addIgnoredConsoleMessages(['Failed to load recommendations']);
    cy.visit('/');
});

| Command | Description | | --------------------------------------------------------- | ----------- | | cy.getIgnoredConsoleMessages() | Yields ignoreConsoleMessages. | | cy.setIgnoredConsoleMessages(['ResizeObserver loop']) | Replaces ignoreConsoleMessages. | | cy.addIgnoredConsoleMessages(['is deprecated']) | Adds to ignoreConsoleMessages. | | cy.deleteIgnoredConsoleMessages(['ResizeObserver loop']) | Removes from ignoreConsoleMessages. |

To change consoleTypes or debug in a test, use getConfig() and setConfig(), which failOnConsoleError() returns:

import { type ConsoleType } from 'cypress-fail-on-console-error';

const { getConfig, setConfig } = failOnConsole;

Cypress.Commands.add('setConsoleTypes', (consoleTypes: ConsoleType[]) =>
    setConfig({ ...getConfig(), consoleTypes })
);

declare global {
    namespace Cypress {
        interface Chainable {
            setConsoleTypes(consoleTypes: ConsoleType[]): Chainable<void>;
        }
    }
}

Debugging

Click a console.error entry in the command log to print the original arguments and the message your ignoreConsoleMessages were matched against to the browser console.

Set debug: true to also log each ignored message, with the entry that matched it:

failOnConsoleError({
    ignoreConsoleMessages: ['ResizeObserver loop'],
    debug: true,
});

Contributing

See CONTRIBUTING.md.