{"id":12863,"library":"axe-playwright","title":"Axe-Playwright Accessibility Testing","description":"axe-playwright is a JavaScript/TypeScript library designed to integrate Deque Systems' `axe-core` accessibility testing engine directly into Playwright test suites. As of version `2.2.2`, it offers a streamlined approach to perform automated accessibility checks across all Playwright-supported browsers, including Chromium, Firefox, and WebKit. The package maintains an active development pace with frequent updates, as seen with recent minor releases focused on fixes and improved typings. A key differentiator is its seamless injection of the `axe-core` runtime, eliminating the need for separate `axe-core` installation as it is bundled directly. It provides high-level commands like `injectAxe`, `configureAxe`, and `checkA11y` to simplify the process of setting up and running accessibility audits within Playwright tests, ensuring that accessibility issues can be detected efficiently both on initial page load and after user interactions.","status":"active","version":"2.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/abhinaba-ghosh/axe-playwright","tags":["javascript","a11y","accessibility","axe","axe-core","playwright","typescript"],"install":[{"cmd":"npm install axe-playwright","lang":"bash","label":"npm"},{"cmd":"yarn add axe-playwright","lang":"bash","label":"yarn"},{"cmd":"pnpm add axe-playwright","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for Playwright browser automation.","package":"playwright","optional":false}],"imports":[{"note":"Used to inject the axe-core runtime into the Playwright page.","wrong":"const injectAxe = require('axe-playwright').injectAxe;","symbol":"injectAxe","correct":"import { injectAxe } from 'axe-playwright';"},{"note":"Used to globally configure axe-core's behavior, rules, or localization.","wrong":"const configureAxe = require('axe-playwright').configureAxe;","symbol":"configureAxe","correct":"import { configureAxe } from 'axe-playwright';"},{"note":"The primary function to execute accessibility checks on the current page context.","wrong":"const checkA11y = require('axe-playwright').checkA11y;","symbol":"checkA11y","correct":"import { checkA11y } from 'axe-playwright';"}],"quickstart":{"code":"import { test, expect } from '@playwright/test';\nimport { injectAxe, checkA11y, configureAxe } from 'axe-playwright';\n\ntest.describe('Accessibility testing with axe-playwright', () => {\n test.beforeEach(async ({ page }) => {\n // For a real application, you'd navigate to your app's URL\n // For this example, we'll create a simple page content\n await page.setContent(`\n \n \n \n \n \n Accessibility Test Page\n \n \n
Welcome
\n \n \n Link without text\n \n \n `);\n // Inject axe-core runtime after page content is loaded\n await injectAxe(page);\n });\n\n test('should not have any detectable accessibility violations on load', async ({ page }) => {\n // Basic check with default axe-core configuration\n // This will typically report 'image-alt' and 'link-name' violations from the example content\n await checkA11y(page, null, { \n detailedReport: true, \n detailedReportOptions: { html: true }\n });\n });\n\n test('should allow custom axe-core configuration to filter results', async ({ page }) => {\n // Configure axe-core to ignore specific rules for this test\n await configureAxe(page, {\n rules: {\n 'image-alt': { enabled: false }, // Disable 'image-alt' rule\n }\n });\n // Now checkA11y should only report 'link-name' violation (if not further configured)\n await checkA11y(page, null, {\n includedImpacts: ['critical', 'serious', 'moderate'] // Only report high impact issues\n });\n });\n});\n\n// To run this example:\n// 1. Ensure you have Playwright and axe-playwright installed: `npm i -D playwright @playwright/test axe-playwright`\n// 2. Install Playwright browsers: `npx playwright install`\n// 3. Save the code as a TypeScript file (e.g., `a11y.spec.ts`)\n// 4. Run tests with Playwright: `npx playwright test a11y.spec.ts`","lang":"typescript","description":"This quickstart demonstrates how to set up `axe-playwright` in a Playwright test, inject `axe-core`, run basic accessibility checks, and apply custom configurations for `axe-core`."},"warnings":[{"fix":"Ensure `await injectAxe(page)` is placed immediately after `await page.goto('...')` or `await page.setContent('...')` in your test setup.","message":"The `injectAxe` command must be called after `page.goto()` or `page.setContent()` to ensure `axe-core` is properly loaded and available on the target page.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Remove `axe-core` from your `package.json` dependencies if it is installed separately.","message":"`axe-playwright` bundles `axe-core` internally. You do not need to install `axe-core` as a separate dependency, and doing so might lead to version conflicts or unnecessary package bloat.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add the necessary import statement: `import { injectAxe } from 'axe-playwright';` (and other functions as needed) to your test file.","cause":"The `injectAxe` function (or `configureAxe`/`checkA11y`) was called without being imported.","error":"ReferenceError: injectAxe is not defined"},{"fix":"Use `checkA11y(page, ...)` instead of attempting to call `page.checkA11y(...)`.","cause":"`axe-playwright` functions are standalone and operate on the Playwright `page` object as an argument, rather than extending the `page` object with custom commands.","error":"TypeError: page.checkA11y is not a function"},{"fix":"Ensure `\"types\": [\"axe-playwright\"]` is included in the `compilerOptions` of your `tsconfig.json`.","cause":"TypeScript configuration is missing type definitions for `axe-playwright`, preventing the compiler from recognizing the library's functions.","error":"Cannot find name 'checkA11y'. Did you mean 'consoleA11y'?"},{"fix":"Run `npm install playwright` or `yarn add playwright --dev` to install Playwright.","cause":"The required `playwright` peer dependency is not installed in the project.","error":"Playwright installation not found."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null}
![\"\"](\"nonexistent.png\")
\n Link without text\n \n \n `);\n // Inject axe-core runtime after page content is loaded\n await injectAxe(page);\n });\n\n test('should not have any detectable accessibility violations on load', async ({ page }) => {\n // Basic check with default axe-core configuration\n // This will typically report 'image-alt' and 'link-name' violations from the example content\n await checkA11y(page, null, { \n detailedReport: true, \n detailedReportOptions: { html: true }\n });\n });\n\n test('should allow custom axe-core configuration to filter results', async ({ page }) => {\n // Configure axe-core to ignore specific rules for this test\n await configureAxe(page, {\n rules: {\n 'image-alt': { enabled: false }, // Disable 'image-alt' rule\n }\n });\n // Now checkA11y should only report 'link-name' violation (if not further configured)\n await checkA11y(page, null, {\n includedImpacts: ['critical', 'serious', 'moderate'] // Only report high impact issues\n });\n });\n});\n\n// To run this example:\n// 1. Ensure you have Playwright and axe-playwright installed: `npm i -D playwright @playwright/test axe-playwright`\n// 2. Install Playwright browsers: `npx playwright install`\n// 3. Save the code as a TypeScript file (e.g., `a11y.spec.ts`)\n// 4. Run tests with Playwright: `npx playwright test a11y.spec.ts`","lang":"typescript","description":"This quickstart demonstrates how to set up `axe-playwright` in a Playwright test, inject `axe-core`, run basic accessibility checks, and apply custom configurations for `axe-core`."},"warnings":[{"fix":"Ensure `await injectAxe(page)` is placed immediately after `await page.goto('...')` or `await page.setContent('...')` in your test setup.","message":"The `injectAxe` command must be called after `page.goto()` or `page.setContent()` to ensure `axe-core` is properly loaded and available on the target page.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Remove `axe-core` from your `package.json` dependencies if it is installed separately.","message":"`axe-playwright` bundles `axe-core` internally. You do not need to install `axe-core` as a separate dependency, and doing so might lead to version conflicts or unnecessary package bloat.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add the necessary import statement: `import { injectAxe } from 'axe-playwright';` (and other functions as needed) to your test file.","cause":"The `injectAxe` function (or `configureAxe`/`checkA11y`) was called without being imported.","error":"ReferenceError: injectAxe is not defined"},{"fix":"Use `checkA11y(page, ...)` instead of attempting to call `page.checkA11y(...)`.","cause":"`axe-playwright` functions are standalone and operate on the Playwright `page` object as an argument, rather than extending the `page` object with custom commands.","error":"TypeError: page.checkA11y is not a function"},{"fix":"Ensure `\"types\": [\"axe-playwright\"]` is included in the `compilerOptions` of your `tsconfig.json`.","cause":"TypeScript configuration is missing type definitions for `axe-playwright`, preventing the compiler from recognizing the library's functions.","error":"Cannot find name 'checkA11y'. Did you mean 'consoleA11y'?"},{"fix":"Run `npm install playwright` or `yarn add playwright --dev` to install Playwright.","cause":"The required `playwright` peer dependency is not installed in the project.","error":"Playwright installation not found."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null}