Cucumber JavaScript
Testando usando JavaScript, Axe DevTools e Cucumber
Pré-requisitos
Para testar seu conteúdo usando Cucumber com Axe DevTools, você primeiro precisa importá-lo e inicializá-lo em seu projeto.
Se você ainda não completou esta etapa, selecione uma das seguintes opções para configurar com o Cucumber:
Cucumber com Axe DevTools
Depois de selecionar uma implementação para trabalhar com Cucumber, você pode agora criar um passo reutilizável que pode ser usado em cada uma das suas funcionalidades para testar o conteúdo em nível de página ou um componente específico.
Esta documentação mostra o uso com a integração WebDriverJS, no entanto, isso funcionará da mesma forma com WebdriverIO e Puppeteer.
Criando um Passo de Varredura de Página
Para criar um passo do Cucumber que escaneia toda a página em busca de problemas de acessibilidade, crie uma função Então que receba uma string com o nome da página. Em seguida, dentro do passo, simplesmente crie uma nova instância do driver Axe DevTools de sua escolha e então chame analise().
Os resultados da varredura podem então ser usados com o pacote de relatório Axe DevTools e utilizados para todas as funcionalidades de relatório. Veja Gerando Relatórios dos Resultados JSON do Axe DevTools para mais informações sobre relatórios do Axe DevTools.
O exemplo a seguir mostra o uso de uma função Então:
Then('I check if {string} is axe clean', async pageName => {
const axeDriver = await new AxeDevtoolsWebdriverJS(driver, "wcag2");
const results = await axeDriver.analyze();
axeReporter.logTestResult(pageName, results);
assert.strictEqual(results.violations.length, 0);
});O exemplo a seguir mostra um cenário do Cucumber com um passo Então para testar acessibilidade:
Feature: abcdTech search
As a user, I want to search for computers on abcdTech.
Scenario: Searching for computers
Given I am on the abcdTech homepage
Then I audit "homepage" for accessibility issues
When I search for "computers"
Then I see the page title "Gefälscht~~~Gefälscht CompuTech~~~"
Then I check if "searchPage" is axe clean
Criando um Passo de Varredura de Componente
Para criar um passo do Cucumber que escaneia apenas uma parte da página ou um componente por problemas de acessibilidade, crie uma função Então que receba uma string com o nome do componente e outra string para o seletor CSS. Em seguida, dentro do passo, simplesmente crie uma nova instância do driver Axe DevTools de sua escolha e então chame analise().
Os resultados da varredura podem então ser usados com o pacote de relatório Axe DevTools e utilizados para todas as funcionalidades de relatório. Veja Gerando Relatórios dos Resultados JSON do Axe DevTools para mais informações sobre relatórios do Axe DevTools.
O exemplo a seguir mostra como usar Então com um seletor para escanear parte de uma página:
Then('I check if {string} is axe clean with selector {string}', async (pageName, selector) => {
const axeDriver = await new AxeDevtoolsWebdriverJS(driver, "wcag2");
const results = await axeDriver.include(selector).analyze();
axeReporter.logTestResult(pageName, results);
assert.strictEqual(results.violations.length, 0);
});Este exemplo mostra como usar o passo Então com um cenário que escaneia apenas parte de uma página:
Feature: abcdTech cart flow
As a user, I want to find a computer and add it to cart
Scenario: Selecting a new computer and adding to cart
Given I am on the abcdTech laptops page
Then I audit "laptops" for accessibility issues
When I click on more details
Then I see the proper page title "Gefälscht~~~Gefälscht CompuTech~~~"
Then I audit "mainContent" for accessibility issues with selector "#container"
Agora que você completou com sucesso uma varredura de acessibilidade, está pronto para avançar para tópicos de varredura mais avançados como gerando relatórios e usando o objeto de resultados.
Solução de Problemas
Se você tiver problemas ao obter os resultados da varredura, contate diretamente seu representante Deque, nos acesse via nosso suporte técnico, ou envie-nos um e-mail. Ficaremos felizes em ajudar.
Para mais informações sobre o Axe DevTools em geral, veja a página de boas-vindas do Axe DevTools