Testing With Cypress
The AudioEye Accessibility Testing SDK Cypress Library gives you the ability to write Cypress tests to test for accessibility issues in your web application.
Pre-requisites
Visit the Getting Started page to learn how to setup Cypress in your project.
Usage
Use the SDK to test for accessibility issues.
describe('accessibility tests', () => {
it('accessibility for the entire page matches our expectation', () => {
cy.visit('http://localhost:3000');
cy.get('html').accessibility('resultCodes').should('not.be.empty');
cy.get('html')
.accessibility()
.should('deep.equal', [
'BadTag_Emphasis_Detect',
'Heading_Sequence_Wrong',
'Img_AttributeRequirement_Missing',
'Link_ExternalWarning_Missing',
]);
});
});
it('accessibility for the login button matches our expectation', () => {
cy.visit('http://localhost:3000');
cy.get('[data-cy="login"]').a11y().accessibility('deep.equal', ['Link_ExternalWarning_Missing']);
});
});
We provide custom commands named accessibility
and a11y
which can be used interchangeably.
SDK API
accessibility
/ a11y
Use the accessibility
custom command to test for accessibility issues.
Parameters
› output (String)
Determines the output type. Either resultCodes
or resultsGroupedByWcagSuccessCriteriaLevel
. If resultCodes
is
provided, an array of the test names will be returned. If resultsGroupedByWcagSuccessCriteriaLevel
is provided, an
object with the test results grouped by WCAG success criteria level will be returned. Defaults to resultCodes
.
- resultCodes
- resultsGroupedByWcagSuccessCriteriaLevel
cy.get(...)
.accessibility('resultCodes')
.should('deep.equal', [
'BadTag_Emphasis_Detect',
'Heading_Sequence_Wrong',
'Img_AttributeRequirement_Missing',
'Link_ExternalWarning_Missing',
]);
cy.get(...)
.accessibility('resultsGroupedByWcagSuccessCriteriaLevel')
.should('deep.equal', {
A: [ ... ],
AA: [ ... ],
AAA: [ ... ],
});
› conformanceLevel (String)
The conformance level to filter the results by. Either A
, AA
, or AAA
.
cy.get(...)
.accessibility('resultsGroupedByWcagSuccessCriteriaLevel', 'AA')
.should('deep.equal', {
A: [ ... ],
AA: [ ... ],
});
Returns
The accessibility
command returns a Cypress.Chainable
wrapper around
either a string array or an object with the test results grouped by WCAG success criteria level.