@wordpress/jest-puppeteer-axe

Jest Puppeteer Axe

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

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.

Setup

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

"jest": {
  "setupFilesAfterEnv": [
    "@wordpress/jest-puppeteer-axe"
  ]
},

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' },
	} );
} );