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.