Accessibility Checks in E2E Tests

npm install --save-dev @axe-core/playwright

test('the default rule set also runs best-practice rules', async ({ page }) => {
  await page.goto('/books');
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations.map((v) => `${v.id}:${v.impact}`)).toEqual(['heading-order:moderate']);
  const wcagOnly = await new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();
  expect(wcagOnly.violations).toEqual([]);
});

import { test as base } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

type AxeFixture = {
  makeAxeBuilder: () => AxeBuilder;
};

// Every test gets a builder that already checks WCAG 2.0 to 2.2 A and AA rules.
export const test = base.extend<AxeFixture>({
  makeAxeBuilder: async ({ page }, use) => {
    await use(() =>
      new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa']),
    );
  },
});

export { expect } from '@playwright/test';

// A stable summary of the violations: rule id and the selectors that failed.
export function violationFingerprints(results: { violations: { id: string; nodes: { target: unknown }[] }[] }) {
  return JSON.stringify(
    results.violations.map((v) => ({ rule: v.id, targets: v.nodes.map((n) => n.target) })),
    null,
    2,
  );
}

test('include and exclude narrow the scan', async ({ page }) => {
  await page.goto('/books');
  const whole = await new AxeBuilder({ page }).analyze();
  const nav = await new AxeBuilder({ page }).include('[data-testid=main-nav]').analyze();
  const noNav = await new AxeBuilder({ page }).exclude('[data-testid=main-nav]').analyze();
  console.log(`passes: whole=${whole.passes.length} nav=${nav.passes.length} withoutNav=${noNav.passes.length}`);
  expect(nav.passes.length).toBeLessThan(whole.passes.length);
});

test('options() passes axe run options such as resultTypes', async ({ page }) => {
  await page.goto('/books');
  const results = await new AxeBuilder({ page }).options({ resultTypes: ['violations'] }).analyze();
  expect(results.violations.map((v) => v.id)).toEqual(['heading-order']);
  // Only one node is kept for every result type that was not requested.
  expect(results.passes.every((rule) => rule.nodes.length <= 1)).toBe(true);
});

test('withRules runs one rule, disableRules switches rules off', async ({ page }) => {
  await page.goto('/');
  const one = await new AxeBuilder({ page }).withRules(['color-contrast']).analyze();
  expect(one.passes.map((r) => r.id)).toEqual(['color-contrast']);
  const without = await new AxeBuilder({ page }).disableRules(['color-contrast']).analyze();
  expect(without.passes.map((r) => r.id)).not.toContain('color-contrast');
});

for (const colorScheme of ['light', 'dark'] as const) {
  for (const path of ['/', '/books', '/books/3', '/signin']) {
    test(`${path} has no WCAG A/AA violations (${colorScheme})`, async ({ page, makeAxeBuilder }) => {
      await page.emulateMedia({ colorScheme });
      await page.goto(path);
      const results = await makeAxeBuilder().analyze();
      expect(results.violations, violationFingerprints(results)).toEqual([]);
    });
  }
}

test('the theme toggle switches the page to the dark theme and it still passes', async ({ page, makeAxeBuilder }) => {
  await page.emulateMedia({ colorScheme: 'light' });
  await page.goto('/books/3');
  await page.getByTestId('theme-toggle').click();
  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
  const results = await makeAxeBuilder().analyze();
  expect(results.violations).toEqual([]);
});

async function submitShortReview(page: Page) {
  await signIn(page, 'reader', readerPassword);
  await expect(page.getByTestId('account-heading')).toBeVisible();
  await page.goto('/books/3');
  await page.getByLabel('Your review').fill('Short');
  await page.getByTestId('review-submit').click();
  await expect(page.getByRole('alert')).toBeVisible(); // wait for the state before scanning
}

test('the review form in its error state (light)', async ({ page, makeAxeBuilder }) => {
  await page.emulateMedia({ colorScheme: 'light' });
  await submitShortReview(page);
  const results = await makeAxeBuilder().include('main').analyze();
  expect(results.violations, violationFingerprints(results)).toEqual([]);
});

test('the error message fails colour contrast when dark comes from the OS preference', async ({ page, makeAxeBuilder }) => {
  await page.emulateMedia({ colorScheme: 'dark' });
  await submitShortReview(page);
  const results = await makeAxeBuilder().include('main').analyze();
  console.log(violationFingerprints(results));
  expect(results.violations.map((v) => v.id)).toEqual(['color-contrast']);
  expect(results.violations[0].nodes[0].target).toEqual(['#review-error']);
});

test('the same state passes once the dark theme is chosen with the toggle', async ({ page, makeAxeBuilder }) => {
  await page.emulateMedia({ colorScheme: 'light' });
  await submitShortReview(page);
  await page.getByTestId('theme-toggle').click();
  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
  const results = await makeAxeBuilder().include('main').analyze();
  expect(results.violations).toEqual([]);
});

test('a known issue can be excluded while it is being fixed', async ({ page, makeAxeBuilder }) => {
  await page.emulateMedia({ colorScheme: 'dark' });
  await submitShortReview(page);
  const results = await makeAxeBuilder().include('main').exclude('#review-error').analyze();
  expect(results.violations).toEqual([]);
});

[
  {
    "rule": "color-contrast",
    "targets": [
      [
        "#review-error"
      ]
    ]
  }
]

test('attach the full scan results', async ({ page, makeAxeBuilder }, testInfo) => {
  await page.goto('/books');
  const results = await makeAxeBuilder().analyze();
  await testInfo.attach('accessibility-scan-results', {
    body: JSON.stringify(results, null, 2),
    contentType: 'application/json',
  });
  console.log(`violations=${results.violations.length} passes=${results.passes.length} incomplete=${results.incomplete.length} inapplicable=${results.inapplicable.length}`);
  expect(results.violations).toEqual([]);
});

test('rules that need a human end up in incomplete', async ({ page }) => {
  await signIn(page, 'admin', adminPassword);
  await page.goto('/admin');
  const results = await new AxeBuilder({ page }).analyze();
  console.log(results.incomplete.map((r) => `${r.id}: ${r.nodes.map((n) => n.target).join(' ')}`).join('\n'));
  expect(results.violations).toEqual([]);
  expect(results.incomplete.map((r) => r.id)).toContain('color-contrast');
});

aria-prohibited-attr: span[aria-label="5 out of 5"] span[aria-label="4 out of 5"] span[aria-label="3 out of 5"]
color-contrast: span[aria-label="5 out of 5"] span[aria-label="4 out of 5"] span[aria-label="3 out of 5"]

import { test, expect, violationFingerprints } from './axe-test';
import AxeBuilder from '@axe-core/playwright';

const BROKEN = process.env.BROKEN_URL ?? 'http://localhost:39640/';

test('axe reports the violations of the broken fixture', async ({ page }) => {
  await page.goto(BROKEN);
  const results = await new AxeBuilder({ page }).analyze();
  const summary = results.violations.map((v) => `${v.id} (${v.impact}) x${v.nodes.length}`);
  console.log(summary.join('\n'));
  expect(results.violations.map((v) => v.id)).toEqual(
    expect.arrayContaining(['html-has-lang', 'image-alt', 'label', 'button-name', 'link-name']),
  );
});

button-name (critical) x1
html-has-lang (serious) x1
image-alt (critical) x1
label (critical) x1
link-name (serious) x1

test('the dark theme of the fixture fails colour contrast, the light theme does not', async ({ page }) => {
  await page.goto(BROKEN);
  const light = await new AxeBuilder({ page }).withRules(['color-contrast']).analyze();
  expect(light.violations).toEqual([]);
  await page.getByRole('button', { name: 'Toggle theme' }).click();
  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
  const dark = await new AxeBuilder({ page }).withRules(['color-contrast']).analyze();
  console.log(violationFingerprints(dark));
  expect(dark.violations.map((v) => v.id)).toEqual(['color-contrast']);
  console.log(JSON.stringify(dark.violations[0].nodes[0].any[0].data, null, 1));
});

test('aria snapshot of the main navigation', async ({ page }) => {
  await page.goto('/books');
  await expect(page.getByRole('navigation', { name: 'Main' })).toMatchAriaSnapshot(`
    - navigation "Main":
      - link "Catalogue"
      - link /Sign in/
      - button "Toggle theme"
  `);
});

test('aria snapshot of the pagination', async ({ page }) => {
  await page.goto('/books');
  await expect(page.getByRole('navigation', { name: 'Pagination' })).toMatchAriaSnapshot(`
    - navigation "Pagination":
      - text: Previous Page 1 of 4
      - link "Next"
  `);
});

- link "Skip to content":
  - /url: "#main"
- banner:
  - link "Bookshelf":
    - /url: /
  - navigation "Main":
    - link "Catalogue":
      - /url: /books
    - link "Sign in":
      - /url: /signin
    - button "Toggle theme": Theme
- main:
  - heading "Catalogue" [level=1]
  - search:
    - text: Search books
    - searchbox "Search books"
    - button "Search"
  - paragraph: 24 books found

import { test, expect } from '@playwright/test';

const BROKEN = process.env.BROKEN_URL ?? 'http://localhost:39640/';

test('a snapshot with accessible names fails on the broken page', async ({ page }) => {
  test.fail(); // the page is broken on purpose, so this assertion is expected to fail
  await page.goto(BROKEN);
  await expect(page.locator('form')).toMatchAriaSnapshot(`
    - form:
      - textbox "Card number"
      - textbox "Email"
      - textbox "Confirm email"
      - button "Remove item"
      - button "Pay"
      - link "Help"
  `, { timeout: 1000 });
});

Error: expect(locator).toMatchAriaSnapshot(expected) failed

Locator: locator('form')
Timeout: 1000ms
- Expected  - 7
+ Received  + 9

- - form:
-   - textbox "Card number"
-   - textbox "Email"
+ - textbox
+ - textbox "Email"
-   - textbox "Confirm email"
-   - button "Remove item"
-   - button "Pay"
+ - textbox "Confirm email"
+ - button:
+   - img
+ - button "Pay"
-   - link "Help"
+ - link:
+   - /url: /help
+   - img

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  workers: 1, // the tests share the server's sessions, and some reset it
  use: {
    baseURL: process.env.BASE_URL ?? 'http://localhost:3000',
    testIdAttribute: 'data-testid',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    ...(process.env.WITH_FIREFOX ? [{ name: 'firefox', use: { ...devices['Desktop Firefox'] } }] : []),
  ],
});

npm install --save-dev cypress@16.2.0 cypress-axe@1.7.0 axe-core@4.14.0

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: peer@1.0.0
npm error Found: cypress@16.2.0
npm error   dev cypress@"16.2.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer cypress@"^10 || ^11 || ^12 || ^13 || ^14 || ^15" from cypress-axe@1.7.0

# 1. Accept the incorrect peer range for this install (and remember it in .npmrc)
npm install --save-dev cypress@16.2.0 cypress-axe@1.7.0 axe-core@4.14.0 --legacy-peer-deps
echo "legacy-peer-deps=true" >> .npmrc

{
  "devDependencies": { "axe-core": "4.14.0", "cypress": "16.2.0", "cypress-axe": "1.7.0" },
  "overrides": { "cypress-axe": { "cypress": "$cypress" } }
}

import type { Result } from 'axe-core';

const wcag = { runOnly: { type: 'tag' as const, values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa'] } };

// Prints one line per violation in the terminal of `cypress run`.
function logViolations(violations: Result[]) {
  cy.task('log', `${violations.length} accessibility violation(s)`);
  violations.forEach(({ id, impact, nodes }) => {
    cy.task('log', `${id} (${impact}): ${nodes.map((n) => n.target.join(' ')).join(', ')}`);
  });
}

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: process.env.BASE_URL ?? 'http://localhost:3000',
    video: false,
    setupNodeEvents(on) {
      on('task', {
        // Prints a line in the terminal that runs Cypress.
        log(message: string) {
          console.log(message);
          return null;
        },
      });
    },
  },
  env: { READER_PASSWORD: process.env.BOOKSHELF_READER_PASSWORD ?? 'reader-local-only' },
});

describe('Bookshelf accessibility', () => {
  beforeEach(() => {
    cy.request('POST', '/api/test/reset');
  });

  for (const theme of ['light', 'dark']) {
    for (const path of ['/', '/books', '/books/3', '/signin']) {
      it(`${path} has no WCAG A/AA violations (${theme})`, () => {
        cy.visit(path, {
          onBeforeLoad(win) {
            win.localStorage.setItem('theme', theme);
          },
        });
        cy.get('html').should('have.attr', 'data-theme', theme);
        cy.injectAxe();
        cy.checkA11y(null, wcag, logViolations);
      });
    }
  }

  it('scans only the main region, and only serious or critical impacts', () => {
    cy.visit('/books');
    cy.injectAxe();
    cy.checkA11y('main', { includedImpacts: ['serious', 'critical'] });
  });

  it('excludes an element and disables one rule', () => {
    cy.visit('/books');
    cy.injectAxe();
    cy.checkA11y(
      { exclude: ['[data-testid=main-nav]'] },
      { rules: { 'heading-order': { enabled: false } } },
    );
  });

  it('configureAxe applies to every later check', () => {
    cy.visit('/books');
    cy.injectAxe();
    cy.configureAxe({ rules: [{ id: 'heading-order', enabled: false }] });
    cy.checkA11y();
  });

  it('the default rule set reports the best-practice heading-order rule', () => {
    cy.visit('/books');
    cy.injectAxe();
    cy.checkA11y(null, null, (violations) => {
      expect(violations.map((v) => v.id)).to.deep.equal(['heading-order']);
    }, true); // skipFailures: log the violations but do not fail
  });

// Emulates prefers-color-scheme through the Chrome DevTools Protocol (Chromium-based browsers only).
function emulateColorScheme(value: 'light' | 'dark') {
  return Cypress.automation('remote:debugger:protocol', {
    command: 'Emulation.setEmulatedMedia',
    params: { features: [{ name: 'prefers-color-scheme', value }] },
  });
}

  function submitShortReview() {
    cy.signIn('reader');
    cy.visit('/books/3');
    cy.get('[data-testid=review-submit]').click();
    cy.get('[role=alert]').should('be.visible'); // wait for the state before scanning
    cy.injectAxe();
  }

  it('checks the review form after an interaction (light)', () => {
    emulateColorScheme('light');
    submitShortReview();
    cy.checkA11y('main', wcag, logViolations);
  });

  it('the error message fails colour contrast when dark comes from the OS preference', () => {
    emulateColorScheme('dark');
    submitShortReview();
    cy.checkA11y('main', wcag, (violations) => {
      logViolations(violations);
      expect(violations.map((v) => v.id)).to.deep.equal(['color-contrast']);
    }, true);
  });

  it('a known issue can be excluded while it is being fixed', () => {
    emulateColorScheme('dark');
    submitShortReview();
    cy.checkA11y({ include: ['main'], exclude: ['#review-error'] }, wcag);
  });

  it('the first Tab stop is the skip link', () => {
    cy.visit('/');
    cy.press(Cypress.Keyboard.Keys.TAB);
    cy.focused().should('have.text', 'Skip to content');
    cy.getByRole('link', { name: 'Skip to content' }).should('have.attr', 'href', '#main');
  });

describe('a deliberately broken page', () => {
  const broken = 'http://localhost:39640/';

  it('fails the check and lists the violations', () => {
    cy.visit(broken);
    cy.injectAxe();
    cy.checkA11y(null, null, (violations) => {
      logViolations(violations);
      expect(violations.map((v) => v.id)).to.include.members(['html-has-lang', 'image-alt', 'label', 'button-name', 'link-name']);
    }, true);
  });

  it('checkA11y throws when the violations are not skipped', () => {
    cy.on('fail', (error) => {
      expect(error.message).to.contain('accessibility violations were detected');
      return false;
    });
    cy.visit(broken);
    cy.injectAxe();
    cy.checkA11y();
  });

  it('fails only in the dark theme for colour contrast', () => {
    cy.visit(broken);
    cy.injectAxe();
    cy.checkA11y(null, { runOnly: ['color-contrast'] });
    cy.contains('button', 'Toggle theme').click();
    cy.get('html').should('have.attr', 'data-theme', 'dark');
    cy.checkA11y(null, { runOnly: ['color-contrast'] }, logViolations, true);
  });
});

5 accessibility violation(s)
button-name (critical): .icon-button
html-has-lang (serious): html
image-alt (critical): img
label (critical): input[type="text"]
link-name (serious): a

<dependency>
  <groupId>com.deque.html.axe-core</groupId>
  <artifactId>selenium</artifactId>
  <version>4.14.0</version>
  <scope>test</scope>
</dependency>

package demo;

import static org.junit.jupiter.api.Assertions.assertEquals;
import static org.junit.jupiter.api.Assertions.assertTrue;

import com.deque.html.axecore.results.Results;
import com.deque.html.axecore.results.Rule;
import com.deque.html.axecore.selenium.AxeBuilder;
import com.deque.html.axecore.selenium.AxeReporter;
import java.nio.file.Files;
import java.nio.file.Path;
import java.util.List;
import java.util.stream.Collectors;
import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import org.junit.jupiter.params.ParameterizedTest;
import org.junit.jupiter.params.provider.ValueSource;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

class AccessibilityTest {
  static final String BASE_URL = System.getenv().getOrDefault("BASE_URL", "http://localhost:3000");
  static final String BROKEN_URL = System.getenv().getOrDefault("BROKEN_URL", "http://localhost:39640/");
  static final List<String> WCAG =
      List.of("wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa");

  WebDriver driver;

  @BeforeEach
  void start() {
    ChromeOptions options = new ChromeOptions();
    options.addArguments("--headless=new");
    driver = new ChromeDriver(options);
  }

  @AfterEach
  void stop() {
    driver.quit();
  }

  static String summary(Results results) {
    return results.getViolations().stream()
        .map(r -> r.getId() + " (" + r.getImpact() + ") x" + r.getNodes().size())
        .collect(Collectors.joining(", "));
  }

  @ParameterizedTest
  @ValueSource(strings = {"/", "/books", "/books/3", "/signin"})
  void pageHasNoWcagViolations(String path) {
    driver.get(BASE_URL + path);
    Results results = new AxeBuilder().withTags(WCAG).analyze(driver);
    assertTrue(results.getViolations().isEmpty(), () -> summary(results));
  }

  @ParameterizedTest
  @ValueSource(strings = {"light", "dark"})
  void bothThemesHaveNoViolations(String theme) {
    driver.get(BASE_URL + "/books/3");
    // The theme is stored in localStorage, so set it and load the page again.
    ((JavascriptExecutor) driver).executeScript("localStorage.setItem('theme', arguments[0])", theme);
    driver.navigate().refresh();
    assertEquals(theme, driver.findElement(By.tagName("html")).getDomAttribute("data-theme"));
    Results results = new AxeBuilder().withTags(WCAG).analyze(driver);
    assertTrue(results.getViolations().isEmpty(), () -> summary(results));
  }

  @Test
  void includeExcludeAndDisableRules() {
    driver.get(BASE_URL + "/books");
    // The default rule set contains best-practice rules, so heading-order is reported.
    Results whole = new AxeBuilder().analyze(driver);
    assertEquals("heading-order (moderate) x1", summary(whole));

    Results mainOnly = new AxeBuilder().include("main").exclude("[data-testid=pagination]").analyze(driver);
    System.out.println("passes: whole=" + whole.getPasses().size() + " main=" + mainOnly.getPasses().size());

    Results withoutRule = new AxeBuilder().disableRules(List.of("heading-order")).analyze(driver);
    assertTrue(withoutRule.getViolations().isEmpty());

    Results onlyOne = new AxeBuilder().withOnlyRules(List.of("color-contrast")).analyze(driver);
    assertEquals(List.of("color-contrast"), onlyOne.getPasses().stream().map(Rule::getId).toList());
  }

  @Test
  void writeTheFullResultsToAFile() throws Exception {
    driver.get(BASE_URL + "/books");
    Results results = new AxeBuilder().withTags(WCAG).analyze(driver);
    AxeReporter.writeResultsToJsonFile("target/axe-results", results);
    assertTrue(Files.size(Path.of("target", "axe-results.json")) > 0);
  }

  @Test
  void brokenFixtureIsReported() {
    driver.get(BROKEN_URL);
    Results results = new AxeBuilder().analyze(driver);
    System.out.println(summary(results));
    List<String> ids = results.getViolations().stream().map(Rule::getId).toList();
    assertTrue(
        ids.containsAll(List.of("html-has-lang", "image-alt", "label", "button-name", "link-name")),
        ids::toString);
  }

  @Test
  void brokenFixtureFailsContrastOnlyInTheDarkTheme() {
    driver.get(BROKEN_URL);
    AxeBuilder contrast = new AxeBuilder().withOnlyRules(List.of("color-contrast"));
    assertTrue(contrast.analyze(driver).getViolations().isEmpty());
    ((JavascriptExecutor) driver).executeScript("document.documentElement.dataset.theme = 'dark'");
    Results dark = contrast.analyze(driver);
    assertEquals("color-contrast (serious) x1", summary(dark));
  }

  @Test
  void accessibleNameAndRoleComeFromTheBrowser() {
    driver.get(BASE_URL + "/books");
    WebElement toggle = driver.findElement(By.cssSelector("[data-testid=theme-toggle]"));
    assertEquals("Toggle theme", toggle.getAccessibleName());
    assertEquals("button", toggle.getAriaRole());

    driver.get(BROKEN_URL);
    WebElement remove = driver.findElement(By.cssSelector("[data-testid=remove]"));
    assertEquals("", remove.getAccessibleName());
    assertEquals("button", remove.getAriaRole());
  }
}

pip install selenium axe-selenium-python pytest

import os

import pytest
from selenium import webdriver

BASE_URL = os.environ.get("BASE_URL", "http://localhost:3000")
BROKEN_URL = os.environ.get("BROKEN_URL", "http://localhost:39640/")


@pytest.fixture
def driver():
    options = webdriver.ChromeOptions()
    options.add_argument("--headless=new")
    d = webdriver.Chrome(options=options)
    yield d
    d.quit()

import json

import pytest
from axe_selenium_python import Axe
from selenium.webdriver.common.by import By

from conftest import BASE_URL, BROKEN_URL

# Axe.run() pastes the options into JavaScript source with "%s", so pass them as a JSON string.
WCAG = json.dumps({"runOnly": {"type": "tag", "values": ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"]}})


def scan(driver, context=None, options=None):
    """Inject axe-core into the current page and run it."""
    axe = Axe(driver)
    axe.inject()
    return axe, axe.run(context=context, options=options)


@pytest.mark.parametrize("path", ["/", "/books", "/books/3", "/signin"])
@pytest.mark.parametrize("theme", ["light", "dark"])
def test_page_has_no_wcag_violations(driver, path, theme):
    driver.get(BASE_URL + path)
    # The theme is stored in localStorage, so set it and load the page again.
    driver.execute_script("localStorage.setItem('theme', arguments[0])", theme)
    driver.refresh()
    assert driver.find_element(By.TAG_NAME, "html").get_dom_attribute("data-theme") == theme
    axe, results = scan(driver, options=WCAG)
    assert results["violations"] == [], axe.report(results["violations"])


def test_context_include_exclude_and_rules(driver):
    driver.get(BASE_URL + "/books")
    _, whole = scan(driver)
    # The default rule set contains best-practice rules, so heading-order is reported.
    assert [v["id"] for v in whole["violations"]] == ["heading-order"]

    context = {"include": [["main"]], "exclude": [["[data-testid=pagination]"]]}  # a dict is fine here
    _, part = scan(driver, context=context)
    print("passes: whole=%d main=%d" % (len(whole["passes"]), len(part["passes"])))

    _, without = scan(driver, options=json.dumps({"rules": {"heading-order": {"enabled": False}}}))
    assert without["violations"] == []

    _, only = scan(driver, options=json.dumps({"runOnly": ["color-contrast"]}))
    assert [r["id"] for r in only["passes"]] == ["color-contrast"]


def test_write_the_full_results_to_a_file(driver, tmp_path):
    driver.get(BASE_URL + "/books")
    axe, results = scan(driver, options=WCAG)
    target = tmp_path / "axe-results.json"
    axe.write_results(results, str(target))
    assert json.loads(target.read_text())["testEngine"]["name"] == "axe-core"


def test_python_booleans_are_not_valid_javascript(driver):
    # Axe.run() pastes a dict with "%s", so a Python False reaches the browser as the identifier False.
    driver.get(BASE_URL + "/books")
    axe = Axe(driver)
    axe.inject()
    with pytest.raises(Exception) as error:
        axe.run(options={"rules": {"heading-order": {"enabled": False}}})
    print(type(error.value).__name__, str(error.value).splitlines()[0])

def test_broken_fixture_is_reported(driver):
    driver.get(BROKEN_URL)
    axe, results = scan(driver)
    ids = {v["id"] for v in results["violations"]}
    print(axe.report(results["violations"]))
    assert {"html-has-lang", "image-alt", "label", "button-name", "link-name"} <= ids


def test_broken_fixture_fails_contrast_only_in_the_dark_theme(driver):
    driver.get(BROKEN_URL)
    options = json.dumps({"runOnly": ["color-contrast"]})
    _, light = scan(driver, options=options)
    assert light["violations"] == []
    driver.execute_script("document.documentElement.dataset.theme = 'dark'")
    _, dark = scan(driver, options=options)
    assert [v["id"] for v in dark["violations"]] == ["color-contrast"]


def test_accessible_name_and_role_come_from_the_browser(driver):
    driver.get(BASE_URL + "/books")
    toggle = driver.find_element(By.CSS_SELECTOR, "[data-testid=theme-toggle]")
    assert toggle.accessible_name == "Toggle theme"
    assert toggle.aria_role == "button"

    driver.get(BROKEN_URL)
    remove = driver.find_element(By.CSS_SELECTOR, "[data-testid=remove]")
    assert remove.accessible_name == ""
    assert remove.aria_role == "button"

Rule Violated:
html-has-lang - Ensure every HTML document has a lang attribute
	URL: https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI
	Impact Level: serious
	Tags: cat.language wcag2a wcag311 TTv5 TT11.a EN-301-549 EN-9.3.1.1 ACT
	Elements Affected:
	1) Target: html
		The <html> element does not have a lang attribute

import assert from 'node:assert/strict';
import { test } from 'node:test';
import { Builder } from 'selenium-webdriver';
import chrome from 'selenium-webdriver/chrome.js';
import AxeBuilder from '@axe-core/webdriverjs';

const BASE_URL = process.env.BASE_URL ?? 'http://localhost:3000';
const BROKEN_URL = process.env.BROKEN_URL ?? 'http://localhost:39640/';

async function withDriver(run) {
  const driver = await new Builder()
    .forBrowser('chrome')
    .setChromeOptions(new chrome.Options().addArguments('--headless=new'))
    .build();
  try {
    await run(driver);
  } finally {
    await driver.quit();
  }
}

test('Bookshelf catalogue has no WCAG violations', () =>
  withDriver(async (driver) => {
    await driver.get(`${BASE_URL}/books`);
    const results = await new AxeBuilder(driver)
      .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa'])
      .analyze();
    assert.deepEqual(results.violations, []);
  }));

test('the broken fixture is reported', () =>
  withDriver(async (driver) => {
    await driver.get(BROKEN_URL);
    const results = await new AxeBuilder(driver).analyze();
    const ids = results.violations.map((v) => v.id).sort();
    console.log(ids.join(', '));
    assert.deepEqual(ids, ['button-name', 'html-has-lang', 'image-alt', 'label', 'link-name']);
  }));