Cypress accessibility tests

In

Install and configure cypress

  1. Add dependency

    1
    npm install -D cypress cypress-axe

  2. Configure plugin (cypress/plugins/index.js)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    module.exports = (on, config) => {
      on('task', {
        log(message) {
          console.log(message)

          return null
        },
        table(message) {
          console.table(message)

          return null
        }
      })
    }

  3. Configure suport: create a cypress/support/index.js file containing:

    1
    import 'cypress-axe'

Creating the accessibility test

Cypress will visit each page of the project,a nd it will test each example in the page.

  1. Create the Cypress configuration file (cypress.json), with video recording disabled:

    1
    2
    3
    4
    {
      "baseUrl": "http://localhost:8000/",
      "video": false
    }

  2. Create the test file (cypress/integration/accessibility.spec.js)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    // get failing elements info
    const terminalLog = (violations) => {
      cy.task(
        'log',
        `${violations.length} accessibility violation${
          violations.length === 1 ? '' : 's'
        } ${violations.length === 1 ? 'was' : 'were'} detected`
      )
      // pluck specific keys to keep the table readable
      const violationData = violations.map(
        ({ id, impact, description, nodes }) => ({
          id,
          impact,
          description,
          nodes: nodes.length
        })
      )

      cy.task('table', violationData)
    }

    const routes = ['badge.html', 'button.html'];

    describe('Component accessibility test', () => {
      routes.forEach((route) => {
        const componentName = route.replace('.html', '');
        const testName = '${componentName}' +
            'has no detectable accessibility violations on load';

        it(testName, () => {
          cy.visit(route);
          cy.injectAxe();

          cy.get('.cypress-wrapper').each((element, index) => {
            cy.checkA11y(
              '.cypress-wrapper',
              {
                runOnly: {
                  type: 'tag',
                  values: ['wcag2a'],
                },
              }
              // if you want to get the violations log
              terminalLog,
            );
          });
        });
      });
    });
    • Standards to test
      Tag Name Accessibility Standard / Purpose
      wcag2a WCAG 2.0 Level A
      wcag2aa WCAG 2.0 Level AA
      wcag21a WCAG 2.1 Level A
      wcag21aa WCAG 2.1 Level AA
      best-practice Common accessibility best practices
      wcag*** WCAG success criterion e.g. wcag111 maps to SC 1.1.1
      ACT W3C approved Accessibility Conformance Testing rules
      section508 Old Section 508 rules
      section508.*.* Requirement in old Section 508

  3. Create coomand inside the package.json:

    1
    2
    3
    {
      "test": "cypress"
    }

  4. Run it

    1
    2
    3
    4
    5
    # run headless mode
    npm run cypress run

    # use Cypress runner
    npm run cypress open