Write Tests with axe DevTools Cypress
Link to Write Tests with axe DevTools Cypress copied to clipboard
Producing accessibility scan results with axe DevTools can be as easy as one line of code. These results can be consumed raw, used in conjunction with an assertion library, or used to create accessibility reports.
note
These instructions apply to Cypress 10.0 and later.
Prerequisites
In order to test pages with axe DevTools, you first need it installed in your project. If you haven’t completed this step yet, view the installation guide.
Project Structure
.
├── package.json
├── cypress.config.js
├── cypress
│ ├── e2e
│ │ └── test.cy.js
│ └── support
│ └── e2e.jsSetup
The following is required to use axe DevTools Cypress.
Include the following line in cypress/support/e2e.js:
import '@axe-devtools/cypress';Within the cypress.config.js file, you will need to add the following:
const { defineConfig } = require('cypress');
const axeDevtoolsCypressPlugin = require("@axe-devtools/cypress/dist/plugin");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
axeDevtoolsCypressPlugin(on);
return config;
}
}
});Complete Sample File
Add this code to the test.cy.js file in the e2e directory:
describe('Axe DevTools Cypress', () => {
before(() => {
cy.visit('https://broken-workshop.dequelabs.com')
cy.axeAnalyze()
})
it('Get results from analyzing', () => {
cy.getAxeResults().then(results => {
cy.writeFile('./results.json', results)
})
})
})