automated-a11y/python-a11y-playwright

Accessibility Automation Example for Web Apps with Python and Playwright

Accessibility Automation for Web Apps with Python and Playwright.

This project uses HTML CodeSniffer and Deque Axe

HTML CodeSniffer : checks HTML source code and detects any Accessibility violations. Comes with standards that cover the three (A, AA & AAA) conformance levels of the W3C's Web Content Accessibility Guidelines (WCAG) 2.1 and the U.S. Section 508 legislation.

Deque Axe : World’s leading digital accessibility toolkit. Powerful and accurate accessibility toolkit can get you to 80% issue coverage, or more, during development.

Features

1. Simple & Easy to use
2. No need of prior knowledge on Accessibility
3. Works with Python Playwright
4. Rich Reporting
5. Open source

Installation

pip install python-a11y-playwright

Getting Started

Using HTML CodeSniffer

Below is the example usage using HTML CodeSniffer.

from pathlib import Path

from automateda11y.pw.settings import Settings
from playwright.sync_api import sync_playwright
from automateda11y.pw.htmlcsrunner import HtmlCsRunner


def json_reports_dir():
    return Path(__file__).parent.parent.__str__()


with sync_playwright() as p:
    Settings.report_dir = json_reports_dir() + '/reports'
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("http://playwright.dev")
    data = HtmlCsRunner(page).execute()
    browser.close()

Using Deque Axe

Below is the example usage using Deque Axe.

from pathlib import Path

from automateda11y.pw.settings import Settings
from playwright.sync_api import sync_playwright
from automateda11y.pw.axerunner import AxeRunner


def json_reports_dir():
    return Path(__file__).parent.parent.__str__()


with sync_playwright() as p:
    Settings.report_dir = json_reports_dir() + '/reports'
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("http://playwright.dev")
    data = AxeRunner(page).execute()
    browser.close()

It is mandated to provide path to generate JSON reports as shown in both the above examples. Once the tests been executed, JSON reports will be generated in the provided directory

HTML Reports

To generate HTML reports from the JSON reports, it is required to download and configure the Java based command line utility

Pre-requisites

1. JDK 1.8 or above

Configuration

1. Download the latest version zip archive from releases
2. Unpack the archive to a11y-reports directory. a11y-reports directory contains a11y-report, a11y-report.bat and a11y.jar
3. Add a11y-reports directory to system PATH
4. Execute a11y-report --version in terminal/cmd to make sure that a11y-report is configured

Usage

a11y-report -j=<jsonDir> -e=<engine> -o=<outputDir>

• jsonDir - JSON reports path generated by the libraries in the Organisation automated-a11y
• engine - Accessibility engine axe or htmlcs
• outputDir(Optional) - Output directory to save the HTML report. Generates in CWD if not provided

HTML CodeSniffer Report Generation

a11y-report -j=<jsonDir> -e=htmlcs -o=<outputDir>

HTML Reports will be generated in <outputDir> folder. Below are the report screenshots

Consolidated Report

Page Report

Axe Report Generation

a11y-report -j=<jsonDir> -e=axe -o=<outputDir>

HTML Reports will be generated in <outputDir> folder.

Python snippet to generate HTML reports*

*This snippet works only if the above-mentioned command line utility is configured.

import subprocess


class A11yReport:
    def __init__(self, json_dir, engine, output_dir):
        self.json_dir = json_dir
        self.engine = engine
        self.output_dir = output_dir

    def generate_html_report(self):
        command = f"a11y-report -j={self.json_dir} -e={self.engine} -o={self.output_dir}"
        result = subprocess.run(command, stdout=subprocess.PIPE, stderr=subprocess.PIPE, shell=True, encoding="utf-8")
        return result.stdout, result.stderr

In the tear down method, after executing all tests, call the generate_html_report to generate HTML reports

a11y_report = A11yReport(json_dir, "axe/htmlcs", html_dir)
stdout, stderr = a11y_report.generate_html_report()

print("Stdout:")
print(stdout)
print("Stderr:")
print(stderr)

Here is the example project: https://github.com/automated-a11y/python-a11y-playwright-example for your reference

Below are the report screenshots

Consolidated Report

Page Report