Skip to main content
Version: v3

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 learn how to setup Playwright in your project.

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.