accessibility-testing-package

Installation

Install this package using npm i accessibility-testing-package

Why I created this package?

The primary packages, namely axe-core and axe-html-reporter were already in place. However, there are two separate wrappers available for playwright and Selenium. In this package, I have tried to create a consolidated package for both of these popular testing tools along with creating necessary wrappers for convenience.

NOTE

It is a good idea to import tslib for the files where the methods of this package will be used.

The methods

The following are the methods exposed for this package

CoreAccessibilityMethods

To access the methods for CoreAccessibilityMethods, we need to first import it in our typescript file:
import {CoreAccessibilityMethods} from 'accessibility-testing-package'

• PageTestPlaywright : This method scans the entire content of the current page for any accessibility issues. It takes the page variable as a parameter.

Example: await CoreAccessibilityMethods.PageTestPlaywright(page)

• PageTestPlaywrightWithOptions : This method scans the entire content of the current page for any accessibility issues pertaining to particular tags/rules. It takes the page variable and an object specifying the tags/rules as parameters.

Example:

await CoreAccessibilityMethods.PageTestPlaywrightWithOptions(page,{ 
    type:'tags',
    values:['wcag131']
    })

• ElementTestPlaywright: This method scans only the specified element of the current page for any accessibility issues. This takes the page and the elementHandle of the element under test. It is independent of how the elementHandle is obtained (by locator/selector etc).

Example:

const selectorElementHandle=await page.locator('#searchDropdownBox').elementHandle()
        const results=await CoreAccessibilityMethods.ElementTestPlaywright(page,selectorElementHandle)

• ElementTestPlaywrightWithOptions: This method scans only the specified element of the current page for any accessibility issues pertaining to certain rules/tags. This takes the page, the elementHandle of the element under test and the object specifying the tags/rules as parameters. It is independent of how the elementHandle is obtained (by locator/selector etc).

Example:

const locatorElementHandle=await page.getByRole('searchbox', { name: 'Search Amazon' }).elementHandle()

        const results=await CoreAccessibilityMethods.ElementTestPlaywrightWithOptions(page,locatorElementHandle,{
            type:'tags',
            values:['best-practice']
        })

• PageTestSelenium: This method scans the entire current webpage for any accessibility issues. It takes the driver (WebDriver) as a parameter.
  Example: const results=await CoreAccessibilityMethods.PageTestSelenium(driver)

• PageTestSeleniumWithOptions: This method scans the entire current webpage for any accessibility issues subject to specified tags/rules. It takes the driver (WebDriver) and the object specifying the tags/rules as parameters.

Example:

const results=await CoreAccessibilityMethods.PageTestSeleniumWithOptions(driver,{
            type:'tags',
            values:['wcag131']
        })

• ElementTestSelenium: This method scans a specific element for accessibility issues. It takes the driver (WebDriver) and the element (WebElement) as parameters.

Example: const results=await CoreAccessibilityMethods.ElementTestSelenium(driver,await driver.findElement(By.css(elementId)))

• ElementTestSeleniumWithOptions: This method scans a specific element for accessibility issues subject to specified tags/rules. It takes the driver (WebDriver), the element (WebElement) and the object specifying the tags/rules as parameters.

const results=await CoreAccessibilityMethods.ElementTestSeleniumWithOptions(driver,await driver.findElement(By.xpath(elementXpath)),{
            type:'tags',
            values:['section508']
        })

ReportMethods

To access the methods for CoreAccessibilityMethods, we need to first import it in our typescript file:
import {ReportMethods} from 'accessibility-testing-package'

• CreateHtmlReport: This method creates a html axe report at a specified path with a specified name. This method takes the folder path where the report would be generated, the name of the html report file to be generated and the results (AxeResults) as parameters.
  Example: ReportMethods.CreateHtmlReport('./Reports','AxeHtmlReport.html',results)
• GetHtmlReportString: This method creates and returns the html string of the axe html report. It takes only the results (AxeResults) as a parameter.

Feedback requested!

Looking forward to community feedback for enhancements/ideas/issue fixes.

Contact me

Email: [email protected]
LinkedIn: Anuran Bhattacharya