Importando e Inicializando para WebdriverIO

Depois de instalar o Axe DevTools for Web, você precisa importá-lo para a sua configuração de teste e inicializar o pacote.

Pré-requisitos

Para importar e inicializar o Axe DevTools for Web, ele precisa ser instalado primeiro. Caso ainda não tenha feito isso, 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 Axe DevTools para Web quanto WebdriverIO. A sintaxe depende do idioma e do sistema de módulos que seu projeto usa. Escolha a 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 { 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 fornece suas próprias declarações de tipo, então não há um pacote @types/ separado para instalar. Os resultados da análise 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';

Iniciando o Cliente

Neste ponto, você poderá inicializar seu webdriver dentro da 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'
  }
});

Então, você pode inicializar o Axe DevTools para Web com o cliente webdriver. Esta instrução é a mesma em ambos os idiomas:

const axeDevTools = new AxeDevToolsWebdriverIO({ client });

Próximos Passos

Depois de instalar, importar e inicializar o Axe DevTools for Web e seu driver, você está pronto para avançar para a varredura de acessibilidade e escrever testes de acessibilidade. Cada varredura com o Axe DevTools for Web requer uma nova instância, portanto, para configurar e executar suas varreduras, veja o guia em escrevendo testes.

Resolução de Problemas

Se você tiver problemas com qualquer uma das etapas de importação ou inicialização do Axe DevTools for Web, entre em contato diretamente com seu representante Deque, ou através do nosso suporte técnico, ou envie-nos um e-mail. Ficaremos felizes em ajudar.