Skip to content

Cypress AXE accessibility testing

Jump to bottom Edit New page
Mika Vaara edited this page Aug 22, 2023 · 12 revisions

Introduction

Cypress AXE is an integration of the AXE accessibility testing library with the Cypress testing framework to perform automated accessibility testing of web applications. The tests can be run both from the command line and through the Cypress AXE GUI.

Installation

(Assuming that Skosmos is installed correctly and its dependencies are up to date)

  • npm install
  • In the file cypress.config.js located in the root of Skosmos, set the baseUrl to match the Skosmos configuration you are using.

Running Tests:

To run the tests that come with Skosmos:

GUI tests in the testing browser (launched from the command line):

  • Run: npm run test-accessibility-gui-all
  • In the opened window, select E2E Testing
  • Select the browser
  • In the opened testing browser, open Inspector (Chrome & Firefox: ctrl-shift-I)
  • Click on the desired test from the list and observe the console, where a table of test results will appear
  • Click on the notifications in the TEST BODY section of the Specs to see in the console the list of any issues and pay close attention to the Description field.
  • Close the testing browser
  • In the command line: ctrl-c

Tests in command line:

  • To run all tests, execute: npm run test-accessibility-cli-all
  • Monitor the output, where you will see a table of potential issues for each test
  • If you want to run an individual test, look for the script name to run in the package.json file (located at the root of Skosmos)
  • Example run for an individual test: npm run test-accessibility-cli-landing

Editing or Creating Tests:

You can take inspiration from the previous tests done in Skosmos. The current categorization of usability tests is based on Skosmos templates, and it is advisable to follow this approach as closely as feasible. In practice, it is better to expand existing tests, but if needed and sensible, new tests can also be created.

Keep accessibility tests separate from Cypress tests, meaning they should be placed in the directory cypress/e2e/accessibility-tests or in a subdirectory named appropriately.

Ensure the functionality of tests in both the Cypress AXE GUI and the command line. In both cases, verify that the test works when running all tests as well as when running tests individually.

Help

For assistance in creating tests, you can explore the following resources:

Links

Used Development Dependencies:

  • axe-core
  • cypress
  • cypress-axe
Add a custom footer
Clone this wiki locally