Escrevendo Testes para Axe DevTools for Web para Playwright

Escrevendo testes com Axe DevTools

Produzir resultados de escaneamento de acessibilidade com Axe DevTools pode ser tão fácil quanto uma linha de código. Esses resultados podem ser consumidos diretamente, usados em conjunto com uma biblioteca de asserções ou usados para criar relatórios de acessibilidade.

Pré-requisitos

Para testar páginas com Axe DevTools, primeiro você precisa importá-lo e inicializá-lo em seu projeto. Se ainda não completou essa etapa, veja este guia sobre como fazê-lo.

Obtendo o Contexto de Escaneamento

Antes de poder escanear uma página para acessibilidade, ela precisa ser acessada pelo Playwright.

//Launch the Playwright Driver
const browser = await playwright.chromium.launch();
//Create a new browser context
const context = await browser.newContext();
//Create a new page in the browser
const page = await context.newPage();
//Send the browser to the desired page to scan
await page.goto('$URL');

Ignorando a Política de Segurança de Conteúdo

Se a página que você está tentando escanear tiver a Política de Segurança de Conteúdo ativada, você pode ter problemas. Se encontrar esse problema, o Axe DevTools inclui uma solução. Basta incluir esta declaração após a criação da sua página:

await context = await browser.newContext({ bypassCSP: true })

Assim que o Playwright tenha acessado a página, você pode escaneá-la com o Axe DevTools e salvar os resultados. A maneira mais simples de visualizar os resultados do escaneamento é registrar no console o objeto de resultados.

const results = await new AxeDevToolsBuilder({ page }).analyze();
console.log(results);

Arquivo de Exemplo Completo

const playwright = require('playwright');
const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');

(async () => {

    //Launch the Playwright Driver
    const browser = await playwright.chromium.launch();
    //Create a new browser context
    const context = await browser.newContext();
    //Create a new page in the browser
    const page = await context.newPage();

    //launch page for testing (has intentional accessibility issues)
    await page.goto('https://broken-workshop.dequelabs.com');

    //analyze page
    const results = await new AxeDevToolsBuilder({ page }).analyze();
    
    //log results
    console.log(results);

    //close webdriver
    browser.close();
})();

Próximas Etapas

Agora que você concluiu com sucesso um escaneamento de acessibilidade, está pronto para avançar para tópicos de escaneamento mais avançados, como gerar relatórios e usar o objeto de resultados.

Solução de Problemas

Se tiver problemas para obter os resultados de escaneamento, entre em contato diretamente com seu representante da Deque, nos acesse através do nosso suporte técnico, ou envie-nos um e-mail. Ficaremos felizes em ajudar.