Escrevendo Testes para Axe DevTools para Web para WebDriverJS

Escrevendo testes com Axe DevTools

Os trechos individuais nas seções abaixo são em JavaScript e eles compilam sem alterações no TypeScript. A seção Arquivo Completo de Exemplo fornece 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 de um pacote, do seu repositório de artefatos ou do Deque's Agora. Você também precisa de um Selenium WebDriver baixado e configurado de sua escolha.

Importação e Inicialização

Importe tanto o Axe DevTools para Web quanto o WebDriverJS. 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" em seu package.json.

const { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const webdriver = require('selenium-webdriver');

JavaScript com módulos ES

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

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import webdriver from 'selenium-webdriver';

TypeScript

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

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';

Inicializando o Driver

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ê irá inicializá-la enquanto escreve testes.

Em JavaScript:

const driver = new webdriver.Builder().forBrowser('chrome').build();

Em TypeScript, usando os tipos Builder e WebDriver importados acima:

const driver: WebDriver = new Builder().forBrowser('chrome').build();

Obtendo o Contexto de Escaneamento

Antes de poder fazer uma varredura de uma página para acessibilidade, ela precisa ser acessada pelo webdriver.

await driver.get('<URL>');

Uma vez que o webdriver 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 da varredura é registrar o objeto de resultados no console.

const results = await new AxeDevToolsBuilder(driver).analyze();
console.log(results);

Arquivo Completo de Exemplo

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

JavaScript

const { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const WebDriver = require('selenium-webdriver');

var driver = new WebDriver.Builder().forBrowser('chrome').build();

driver.get('https://google.com').then(function() {
  new AxeDevToolsBuilder(driver).analyze(function(err, results) {
    if (err) {
      // Handle error
    }
    console.log(results);
  });
});

TypeScript

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';

(async () => {
  const driver: WebDriver = new Builder().forBrowser('chrome').build();

  try {
    await driver.get('https://google.com');
    const results: AxeResults = await new AxeDevToolsBuilder(driver).analyze();
    console.log(results);
  } finally {
    await driver.quit();
  }
})();

Próximos Passos

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

Solução de Problemas

Se você tiver problemas para obter resultados de varredura, entre em contato diretamente com seu representante da Deque, alcance-nos através da nossa central de suporte, ou envie-nos um e-mail. Ficaremos felizes em ajudar.