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.

Os trechos individuais nas seções abaixo são JavaScript e eles são compilados sem alterações em TypeScript. A seção Arquivo de Amostra 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 ainda não o fez, leia o guia sobre como instalá-lo a partir de um pacote, do seu repositório de artefatos ou do Agora da Deque. Você também precisa de uma versão do Playwright baixada e configurada à sua escolha.

Importação e Inicialização

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

JavaScript com módulos CommonJS

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

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

JavaScript com módulos ES

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

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';

TypeScript

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

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';
import type { AxeResults } from 'axe-core';

Inicializando o Playwright

Depois de importar o Axe DevTools para Web, você pode inicializar o driver. Cada varredura requer sua própria instância do Axe DevTools para Web, então você vai inicializá-la enquanto escreve testes.

O código de inicialização é o mesmo em JavaScript e TypeScript, exceto que o TypeScript pode inferir ou anotar os tipos retornados pelo Playwright. Em JavaScript:

// This will open up a headless instance of chromium
const browser = await playwright.chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

Em TypeScript, com os tipos escritos:

import type { Browser, BrowserContext, Page } from 'playwright';

// This will open up a headless instance of chromium
const browser: Browser = await playwright.chromium.launch();
const context: BrowserContext = await browser.newContext();
const page: Page = await context.newPage();

Obtendo o Contexto de Varredura

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

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

JavaScript

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();
})();

TypeScript

import * as playwright from 'playwright';
import type { Browser, BrowserContext, Page } from 'playwright';
import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import type { AxeResults } from 'axe-core';

(async () => {

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

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

    //analyze page
    const results: AxeResults = await new AxeDevToolsBuilder({ page }).analyze();

    //log results
    console.log(results);

    //close webdriver
    await 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.

Resoluçã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.