Skip to content

kobenguyent/codeceptjs-a11y-helper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Donate with PayPal "Buy Me A Coffee"

codeceptjs-a11y-helper

CodeceptJS Accessibility helper wraps on top of axe-playwright to perform a11y check against your web application.

Allure reports: https://kobenguyent.github.io/codeceptjs-a11y-helper/#

NPM package: https://www.npmjs.com/package/codeceptjs-a11y-helper

Installation

npm i codeceptjs-a11y-helper --save-dev

Configuration

This helper should be added in your codeceptjs config file: codecept.conf.*

Example:

{
...
   helpers: {
     A11yHelper: {
      require: 'codeceptjs-a11y-helper',
    }
   }
...
}

Usage

  • To use this helper, you must enable Playwright helper.
  • After install the helper, you can use it by calling I.runA11yCheck()
  • If there is auto complete for actor I, try running npx codeceptjs def

Options

By default, this setting is enabled, you can either input those settings in config file or runA11yCheck(), precedence is as followed: defaults settings, settings in config, settings from runA11yCheck()

  • context: null,
  • axeOptions: { runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa', 'wcag2aaa', 'wcag21a', 'wcag21aa', 'wcag22aa', 'best-practice', 'wcag***', 'ACT', 'experimental', 'cat.*',], }, }
  • detailedReport: true
  • detailedReportOptions: { html: true },
  • skipFailures: true,
  • reporter: 'html',
  • outputDir: 'output',
  • reportFileName: 'accessibility-audit.html'

More info could be found here

Note: If you pass skipFailures=false, test would fail if violations found and there is no HTML report generated.

  • Within config file:
{
...
   helpers: {
     A11yHelper: {
      require: 'codeceptjs-a11y-helper',
      outputDir: 'hello',
      reportFileName: 'a11y-audit.html'
    }
   }
...
}
  • From runA11yCheck():
Feature('A11Y Check');

Scenario('a11y check',  async ({ I }) => {
    I.amOnPage('https://js.devexpress.com/Demos/WidgetsGallery/Demo/Slider/Overview/jQuery/Light/')
    await I.runA11yCheck({ outputDir: 'hello'})
});

Output

A11Y Check --
    [1]  Starting recording promises
    Timeouts:
 › [Session] Starting singleton browser session
  a11y check
    I am on page "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Slider/Overview/jQuery/Light/"
    I run a11y check {"outputDir":"hello"}
HTML report was saved into the following directory /Users/kobenguyent/Desktop/codeceptjs-playwright-fun/hello/accessibility-audit.html
  ✔ OK in 6028ms


  OK  | 1 passed   // 7s

Screenshot 2023-06-16 at 17 33 22

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •