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 testar páginas com o Axe DevTools, primeiro você precisa importá-lo e inicializá-lo em seu projeto. Se você ainda não completou esta etapa, veja este guia sobre como fazer isso.

Obtendo o Contexto de Varredura

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.

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