Skip to main content
Version: 3.0.0

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']);
  });
});
Fixture names

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.

cy.get(...)
  .accessibility('resultCodes')
  .should('deep.equal', [
    'BadTag_Emphasis_Detect',
    'Heading_Sequence_Wrong',
    'Img_AttributeRequirement_Missing',
    'Link_ExternalWarning_Missing',
  ]);

› 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.