Add toPassAxeTests feature

[calebeby]

This assertion, based on jest-puppeteer-axe, allows you to check a page using the axe accessibility linter.

The output is a little nicer than jest-puppeteer-axe's because it shows the markup of the elements which are breaking axe rules (as opposed to a non-unique CSS selector), so it is easier to figure out which elements need to be fixed. In the browser, you can click on the markup to see the relevant elements in the devtools elements panel.

Documentation

test(
  'Axe tests',
  withBrowser(async ({ utils, page }) => {
    await utils.injectHTML(`
      <h1>Some html</h1>
    `);
    await expect(page).toPassAxeTests();
  }),
);

Here's what the output looks like in the CLI:

Here's what it looks like in the browser:

Testing

Run the tests in watch mode:

git checkout to-pass-axe-tests
npm i
npm run build
npm run test:watch topassaxe

Note: the HTML syntax highlighting in the CLI output isn't shown when Pleasantest runs in its own test suite. This is so that the test snapshots are still readable and don't get covered with escape codes for coloring.

Test the browser output by changing tests/accessibility/toPassAxeTests.test.ts to use withBrowser.headed instead of withBrowser. Then it should open a browser for the test, and close it once it passes. To make the test fail so you can see the failure message in the browser, under the utils.injectHTML(...) line add a new line:

await expect(page).toPassAxeTests()

[Paul-Hebert]

This is awesome! Code looks good to me besides one nit.