@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.
Setup Setup
The simplest setup is to use Jest’s setupFilesAfterEnv
config option:
"jest": { "setupFilesAfterEnv": [ "@wordpress/jest-puppeteer-axe" ] },
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' }, } ); } );