Skip to content

Automate Web Accessibility Testing using AXE/HTMLCS with Playwright Java

License

Notifications You must be signed in to change notification settings

automated-a11y/java-a11y-playwright

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Accessibility Automation for Web Apps with Java 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.

jdk badge Codacy Badge Codacy Badge License badge Contributer badge

Features

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

Usage

For maven based project add the below dependency

<dependency>
    <groupId>io.github.automated-a11y</groupId>
    <artifactId>java-a11y-playwright</artifactId>
    <version>1.0.1</version>
</dependency>

For gradle based project add the below dependency

implementation group: 'io.github.automated-a11y', name: 'java-a11y-playwright', version: '1.0.1'

For non gradle/maven project download the jar from below-mentioned link and add it to CLASSPATH for your project

https://github.com/automated-a11y/java-a11y-playwright/releases

Getting Started

Using HTML CodeSniffer

Create object of HtmlCsRunner as below. page is instance of your single tab or a popup window within a browser context.

HtmlCsRunner htmlCsRunner=new HtmlCsRunner(page);

Once after you navigated to any page/popup with Playwright execute Accessibility on that particular page/popup

htmlCsRunner.execute();

The above execute will also generate JSON Report on accessibility issues at page/popup level

Once after all the tests executed, you can call the below method to generate consolidated HTML Report on accessibility issues

htmlCsRunner.generateHtmlReport();

Below is junit example with reporting.

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import io.github.sridharbandi.pw.HtmlCsRunner;
import org.junit.jupiter.api.*;

import java.io.IOException;

public class HtmlcsTest {
    private static HtmlCsRunner htmlCsRunner;
    static Playwright playwright;
    static Browser browser;

    BrowserContext context;
    Page page;

    @BeforeAll
    static void launchBrowser() {
        playwright = Playwright.create();
        browser = playwright.chromium().launch();
    }

    @AfterAll
    static void closeBrowser() throws IOException {
        playwright.close();
        htmlCsRunner.generateHtmlReport();
    }

    @BeforeEach
    void createContextAndPage() {
        context = browser.newContext();
        page = context.newPage();
        htmlCsRunner = new HtmlCsRunner(page);
    }

    @AfterEach
    void closeContext() throws IOException {
        htmlCsRunner.execute();
        context.close();
    }

    @Test
    public void googleTest() {
        page.navigate("https://www.google.com/");
    }

    @Test
    public void stockTest() {
        page.navigate("https://www.istockphoto.com/");
    }
}

By default, it will check against WCAG2AA standards. However, you can configure it to standard you want to test with

htmlCsRunner.setStandard(HTMLCS.WCAG2A);

HTML Reports will be generated under ./target/java-a11y/htmlcs folder.

Below are the report screenshots

Consolidated Report

Index

Page Report

Page

Using Deque Axe

Create object of AxeRunner as below. page is instance of your single tab or a popup window within a browser context.

AxeRunner axeRunner=new AxeRunner(page);

Once after you navigated to any page/popup with Playwright execute Accessibility on that particular page/popup

axeRunner.execute();

The above execute will also generate JSON Report on accessibility issues at page/popup level

Once after all the tests executed, you can call the below method to generate consolidated HTML Report on accessibility issues

axeRunner.generateHtmlReport();

Below is junit example with reporting.

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import io.github.sridharbandi.pw.AxeRunner;
import org.junit.jupiter.api.*;

import java.io.IOException;

public class AxeTest {
    private static AxeRunner axeRunner;
    static Playwright playwright;
    static Browser browser;

    BrowserContext context;
    Page page;

    @BeforeAll
    static void launchBrowser() {
        playwright = Playwright.create();
        browser = playwright.chromium().launch();
    }

    @AfterAll
    static void closeBrowser() throws IOException {
        playwright.close();
        axeRunner.generateHtmlReport();
    }

    @BeforeEach
    void createContextAndPage() {
        context = browser.newContext();
        page = context.newPage();
        axeRunner = new AxeRunner(page);
    }

    @AfterEach
    void closeContext() throws IOException {
        axeRunner.execute();
        context.close();
    }

    @Test
    public void googleTest() {
        page.navigate("https://www.google.com/");
    }

    @Test
    public void stockTest() {
        page.navigate("https://www.istockphoto.com/");
    }
}

HTML Reports will be generated under ./target/java-a11y/axe folder.

Below are the report screenshots

Consolidated Report

Index

Page Report

Page