axe DevTools and Playwright.dev logos

New axe DevTools Integration: Playwright

Automation is the key to efficient and affordable accessibility testing. By enabling development teams to automate much of their accessibility testing, we can empower them to find issues faster and resolve them before they ever make it into the codebase. Not only does this require a tool that is accurate and fast, but it also requires a tool that can keep up with the speed at which dev teams adopt new and better tools and testing environments. On that note, the Deque team is pleased to announce our latest integrations: axe DevTools Playwright.

Playwright is a NodeJS library to automate Chromium, Firefox, and WebKit. With Playwright, developers can create scripts to open pages, trigger events, run tests, and lots more. This is great for automated testing and is an increasingly popular alternative to Webdriver.

Axe DevTools Playwright

Axe DevTools Playwright is an integration for Playwright that uses the latest version of axe-core. Axe DevTools Playwright comes with the usual features you have come to expect from axe DevTools, including:

– Multiple rulesets such as WCAG 2.0, Section 508.

– Support for ruleset customization and augmentation.

– Various reporting capabilities such as HTML, JUnit XML.

Code Example: 

const AxeBuilder = require('@axe-devtools/playwright').default
const playwright = require('playwright')

;(async () => {
  const browser = await playwright.chromium.launch({ headless: false })
  const context = await browser.newContext()
  const page = await context.newPage()
  await page.goto('https://dequeuniversity.com/demo/mars/')
  const results = await new AxeBuilder({ page }).analyze()
  // eslint-disable-next-line no-console
  console.log(results)
  await browser.close()
})()

Axe DevTools Playwright is available for Enterprise customers of axe DevTools and requires access from Agora, Deque’s package registry. Customer documentation for axe DevTools Playwright can be found in the axe DevTools Product Guide.

Photo of Michael Siek

About Michael Siek

Michael is working on axe-core integrations, axe DevTools integrations, and axe-linter. Michael’s goal is to help with digital equality one line of code at a time.
update selasa

Comments 2 responses

  1. Hi
    I want to know how we can check accessibility of a specific element inside iframe using axe-core playwright library
    TIA

  2. Hey Nikhil – I’m relaying this feedback from Michael: include([‘iframe element’, ‘element’]) or include({ fromFrame: [‘iframe element’, ‘element’] })

Leave a Reply

Your email address will not be published. Required fields are marked *