Gathering detailed insights and metrics for axe-playwright
Gathering detailed insights and metrics for axe-playwright
Gathering detailed insights and metrics for axe-playwright
Gathering detailed insights and metrics for axe-playwright
@axe-core/playwright
Provides a method to inject and analyze web pages using axe
expect-axe-playwright
Expect matchers to perform Axe accessibility tests in your Playwright tests.
kayle
Extremely fast and accurate accessibility engine built for any headless tool like playwright or puppeteer.
evaluatory
Web page evaluation with a focus on accessibility
♿: Custom commands for Playwright to run accessibility (a11y) checks with axe-core
npm install axe-playwright
Typescript
Module System
Node Version
NPM Version
TypeScript (94.65%)
HTML (3.98%)
JavaScript (1.37%)
Total
16,894,009
Last Day
14,610
Last Week
237,169
Last Month
1,035,690
Last Year
9,229,224
191 Stars
176 Commits
22 Forks
4 Watching
8 Branches
16 Contributors
Minified
Minified + Gzipped
Latest Version
2.0.3
Package Id
axe-playwright@2.0.3
Unpacked Size
37.64 kB
Size
9.47 kB
File Count
15
NPM Version
8.19.4
Node Version
16.20.2
Publised On
26 Sept 2024
Cumulative downloads
Total Downloads
Last day
28.8%
14,610
Compared to previous day
Last week
6.1%
237,169
Compared to previous week
Last month
-0.2%
1,035,690
Compared to previous month
Last year
76%
9,229,224
Compared to previous year
1
Axe-core® is a powerful accessibility testing engine provided by Deque Systems that powers this package. Axe-Playwright provides simple commands to integrate the axe-core® library with your Playwright tests. This integration functions seamlessly across all Playwright browsers: Chromium, Firefox, and WebKit.
Axe-core® is a trademark of Deque Systems, Inc. in the US and other countries. This project is not formally affiliated with Deque, but we are big fans! Axe-core® is used here with permission.
1npm i -D axe-playwright
1npm i -D playwright
NOTE: axe-core® is now bundled and doesn't need to be installed separately.
1//tsconfig.json 2{ 3 "compilerOptions": { 4 "types": ["axe-playwright"] 5 } 6}
This will inject the axe-core® runtime into the page under test. You must run this after a call to page.goto() and before you run the checkA11y command.
You run this command with injectAxe()
either in your test, or in a beforeEach
, as long as the visit
comes first.
1beforeAll(async () => { 2 browser = await chromium.launch() 3 page = await browser.newPage() 4 await page.goto(`http://localhost:3000/login`) 5 await injectAxe(page) 6})
To configure the format of the data used by aXe. This can be used to add new rules, which must be registered with the library to execute.
User specifies the format of the JSON structure passed to the callback of axe.run
Link - aXe Docs: axe.configure
1it('Has no detectable a11y violations on load (custom configuration)', async () => {
2 // Configure aXe and test the page at initial load
3 await configureAxe(page, {
4 branding: {
5 brand: String,
6 application: String,
7 },
8 reporter: 'option',
9 checks: [Object],
10 rules: [Object],
11 locale: Object,
12 })
13 await checkA11y()
14})
This will run axe against the document at the point in which it is called. This means you can call this after interacting with your page and uncover accessibility issues introduced as a result of rendering in response to user actions.
The page
instance of playwright
.
Defines the scope of the analysis - the part of the DOM that you would like to analyze. This will typically be the document or a specific selector such as class name, ID, selector, etc.
Set of options passed into rules or checks, temporarily modifying them. This contrasts with axe.configure, which is more permanent.
The keys consist of those accepted by axe.run
's options argument as well as custom includedImpacts
, detailedReport
, verbose
, and detailedReportOptions
keys.
The includedImpacts
key is an array of strings that map to impact
levels in violations. Specifying this array will only include violations where the impact matches one of the included values. Possible impact values are "minor", "moderate", "serious", or "critical".
Filtering based on impact in combination with the skipFailures
argument allows you to introduce axe-playwright
into tests for a legacy application without failing in CI before you have an opportunity to address accessibility issues. Ideally, you would steadily move towards stricter testing as you address issues.
e-effects, such as adding custom output to the terminal.
NOTE: This respects the includedImpacts
filter and will only execute with violations that are included.
The detailedReport
key is a boolean whether to print the more detailed report detailedReportOptions
is an object with the shape
{
html?: boolean // include the full html for the offending nodes
}
The verbose
key is a boolean to whether to print the message No accessibility violations detected!
when there aren't accessibility violations present in the test. For the DefaultTerminalReporter
this is true and for the v2 Reporter
this is false.
Disables assertions based on violations and only logs violations to the console output. If you set skipFailures
as true
, although accessibility check is not passed, your test will not fail. It will simply print the violations in the console, but will not make the test fail.
A class instance that implements the Reporter
interface or values default
, v2
and html
. Custom reporter instances can be supplied to override default reporting behaviour dictated by DefaultTerminalReporter
set by the value default
. v2
is the new TerminalReporter inspired by the reports from jest-axe. html
reporter will generate external HTML file.
Note! html
reporter will disable printed to logs violations.
Options dedicated for HTML reporter. axe-html-reporter
This will run axe against the document at the point in which it is called, then returns the full set of results as reported by axe.run
.
The page
instance of playwright
.
Defines the scope of the analysis - the part of the DOM that you would like to analyze. This will typically be the document or a specific selector such as class name, ID, selector, etc.
Set of options passed into rules or checks, temporarily modifying them. This contrasts with axe.configure, which is more permanent.
The object is of the same type which is accepted by axe.run
's options argument and directly forwarded to it.
This will run axe against the document at the point in which it is called, then return you an array of accessibility violations (i.e. the violations
array included in the getAxeResults
result).
Identical to parameters of getAxeResults.
Reports violations based on the Reporter
concrete implementation behaviour.
An array of Axe violations to be printed.
A class instance that implements the Reporter
interface. Custom reporter instances can be supplied to override default reporting behaviour dictated by DefaultTerminalReporter
.
1import { chromium, Browser, Page } from 'playwright' 2import { injectAxe, checkA11y, getViolations, reportViolations } from 'axe-playwright' 3 4let browser: Browser 5let page: Page 6 7describe('Playwright web page accessibility test', () => { 8 beforeAll(async () => { 9 browser = await chromium.launch() 10 page = await browser.newPage() 11 await page.goto(`file://${process.cwd()}/test/site.html`) 12 await injectAxe(page) 13 }) 14 15 it('simple accessibility run', async () => { 16 await checkA11y(page) 17 }) 18 19 it('check a11y for the whole page and axe run options', async () => { 20 await checkA11y(page, null, { 21 axeOptions: { 22 runOnly: { 23 type: 'tag', 24 values: ['wcag2a'], 25 }, 26 }, 27 }) 28 }) 29 30 it('check a11y for the specific element', async () => { 31 await checkA11y(page, 'input[name="password"]', { 32 axeOptions: { 33 runOnly: { 34 type: 'tag', 35 values: ['wcag2a'], 36 }, 37 }, 38 }) 39 }) 40 41 it('gets and reports a11y for the specific element', async () => { 42 const violations = await getViolations(page, 'input[name="password"]', { 43 runOnly: { 44 type: 'tag', 45 values: ['wcag2a'], 46 }, 47 }) 48 49 reportViolations(violations, new YourAwesomeCsvReporter('accessibility-report.csv')) 50 51 expect(violations.length).toBe(0) 52 }) 53 54 afterAll(async () => { 55 await browser.close() 56 }) 57})
This custom logging behavior results in terminal output like this:
The detailed report is disabled by default, but can be enabled by including the detailedReport
property in the checkAlly
options.
1import { chromium, Browser, Page } from 'playwright' 2import { injectAxe, checkA11y } from 'axe-playwright' 3 4let browser: Browser 5let page: Page 6 7describe('Playwright web page accessibility test', () => { 8 beforeAll(async () => { 9 browser = await chromium.launch() 10 page = await browser.newPage() 11 await page.goto(`file://${process.cwd()}/test/site.html`) 12 await injectAxe(page) 13 }) 14 15 // Prints outs a detailed report per node with an array of numbers of which violations from the summary affect that node 16 it('print out a detailed report on violations', async () => { 17 await checkA11y(page, null, { 18 detailedReport: true, 19 }) 20 }) 21 22 // Same as above, but includes the html of the offending node 23 it('print out a detailed report on violations', async () => { 24 await checkA11y(page, null, { 25 detailedReport: true, 26 detailedReportOptions: { html: true }, 27 }) 28 }) 29 30 afterAll(async () => { 31 await browser.close() 32 }) 33})
Thanks to axe-html-reporter you can generate HTML report(s).
From default HTML file(s) will be generated under /artifacts/accessibilityReport.html
.
Report's options can customized from checkAlly
level:
await checkA11y(
page,
'form',
{
axeOptions: {
runOnly: {
type: 'tag',
values: ['wcag2a'],
},
},
},
true,
'html',
{
outputDirPath: 'results',
outputDir: 'accessibility',
reportFileName: 'accessibility-audit.html'
}
)
await checkA11y(
page,
'form',
{
axeOptions: {
runOnly: {
type: 'tag',
values: ['wcag2a'],
},
},
},
true,
'junit',
{
outputDirPath: 'results',
outputDir: 'accessibility',
reportFileName: 'accessibility-audit.xml',
},
)
If it works for you , leave a Star! :star:
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
1 existing vulnerabilities detected
Details
Reason
Found 5/18 approved changesets -- score normalized to 2
Reason
3 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 2
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2024-12-02
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More