@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

Note: This package requires Node.js 12.0.0 or later. It is not compatible with older versions.

Top ↑

Setup #Setup

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

"jest": {
  "setupFilesAfterEnv": [
    "@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 params which allow Axe API to perform customized checks:

• include – CSS selector(s) to to add the list of elements to include in analysis.
• exclude – CSS selector(s) to to add the list of elements to exclude from analysis.
• disabledRules – the list of Axe rules to skip from verification.
• options – a flexible way to configure how Axe run operates. See axe-core API documentation for information on the object structure.
• config – Axe configuration object. See axe-core API documentation for documentation on the object structure.

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',
        disabledRules: [ 'aria-allowed-role' ],
        options: { iframes: false },
        config: { reporter: 'raw' },
    } );
} );