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 importar e inicializar o Axe DevTools para Web, ele precisa ser instalado primeiro. Se você ainda não fez isso, leia o guia sobre como instalá-lo de um pacote, do seu repositório de artefatos ou do Deque's Agora. Você também precisará ter o Puppeteer instalado.

Importando e Inicializando

Importe tanto o Axe DevTools para Web quanto o Puppeteer. A sintaxe depende da linguagem e do sistema de módulos que seu projeto utiliza. Escolha aquele que corresponde ao seu projeto:

JavaScript com módulos CommonJS

Este é o padrão para um projeto Node.js sem "type": "module" em seu package.json.

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

JavaScript com módulos ES

Use esta sintaxe em um projeto com "type": "module" em seu package.json, ou em arquivos .mjs.

import { AxeDevToolsPuppeteer } from '@axe-devtools/puppeteer';
import puppeteer from 'puppeteer';

TypeScript

O TypeScript usa a mesma sintaxe import que os módulos ES. @axe-devtools/puppeteer fornece suas próprias declarações de tipo, então não há necessidade de instalar um pacote @types/ separado. Os resultados da varredura são tipados como AxeResults, que o axe-core exporta:

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

Para cada varredura, um novo objeto AxeDevToolsPuppeteer será criado.

Obtendo o Contexto de Análise

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');

Contornando 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.