How to use the a11ytester

The library provides the infrastructure, you need to create the specs for each frontend to test.

Spec structure

Each spec should be an object with a specific structure:

• An id, used to generate report names
• The url to test
• A setup method, called before the test
• A cleanup method, called after the test
• A config object, passed to the test runner (pa11y)

You can refer to the JSDoc of A11yTestDefinition in index.js for more details: click here.

Example:

// API used to interact with doodle
const { createPoll, deletePoll } = require('../api/doodleApi');

let pollId;

module.exports = {
  id: 'participationPage',
  get url() {
    return `https://doodle.com/poll/${pollId}`;
  },
  get config() {
    return {
      rootElement: '#d-app',
      actions: [
        'wait for element #d-participationPage to be visible'
      ]
    };
  },

  setup: async () => {
    pollId = await createPoll();
  },
  cleanup: async () => {
    await deletePoll(pollId);
  }
};

FAQ

Where should I put my spec files?

Add a .a11y.js suffix to your files or put them inside a __a11y__ folder. The a11ytester will automatically find them.

Can I test SPAs?

Yes. You can use pa11y actions to navigate to the right page.

My tests won't work locally

Headless Chrome has some issues running pages with an invalid certificate. You have to test somewhere else (e.g. staging) until we solve the issue with local certificates.

I don't understand what is going on. How can I debug?

You can either set headless: false in pa11y.chromeLaunchConfig or set verbose: true in the configuration.