Instructions for Cypress and TypeScript

Link to Instructions for Cypress and TypeScript copied to clipboard

Configuring your tests with Cypress and TypeScript

Free Trial
  1. In the root level of your testing folder, install the @axe-core/watcher package and all of its dependencies using npm or your preferred package manager (for example, Yarn or pnpm).

    npm install --save-dev @axe-core/watcher
  2. In cypress.config.ts, import the cypressConfig 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
      })
    );
  3. In your Cypress support file (commonly called cypress/support/e2e.ts), import the @axe-core/watcher package cypressCommands and call axeWatcherFlush() after each test:

    import '@axe-core/watcher/dist/cypressCommands';
    
    afterEach(() => {
      cy.axeWatcherFlush();
    });
  4. 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).