AI Tools for Writing Playwright Tests That Verify Accessibil

Automated accessibility testing has become essential for building inclusive web applications. Playwright’s testing framework combined with AI-assisted code generation makes it practical to implement WCAG compliance checks without writing every test from scratch. This guide explores how AI tools can help you create Playwright accessibility tests that verify WCAG standards automatically.

Understanding the Accessibility Testing Landscape

WCAG (Web Content Accessibility Guidelines) provides the foundation for making web content accessible to people with disabilities. The guidelines are organized around four principles: perceivable, operable, understandable, and. Each principle contains specific success criteria that web applications must meet to achieve compliance levels A, AA, or AAA.

Playwright provides excellent support for accessibility testing through its built-in accessibility testing utilities and the ability to integrate with axe-core and other accessibility testing libraries. However, writing test suites that cover the full range of WCAG criteria requires significant effort. AI coding assistants can accelerate this process by generating test patterns, suggesting appropriate assertions, and helping structure test suites.

Setting Up Playwright for Accessibility Testing

Before diving into AI-assisted test generation, ensure your Playwright project is configured for accessibility testing. You’ll need to install the accessibility testing dependencies:

npm install @axe-core/playwright playwright-axe

Configure your Playwright configuration to include accessibility testing settings:

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

export default defineConfig({
  testDir: './accessibility-tests',
  timeout: 30000,
  use: {
    axeOptions: {
      contextOptions: {
        rules: [
          { id: 'color-contrast', enabled: true },
          { id: 'html-has-lang', enabled: true },
          { id: 'landmark-one-main', enabled: true }
        ]
      }
    }
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } }
  ]
});

AI Tools for Generating Accessibility Tests

Claude and Cursor

Claude and Cursor excel at understanding accessibility requirements and generating appropriate test code. When prompted with specific WCAG success criteria, these tools can create focused test suites that verify compliance.

For example, to test keyboard navigation compliance (WCAG 2.1 Success Criterion 2.4.3 - Focus Order), you can ask an AI assistant to generate tests:

import { test, expect } from '@playwright/test';
import { injectAxe } from '@axe-core/playwright';

test.describe('Keyboard Navigation Accessibility', () => {

  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    await injectAxe(page);
  });

  test('all interactive elements are keyboard accessible', async ({ page }) => {
    // Get all buttons, links, and inputs
    const interactiveElements = await page.locator(
      'button, a, input, select, textarea, [role="button"]'
    ).all();

    for (const element of interactiveElements) {
      const isVisible = await element.isVisible();
      const isDisabled = await element.isDisabled();

      if (isVisible && !isDisabled) {
        // Verify element is focusable
        const isFocusable = await element.evaluate((el) => {
          const tabIndex = window.getComputedStyle(el).tabIndex;
          return tabIndex !== -1 || el.hasAttribute('href') ||
                 el.tagName === 'BUTTON' || el.tagName === 'INPUT';
        });

        expect(isFocusable).toBe(true);
      }
    }
  });

  test('focus order follows logical sequence', async ({ page }) => {
    const focusableElements = await page.locator(
      'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
    ).all();

    const focusOrder = [];
    for (const element of focusableElements) {
      const tagName = await element.evaluate(el => el.tagName.toLowerCase());
      const href = await element.getAttribute('href');
      const tabIndex = await element.getAttribute('tabindex');

      focusOrder.push({
        tag: tagName,
        href,
        tabIndex: tabIndex ? parseInt(tabIndex) : 0
      });
    }

    // Verify logical order (document order or positive tabindex order)
    let lastTabIndex = -1;
    for (const element of focusOrder) {
      const currentIndex = element.tabIndex >= 0 ? element.tabIndex : 999;
      expect(currentIndex).toBeGreaterThanOrEqual(lastTabIndex);
      lastTabIndex = currentIndex;
    }
  });
});

GitHub Copilot

Copilot can suggest accessibility test patterns based on context. When you provide comments describing the WCAG criteria you want to test, Copilot often generates appropriate test code. Its strength lies in understanding common accessibility testing patterns and suggesting boilerplate code quickly.

Automating WCAG Compliance Checks

The most efficient approach combines AI generation with established accessibility testing libraries. Here’s how to create an automated WCAG compliance test suite:

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

test.describe('WCAG Compliance - Automated Checks', () => {

  const wcagStandards = ['wcag2a', 'wcag2aa', 'wcag21aa'];

  for (const standard of wcagStandards) {
    test(`${standard} compliance checks`, async ({ page }) => {
      await page.goto('/');

      const accessibilityScanResults = await new AxeBuilder({ page })
        .withTags(standard === 'wcag21aa' ? ['wcag21aa'] : [standard])
        .analyze();

      const violations = accessibilityScanResults.violations;

      if (violations.length > 0) {
        console.log(`Found ${violations.length} accessibility violations:`);
        violations.forEach(violation => {
          console.log(`- ${violation.id}: ${violation.description}`);
          console.log(`  Impact: ${violation.impact}`);
          console.log(`  Elements affected: ${violation.nodes.length}`);
        });
      }

      expect(violations).toHaveLength(0);
    });
  }
});

Testing Specific WCAG Success Criteria

AI tools can help you create tests for specific WCAG criteria that require behavioral verification beyond automated scanning.

Testing Text Alternatives (WCAG 1.1.1)

test('images have appropriate text alternatives', async ({ page }) => {
  await page.goto('/');

  const images = await page.locator('img').all();

  for (const img of images) {
    const alt = await img.getAttribute('alt');
    const role = await img.evaluate(el => el.getAttribute('role'));
    const ariaLabel = await img.getAttribute('aria-label');

    const isDecorative = role === 'presentation' || role === 'none';

    if (!isDecorative) {
      expect(alt).not.toBeNull();
      expect(alt).not.toBe('');
    }
  }
});

Testing Color Contrast (WCAG 1.4.3)

test('text meets color contrast requirements', async ({ page }) => {
  await page.goto('/');

  const accessibilityScanResults = await new AxeBuilder({ page })
    .withTags(['wcag2aa'])
    .analyze();

  const contrastViolations = accessibilityScanResults.violations
    .filter(v => v.id === 'color-contrast');

  expect(contrastViolations).toHaveLength(0);
});

Testing Focus Visibility (WCAG 2.4.7)

test('focus indicators are visible', async ({ page }) => {
  await page.goto('/');

  const focusableElements = await page.locator(
    'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
  ).all();

  for (const element of focusableElements) {
    const isVisible = await element.isVisible();
    if (!isVisible) continue;

    await element.focus();

    const outlineStyle = await element.evaluate((el) => {
      return window.getComputedStyle(el).outlineStyle;
    });

    const outlineWidth = await element.evaluate((el) => {
      return window.getComputedStyle(el).outlineWidth;
    });

    expect(outlineStyle).not.toBe('none');
    expect(outlineWidth).not.toBe('0px');
  }
});

Best Practices for AI-Generated Accessibility Tests

When using AI tools to generate accessibility tests, follow these practices to ensure quality results.

Provide Clear Context: Include the specific WCAG success criteria you want to test. AI tools generate better tests when you specify criteria by number (e.g., “WCAG 2.4.3 Focus Order”) rather than general descriptions.

Review Generated Tests: Always verify that AI-generated tests actually check what they claim to check. Examine the assertions and ensure they align with the WCAG requirements.

Combine Scanning and Behavioral Testing: Automated tools like axe-core catch many issues but cannot verify everything. Use AI to generate both automated scanning tests and behavioral tests that require human judgment.

Maintain Test Suites: Accessibility standards evolve. Use AI to help update existing tests when new WCAG guidelines are released or when your application changes.

Built by theluckystrike — More at zovo.one