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 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 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