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
The AudioEye Testing SDK Cypress Library maintains compatibility with the majority of Cypress plugins. However, certain
plugins that fundamentally alter the test authoring methodology are not directly supported by the SDK. For example, the
@badeball/cypress-cucumber-preprocessor
plugin, which utilizes .feature
files for test definition, is not directly
compatible with the SDK.
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.