axe-playwright
Advanced tools
Comparing version 1.1.3 to 1.1.4
@@ -1,4 +0,10 @@ | ||
import { ElementContext, ImpactValue, RunOptions } from 'axe-core' | ||
import { | ||
Check, | ||
ElementContext, | ||
ImpactValue, | ||
Locale, | ||
Rule, | ||
RunOptions, | ||
} from 'axe-core' | ||
import { Page } from 'playwright' | ||
import { ConfigOptions } from './src' | ||
@@ -9,2 +15,14 @@ export interface axeOptionsConfig { | ||
export interface ConfigOptions { | ||
branding?: { | ||
brand?: string | ||
application?: string | ||
} | ||
reporter?: 'v1' | 'v2' | 'no-passes' | ||
checks?: Check[] | ||
rules?: Rule[] | ||
locale?: Locale | ||
axeVersion?: string | ||
} | ||
export type Options = { | ||
@@ -23,3 +41,3 @@ includedImpacts?: ImpactValue[] | ||
*/ | ||
export function injectAxe(page: Page): void | ||
export function injectAxe(page: Page): Promise<void> | ||
@@ -38,3 +56,3 @@ /** | ||
skipFailures?: boolean, | ||
): void | ||
): Promise<void> | ||
@@ -46,2 +64,2 @@ /** | ||
*/ | ||
export function configureAxe(page: Page, options?: ConfigOptions): void | ||
export function configureAxe(page: Page, options?: ConfigOptions): Promise<void> |
{ | ||
"name": "axe-playwright", | ||
"version": "1.1.3", | ||
"version": "1.1.4", | ||
"description": "Custom Playwright commands to inject axe-core and test for a11y", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
@@ -5,5 +5,6 @@ ![logo](./docs/logo.png) | ||
[![Build Status](https://circleci.com/gh/abhinaba-ghosh/axe-playwright.svg?style=shield&branch-=master)](https://app.circleci.com/pipelines/github/abhinaba-ghosh/axe-playwright) | ||
[![NPM release](https://img.shields.io/npm/v/axe-playwright.svg 'NPM release')](https://www.npmjs.com/package/axe-playwright) | ||
[Axe](https://www.deque.com/axe/) is an accessibility testing engine for websites and other HTML-based user interfaces. This package provides simple axe analyser commands which you can incorporate in your [Playwright](https://www.npmjs.com/package/playwright) tests. | ||
[Axe](https://www.deque.com/axe/) is an accessibility testing engine for websites and other HTML-based user interfaces. This package provides simple axe analyser commands which you can incorporate in your [Playwright](https://www.npmjs.com/package/playwright) tests.The idea is highly inspired by [Andy Van Slaars](https://github.com/avanslaars) cypress-axe project. | ||
@@ -177,12 +178,48 @@ ## Install and configure | ||
## Token of Thanks | ||
#### Detailed Report | ||
The idea is highly inspired by [Andy Van Slaars](https://github.com/avanslaars) `cypress-axe` project. | ||
The detailed report is disabled by default, but can be enabled by including the `detailedReport` property in the `checkAlly` options. | ||
## Before you Go | ||
```js | ||
import { chromium, Browser, Page } from 'playwright' | ||
import { injectAxe, checkA11y } from 'axe-playwright' | ||
If it works for you , give a [Star](https://github.com/abhinaba-ghosh/axe-playwright)! :star: | ||
let browser: Browser | ||
let page: Page | ||
Consider [supporting](https://paypal.me/abhinabaghosh) if it helps you. | ||
describe('Playwright web page accessibility test', () => { | ||
beforeAll(async () => { | ||
browser = await chromium.launch() | ||
page = await browser.newPage() | ||
await page.goto(`file://${process.cwd()}/test/site.html`) | ||
await injectAxe(page) | ||
}) | ||
_- Copyright © 2020- [Abhinaba Ghosh](https://www.linkedin.com/in/abhinaba-ghosh-9a2ab8a0/)_ | ||
// Prints outs a detailed report per node with an array of numbers of which violations from the summary affect that node | ||
it('print out a detailed report on violations', async () => { | ||
await checkA11y(page, null, { | ||
detailedReport: true, | ||
}) | ||
}) | ||
// Same as above, but includes the html of the offending node | ||
it('print out a detailed report on violations', async () => { | ||
await checkA11y(page, null, { | ||
detailedReport: true, | ||
detailedReportOptions: { html: true }, | ||
}) | ||
}) | ||
afterAll(async () => { | ||
await browser.close() | ||
}) | ||
}) | ||
``` | ||
![Detailed Report](./docs/detailed-report-example.png) | ||
![Detailed Report with HTML](./docs/detailed-report-html-example.png) | ||
## Before you Go | ||
If it works for you , leave a [Star](https://github.com/abhinaba-ghosh/axe-playwright)! :star: |
@@ -6,11 +6,9 @@ import { Page } from 'playwright' | ||
AxeResults, | ||
Check, | ||
ElementContext, | ||
ImpactValue, | ||
Locale, | ||
Result, | ||
Rule, | ||
RunOptions, | ||
Spec, | ||
} from 'axe-core' | ||
import { ConfigOptions, Options } from '../index' | ||
@@ -23,25 +21,3 @@ declare global { | ||
interface axeOptionsConfig { | ||
axeOptions: RunOptions | ||
} | ||
type Options = { | ||
includedImpacts?: ImpactValue[] | ||
detailedReport?: boolean | ||
detailedReportOptions?: { html?: boolean } | ||
} & axeOptionsConfig | ||
export interface ConfigOptions { | ||
branding?: { | ||
brand?: string | ||
application?: string | ||
} | ||
reporter?: 'v1' | 'v2' | 'no-passes' | ||
checks?: Check[] | ||
rules?: Rule[] | ||
locale?: Locale | ||
axeVersion?: string | ||
} | ||
export const injectAxe = async (page: Page) => { | ||
export const injectAxe = async (page: Page): Promise<void> => { | ||
const axe: string = fs.readFileSync( | ||
@@ -57,3 +33,3 @@ 'node_modules/axe-core/axe.min.js', | ||
configurationOptions: ConfigOptions = {}, | ||
) => { | ||
): Promise<void> => { | ||
await page.evaluate( | ||
@@ -70,3 +46,3 @@ (configOptions: Spec) => window.axe.configure(configOptions), | ||
skipFailures: boolean = false, | ||
) => { | ||
): Promise<void> => { | ||
let axeResults: AxeResults = await page.evaluate( | ||
@@ -73,0 +49,0 @@ ([context, options]) => { |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
21394
224
360