Escrevendo Testes para o Axe DevTools para Web usando WebdriverIO

Escrevendo testes com o Axe DevTools

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

Pré-requisitos

Para importar e inicializar o Axe DevTools para Web, é necessário instalá-lo 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 Agora da Deque. Você também precisa ter o WebdriverIO baixado e configurado.

Importando e Inicializando

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

JavaScript com módulos CommonJS

Esta é a opção padrão para um projeto Node.js sem "type": "module" em seu package.json.

const { AxeDevToolsWebdriverIO } = require('@axe-devtools/webdriverio');
const webdriverio = require('webdriverio');

JavaScript com módulos ES

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

import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import { remote } from 'webdriverio';

TypeScript

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

import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import { remote } from 'webdriverio';
import type { AxeResults } from 'axe-core';

Inicializando o Cliente

Neste ponto, você poderá inicializar seu webdriver dentro de sua função de teste. Em JavaScript:

const client = await webdriverio.remote({
  capabilities: {
    browserName: 'chrome'
  }
});

Em TypeScript, o cliente é um WebdriverIO.Browser, que é o tipo que AxeDevToolsWebdriverIO espera:

const client: WebdriverIO.Browser = await remote({
  capabilities: {
    browserName: 'chrome'
  }
});

Em seguida, você pode inicializar o Axe DevTools para Web com o cliente do webdriver. Esta declaração é a mesma em ambas as linguagens:

const axeDevTools = new AxeDevToolsWebdriverIO({ client });

Obtendo o Contexto de Escaneamento

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

await client.url('<URL>');

Uma vez que o WebdriverIO tenha acessado a página, você pode escaneá-la com o Axe DevTools e salvar os resultados. A forma mais simples de visualizar os resultados da varredura é registrar o objeto de resultados no console.

const results = await axeDevTools.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 ambas; a versão TypeScript usa sintaxe import e anota o cliente e os resultados da verificação.

JavaScript

const webdriverio = require('webdriverio');
const { AxeDevToolsWebdriverIO } = require('@axe-devtools/webdriverio');

const simpleExample = async () => {
  const client = await webdriverio.remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await client.url('https://google.com');

  const axeDevTools = new AxeDevToolsWebdriverIO({ client });
  const results = await axeDevTools.analyze();
  await client.deleteSession();
  return results;
};

simpleExample()
  .then(results => {
    console.log(results);
  })
  .catch(err => {
    throw err;
  });

TypeScript

import { remote } from 'webdriverio';
import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import type { AxeResults } from 'axe-core';

const simpleExample = async (): Promise<AxeResults> => {
  const client: WebdriverIO.Browser = await remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await client.url('https://google.com');

  const axeDevTools = new AxeDevToolsWebdriverIO({ client });
  const results: AxeResults = await axeDevTools.analyze();
  await client.deleteSession();
  return results;
};

simpleExample()
  .then(results => {
    console.log(results);
  })
  .catch(err => {
    throw err;
  });

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.

Solução de Problemas

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