Skip to main content
Version: v4

Testing With Playwright

The AudioEye Accessibility Testing SDK Playwright Library gives you the ability to write Playwright tests to test for accessibility issues in your web application.

Pre-requisites​

Visit the Getting Started page to configure your .npmrc with your AudioEye entitlement token.

Installation​

npm install -D @audioeye/testing-sdk-playwright
Minimum version requirement

We require @playwright/test to be version 1.39.0 or greater.

Setup​

We use Playwright fixtures to evaluate accessibility issues. Fixtures work by extending the built in test runner. To use the AudioEye Playwright SDK, you will need to add our fixtures to your existing Playwright tests (see Playwright's documentation on using a fixture). This can be done by either:

  1. Importing the extended test runner exported from @audioeye/testing-sdk-playwright directly into your tests.
  2. Adding our fixtures to the test runner in your Playwright test code and importing that exported test runner into your tests.
// tests/fixtures.ts
import { type AudioEyeFixtures, AudioEyeA11y } from '@audioeye/testing-sdk-playwright';
import { test as base } from '@playwright/test';

export const test = base.extend<AudioEyeFixtures>({
  accessibility: async ({ page }, use) => {
    await use(new AudioEyeA11y(page));
  },
  a11y: async ({ accessibility }, use) => {
    await use(accessibility);
  },
});


// tests/example.spec.ts
import { expect } from '@playwright/test';

import { test } from './fixtures';

test('Example Playwright test using AudioEye\'s Testing SDK', async ({
  page,
  accessibility,
}) => {
  await page.goto('http://localhost:3000/');

  const results = await accessibility.evaluate();

  expect(results.resultCodes).toEqual([
    ...
  ]);
});
Fixture names

We provide fixtures named accessibility and a11y which can be used interchangeably.

Usage​

Use the SDK to test for accessibility issues.

import { expect } from '@playwright/test';

import { test } from './fixtures';

test("Example Playwright test using AudioEye's Testing SDK", async ({ page, accessibility }) => {
  await page.goto('http://localhost:3000/');

  const results = await accessibility.evaluate(page.locator('.navbar__right'));
  expect(results.conformanceLevel('A').resultCodes).toEqual(['Link_VisualIndicator_Missing', 'Svg_Name_Missing']);

  expect(Object.keys(results.conformanceLevel('AA').resultsGroupedByWcagSuccessCriteriaLevel)).toEqual(['A']);
  expect(Object.keys(results.resultsGroupedByWcagSuccessCriteriaLevel)).toEqual(['A', 'AAA']);
});
Fixture names

We provide fixtures named accessibility and a11y which can be used interchangeably.

SDK API​

evaluate​

Evaluate the accessibility of the page or element using AudioEye's rule suite.

import { test } from '@audioeye/testing-sdk-playwright';
import { expect } from '@playwright/test';

test("Example Playwright test using AudioEye's Testing SDK", async ({ page, accessibility }) => {
  await page.goto('http://localhost:3000/');

  const accessibilityResults = await accessibility.evaluate();
});

Parameters​

› locator (Locator)

The locator to evaluate. Defaults to the root of the page.

Returns​

evaluate returns a Class of type A11yResults.

A11yResults API​

conformanceLevel​

Filter the accessibility results by the conformance level. The conformance level can be 'A', 'AA', or 'AAA'. Higher conformance levels include all lower conformance levels.

const results = accessibilityResults.conformanceLevel('AA');

Parameters​

› level (String)

The conformance level to filter the results by. Either A, AA, or AAA.

Returns​

A new instance of A11yResults.

resultCodes​

Get the result codes for the accessibility results as a string array.

const resultCodes = accessibilityResults.resultCodes;
// ['Img_Name_WeakName']

Returns​

An array of strings representing the result codes.

resultsGroupedByWcagSuccessCriteriaLevel​

Group the accessibility results grouped by the WCAG success criteria level.

accessibilityResults.resultsGroupedByWcagSuccessCriteriaLevel();
// {A: [ ... ], AA: [ ... ], AAA: [ ... ]}

Returns​

An object with the test results grouped by WCAG success criteria level.