axe-playwright - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

index.d.ts

@@ -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>

package.json

 {
   "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",

README.md

@@ -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:

src/index.ts

@@ -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]) => {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21394

increased by5.59%

Number of lines in readme file

224

increased by19.79%

Worsened metrics

Lines of code

360

decreased by-1.1%

No dependency changes