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 available tests to test for accessibility issues in your Cypress tests.

describe('accessibility tests', () => {
  it('accessibility for the entire page matches our expectation', () => {
    cy.visit('http://localhost:3000');

    // For full page scan that uses the root element, we need to "get" something first otherwise the page won't be settled
    cy.get('[data-cy="login"]').should('contain', 'Join or Login');

    cy.get('html:root').then((htmlRootElement) => {
      expect(htmlRootElement).to.findAccessibilityIssues();
      expect(htmlRootElement).to.findTheseAccessibilityIssues('Img_Name_Missing');
      expect(htmlRootElement).to.onlyHaveTheseAccessibilityIssues(
        'Img_Name_Missing',
        'Text_Contrast_TooLow',
        'Html_Possible_Heading',
      );
    });
  });

  it('accessibility for the login button matches our expectation', () => {
    cy.visit('http://localhost:3000');

    cy.get('[data-cy="login"]').then((button) => expect(button).to.not.findAccessibilityIssues());
  });
});

Available Tests

findAccessibilityIssues

Use .findAccessibilityIssues when checking if a component has accessibility issues.

it('expect to find accessibility issues on the page', () => {
  cy.visit('http://localhost:3000');
  cy.get('html:root').then((htmlRootElement) => expect(htmlRootElement).to.findAccessibilityIssues());
});

it('expect to find no accessibility issues on the page', () => {
  cy.visit('http://localhost:3000');
  cy.get('html:root').then((htmlRootElement) => expect(htmlRootElement).to.not.findAccessibilityIssues());
});

onlyHaveTheseAccessibilityIssues

Use .onlyHaveTheseAccessibilityIssues when checking if a component has exactly the same issues as those expected. Pass a comma separated list of expected test names.

it('expect to find an accessibility issues when no alt-text is passed to component', () => {
  cy.visit('http://localhost:3000');
  cy.get('[data-cy="company-logo"]').then((htmlRootElement) =>
    expect(htmlRootElement).to.onlyHaveTheseAccessibilityIssues('Img_Name_Missing'),
  );
});

findTheseAccessibilityIssues

Use .findTheseAccessibilityIssues when checking if a component's accessibility issues includes the issues expected. Pass a comma separated list of expected test names.

it('expect to find an alt-text accessibility issue', () => {
  cy.visit('http://localhost:3000');
  cy.get('[data-cy="company-logo"]').then((htmlRootElement) =>
    expect(htmlRootElement).to.findTheseAccessibilityIssues('Img_Name_Missing'),
  );
});

it('expect to not find an alt-text accessibility issue', () => {
  cy.visit('http://localhost:3000');
  const descriptiveImage = await promisify(cy.get(''));
  cy.get('[data-cy="descriptive-image"]').then((htmlRootElement) => expect(htmlRootElement).to.not.findTheseAccessibilityIssues('Img_Name_Missing'));
});