WordPress.org

@wordpress/jest-puppeteer-axe Edit

Axe (the Accessibility Engine) API integration with Jest and Puppeteer.

Defines Jest async matcher to check whether a given Puppeteer’s page instance passes Axe accessibility tests.

Installation Installation

Install the module

npm install @wordpress/jest-puppeteer-axe --save-dev

Setup Setup

The simplest setup is to use Jest’s setupTestFrameworkScriptFile config option:

"jest": {
  "setupTestFrameworkScriptFile": "./node_modules/@wordpress/jest-puppeteer-axe/build/index.js"
},

If your project already has a script file which sets up the test framework, you will need the following import statement:

import '@wordpress/jest-puppeteer-axe';

Top ↑

Usage Usage

In your Jest test suite add the following code to the test’s body:

test( 'checks the test page with Axe', async () => {
    // First, run some code which loads the content of the page.
    loadTestPage();

    await expect( page ).toPassAxeTests();
} );

It is also possible to pass optional Axe API options to perform customized check:
include – CSS selector to to add the list of elements to include in analysis.
exclude – CSS selector to to add the list of elements to exclude from analysis.

test( 'checks the test component with Axe excluding some button', async () => {

    // First, run some code which loads the content of the page.
    loadPageWithTestComponent();

    await expect( page ).toPassAxeTests( {
        include: '.test-component',
        exclude: '.some-button',
    } );
} );

Code is Poetry.

Skip to toolbar