Overview of the @axe-core/watcher package

Link to Overview of the @axe-core/watcher package copied to clipboard

The @axe-core/watcher package is integrated into your test suite to test for accessibility errors

Free Trial

Documentation Overview for Watcher

The information in the @axe-core/watcher section of the documentation consists of the following:

  • This article, Overview, discusses the @axe-core/watcher package (also referred to as Watcher or axe Watcher). Here, you can find overview information about the package, where you can download it, how to install it, and links to other resources.
  • System Requirements covers the versions and specifics of software for use with Watcher.
  • Articles under JavaScript Instructions and TypeScript Instructions provide instructions for integrating Watcher with several different test frameworks and include example snippets for both JavaScript and TypeScript. This is the same information you see when you create a project on the axe Developer Hub site.
  • API Reference provides a guide to the APIs provided by the @axe-core/watcher package.

What is Watcher?

The @axe-core/watcher package lets you easily add accessibility testing to your existing test suite. It's a Node.js package available on npmjs.com and currently works with the most popular testing frameworks. Your tests can be written in JavaScript or TypeScript.

The @axe-core/watcher package, when integrated into your end-to-end test suite:

  • Adds accessibility validation to your existing test suite with minimal code changes, thanks to Watcher wrapping your test framework's important methods and function calls.
  • Automatically analyzes web pages when you run your test suite and re-analyzes the pages upon detection of any change to the DOM (each change is considered a separate page state)--perfect for single-page web apps and other complex sites with login pages and other dynamic content.
  • Links Git commits to accessibility results to let you evaluate the accessibility of each commit and monitor your project's overall accessibility progress.
  • Sends accessibility results tied to each page state and Git commit to axe Developer Hub, where the results are tracked, de-duplicated, and presented.

How to Obtain

The latest version of @axe-core/watcher is available at npmjs.com.

Installation

You can install the package in your Node.js project as a dev dependency with the following command:

npm install --save-dev @axe-core/watcher

System Requirements

For the system requirements for @axe-core/watcher, see System Requirements.

note

Even though the axe Developer Hub website has wide browser support, only Google Chrome is supported by the @axe-core/watcher package for testing, so, for instance, you cannot use Cypress's default Electron browser to run your tests.

API Reference

For a reference to the APIs provided by the @axe-core/watcher package, see API Reference.

Release notes

For information about the changes in @axe-core/watcher, see the @axe-core/watcher Release Notes.

The Examples Repo

You can experiment with the code in the examples repository on GitHub. It contains examples for:

Instructions for Modifying Your Test Suite

The instructions section of the documentation includes instructions for modifying your test suite to include the @axe-core/watcher package.

tip

These are the same instructions you see when you create a new project in axe Developer Hub.

The following sections contain links to each testing framework's instructions:

JavaScript Instructions

TypeScript Instructions