Instructions for Cypress and TypeScript
Configuring your tests with Cypress and TypeScript
-
In the root level of your testing folder, install the
@axe-core/watcher
package and all of its dependencies usingnpm
or your preferred package manager (for example,yarn
orpnpm
).npm install --save-dev @axe-core/watcher
-
In
cypress.config.ts
, import thecypressConfig()
function from the@axe-core/watcher
package and wrap your config with it:import { defineConfig } from 'cypress'; import { cypressConfig } from '@axe-core/watcher'; const API_KEY = process.env.API_KEY export default defineConfig( cypressConfig({ axe: { apiKey: API_KEY }, // Your existing Cypress configuration code here }) );
-
In your Cypress support file (commonly called
cypress/support/e2e.ts
), importcypressCommands
and callaxeWatcherFlush()
after each test:import '@axe-core/watcher/dist/cypressCommands'; afterEach(() => { cy.axeWatcherFlush(); });
-
You're all done. Run your end-to-end tests and check your results. Please note
@axe-core/watcher
only runs in Chrome and should only be used in Cypress run mode. It may be used with--headless=new
or--headed
(for example,cypress run --headed --browser=chrome
).