Instructions for Cypress Component Testing and JavaScript

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

In cypress.config.js, import the cypressConfig() function from the @axe-core/watcher package and wrap your config with it. Set the testingTypes array to include component:

const { defineConfig } = require('cypress');
const { cypressConfig } = require('@axe-core/watcher/cypress/config');

const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
const PROJECT_ID = process.env.PROJECT_ID

module.exports = defineConfig(  
  cypressConfig({
    axe: {
      apiKey: ACCESSIBILITY_API_KEY,
      projectId: PROJECT_ID,
      testingTypes: ['component']
    },
    // Your existing Cypress configuration code here
    component: {
      // Your component testing configuration
      
      // For example:
      
      // devServer: {
      //  framework: 'react',
      //  bundler: 'webpack',
      //},
    },
  })
);

Be sure to set ACCESSIBILITY_API_KEY and PROJECT_ID in your environment to your personal API key (found in your axe Account, API KEYS tab) and your project ID (shown at the top of these instructions when you created your project or available from the Projects page by choosing Configure project under Settings).

In your Cypress component support file (commonly called cypress/support/component.js), import the @axe-core/watcher package cypressCommands and call axeWatcherFlush() after each test:

require('@axe-core/watcher/cypress/support');

afterEach(() => {
  cy.axeWatcherFlush();
});

You're all done. Run your component tests and check your results. Please note @axe-core/watcher only runs in Chrome for Testing or Chromium 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-for-testing --component).