Escrevendo Testes para o Axe DevTools para Web com Puppeteer

Escrevendo testes com o Axe DevTools

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

Os trechos individuais nas seções abaixo são JavaScript e eles compilam sem alterações no TypeScript. A seção Arquivo de Exemplo Completo apresenta o teste completo em ambas as linguagens.

Pré-requisitos

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

Obtendo o Contexto da Varredura

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

//Launch the Puppeteer Driver
const browser = await puppeteer.launch();
//Create a new page in the browser
const page = await browser.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 varrer possui a Política de Segurança de Conteúdo habilitada, você pode enfrentar problemas. Se encontrar esse problema, o Axe DevTools inclui uma solução alternativa. Simplesmente inclua esta declaração após a criação da sua página:

await page.setBypassCSP(true);

Assim que o Puppeteer acessa a página, você pode varrê-la com o Axe DevTools e salvar os resultados. A maneira mais simples de visualizar os resultados da varredura é logar o objeto de resultados no console.

const results = await new AxeDevToolsPuppeteer(page).analyze();
console.log(results);

Arquivo de Exemplo Completo

O mesmo teste é mostrado abaixo em JavaScript e em TypeScript. A API do Axe DevTools é idêntica em ambas; a versão TypeScript usa a sintaxe import e anota os valores Puppeteer e o retorno da varredura.

JavaScript

const puppeteer = require('puppeteer');
const { AxeDevToolsPuppeteer } = require('@axe-devtools/puppeteer');

(async () => {

    //launch puppeteer web driver
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

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

    //analyze page
    const results = await new AxeDevToolsPuppeteer(page).analyze();
    
    //log results
    console.log(results);

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

TypeScript

import puppeteer from 'puppeteer';
import type { Browser, Page } from 'puppeteer';
import { AxeDevToolsPuppeteer } from '@axe-devtools/puppeteer';
import type { AxeResults } from 'axe-core';

(async () => {

    //launch puppeteer web driver
    const browser: Browser = await puppeteer.launch();
    const page: Page = await browser.newPage();

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

    //analyze page
    const results: AxeResults = await new AxeDevToolsPuppeteer(page).analyze();

    //log results
    console.log(results);

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

Próximos Passos

Agora que você completou com sucesso uma varredura de acessibilidade, está pronto para avançar para tópicos de varredura mais avançados, como geração de relatórios e usando o objeto de resultados.

Resolução de Problemas

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