Rayrun
← Back to Discord Forum

Accessability Testing

Has anyone had any joy with using the axe library for accessibility testing.

https://playwright.dev/docs/accessibility-testing#using-a-test-fixture-for-common-axe-configuration

Looking at the docs they use @axe-core/playwright but i have also seen there is axe-playwright

The implementation is slightly different. I have 2 tests using 1 from each library in a little POC.

import test, { expect } from '@fixtures/accessibilityFixture/axeFixture';
import { injectAxe, checkA11y } from 'axe-playwright';

test.describe('Accessibility Test', async () => {
  // this test uses axe core from playwright docs
  test('@accessibility Using Axe Core', async ({ homePage, makeAxeBuilder }) => {
    await homePage.visit();

    const accessibilityScanResults = await makeAxeBuilder()
      .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
      .analyze();

    expect(accessibilityScanResults.violations).toEqual([]);
  });

  // this test uses axe - npm i axe-playwright
  test('@accessibility Using Axe', async ({ page }) => {
    await page.goto('/', { timeout: 10000 });
    await injectAxe(page);
    await checkA11y(page, undefined, { detailedReport: true, detailedReportOptions: { html: true } }, true, 'html', {
      outputDirPath: 'results',
      outputDir: 'accessibility',
      reportFileName: 'accessibility-audit.html',
    });
  });
});

Has anyone got any good experience using either of these 2 and would recommend one?

The core is nice cause you can do a lot of the config in the fixture, but then i like the latter for the reporting.

This thread is trying to answer question "Has anyone got any good experience using either `@axe-core/playwright` or `axe-playwright` for accessibility testing and would recommend one?"

5 replies

I have been using axe-core and so far it has done the job pretty well I throw this in there to log the error on failure(Easier to make tickets off of)

// Log the violations
            console.log(results.violations[0]);
            test.fail();
        }```

thanks for this

do you ignore having conditionals in tests

expect(results.violations).toEqual([]); i think this line is better for you

Ohh thank you, I was wondering why even with failures the test would pass. But I think it was just that Axe successfully processed(Not interpeting the outcomes). But I will use that! 🍾

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.