Escrever Testes Cucumber

Usando Cucumber com Axe DevTools

Pré-requisitos

Para escrever testes de acessibilidade e produzir resultados, você deve já ter criado um arquivo de teste com Axe DevTools e sua escolha de Selenium WebDriver pré-importado e pré-inicializado. Se ainda não fez isso, leia este guia sobre como fazê-lo.

Configuração

Primeiro, adicione Axe DevTools à sua configuração

public class AppConfiguration {

    @Bean
    public static AxeWorld axeWorld() {
        return new AxeWorld();
    }
}

Agora, adicione os passos necessários para usar Axe DevTools

public class StepDefinitions {

    private AxeWorld axeWorld;

    public StepDefinitions(AxeWorld axeWorld) {
        this.axeWorld = axeWorld;
    }

    private WebDriver webDriver;

    @Before
    public void setup() throws IOException {
        webDriver = new ChromeDriver();
        axeWorld.setPage(new AxeDriver(webDriver));
    }

    @After
    public void tearDown() throws Exception {
        webDriver.quit();
    }

    @When("^I visit \"([^\"]*)\"$")
    public void iVisit(String url) throws Throwable {
        webDriver.get(url);

    }
}

Escrevendo Testes

Antes de poder testar uma página, você precisa acessá-la. O primeiro passo é instanciar Selenium WebDriver e acessar uma página

WebDriver webDriver = new ChromeDriver();
webDriver.get("'https://broken-workshop.dequelabs.com'");

Em seguida, você pode criar um objeto de driver de varredura do Axe DevTools e passar o WebDriver

AxeDriver axeDriver = new AxeDriver(webDriver);

Finalmente, inclua o axeDriver em suas definições de etapa

// Inject AxeWorld into your step definitions.
public StepDefinitions(AxeWorld axeWorld) {
  this.axeWorld = axeWorld;
}
// Provide the page to the Axe World
axeWorld.setPage(new axeDriver(webDriver));

Você pode então testar a página quanto à acessibilidade. Atualmente, Axe DevTools suporta testes Pico e Spring através do Cucumber.

Uso

Passos de Acessibilidade no Cucumber

Os exemplos de verificações de acessibilidade abaixo usam Then the page should be axe clean, mas todas as verificações funcionam de forma intercambiável com Then the page should be audited for accessibility. A diferença entre estes dois é se o teste falhará em violações de acessibilidade com Then the page should be axe clean, versus não falhar com Then the page should be audited for accessibility.

Para construir um passo Cucumber de acessibilidade do Axe, comece com o passo base e anexe quaisquer cláusulas necessárias. Todas as cláusulas seguintes podem ser combinadas; no entanto, elas devem aparecer na ordem especificada:

Then the page should be axe clean [including] [excluding] [according-to] [checking-rules/checking-only-rules] [skipping-rules]

Passo Base

O passo base é o componente central do passo Cucumber. É um passo completo por si só e verifica se a página atualmente carregada é acessível. Realiza uma auditoria na acessibilidade da sua página. A auditoria registra problemas de acessibilidade no arquivo target/axe-report/accessibility-check.log e cria uma saída JSON dos resultados em target/axe-report/accessibility-check.json.

Then the page should be axe clean

This step will cause test suite failures if accessibility violations are found

Then the page should be audited for accessibility

This step will require handling of violations outside of test suite failures, as this step does not trigger the suite to fail if violations are found.

Delimitação

O Axe DevTools permite que varreduras de acessibilidade sejam delimitadas de forma inclusiva e exclusiva. Além disso, esses escopos podem funcionar entre si para criar enclaves e exclaves complexos de delimitação. Esses escopos funcionam com base em seletores CSS.

Cláusula de Inclusão

A cláusula de inclusão within "#selector" especifica quais elementos verificar na página. Apenas os elementos dentro do escopo selecionado serão escaneados. A cláusula de inclusão deve incluir um seletor CSS válido entre aspas duplas. Use seletores compostos para selecionar vários elementos. Por exemplo, within "#header, .footer"

Then the page should be axe clean within "#selector"

Cláusula de Exclusão

A cláusula de exclusão excluding "#selector" especifica quais elementos ignorar. Nenhum elemento dentro do escopo selecionado será escaneado. A cláusula de exclusão deve incluir um seletor CSS válido entre aspas duplas. Use seletores compostos para selecionar vários elementos. Por exemplo, excluding "#widget, .ad"

Then the page should be axe clean excluding "#selector"

Encadeando inclusão e exclusão

Para encadear cláusulas de inclusão e exclusão, use o ponto e vírgula (;) ou a palavra mas para separá-las.

Then the page should be axe clean within "main"; excluding "aside"
Then the page should be axe clean within "main" but excluding "aside"

Configuração de regras

Existem algumas maneiras de alterar sua configuração padrão de regras usando a API Cucumber. Você pode selecionar regras por grupo através do uso de tags, ou selecionar regras individualmente por seu ID de regra.

Cláusula de Tag de Regra

A cláusula de tag especifica qual(is) padrão(ões) de acessibilidade usar na verificação da página. Especifique os padrões de acessibilidade pelo nome (tag). Vários padrões podem ser especificados quando separados por vírgulas. Por exemplo, according to: wcag2a, section508

Todos os nomes de tags são documentados além de um lista completa de descrições de regras que correspondem a cada tag.

Then the page should be axe clean according to: best-practice

Cláusula de Verificação de Regras Adicionais

Esta cláusula permite que você adicione regras adicionais às suas regras existentes. Você pode especificar uma única regra pelo ID da regra, ou uma lista de regras separadas por vírgulas. Veja documentação sobre regras para uma lista das regras e seus IDs. Use um ponto e vírgula (;) ou a palavra and para separar a cláusula de verificação de regras de qualquer cláusula(s) anterior(es).

Then the page should be axe clean checking: color-contrast

Then the page should be axe clean according to: wcag2a; checking: color-contrast
Then the page should be axe clean according to: wcag2a and checking: color-contrast

Cláusula de Verificação de Somente Regras Especificadas

Adicionando a palavra only à cláusula de verificação de regras, você pode alterar o significado do passo. Conforme descrito anteriormente, a cláusula de verificação de regras especifica regras adicionais a serem executadas. Apenas as regras especificadas são verificadas se a palavra only for usada. Veja documentação sobre regras para uma lista das regras e seus IDs. Use um ponto e vírgula (;) ou a palavra and para separar a cláusula de verificação de regras de qualquer cláusula(s) anterior(es).

Then the page should be axe clean checking only: color-contrast

Cláusula de Pular Regras

A cláusula de pular regras especifica quais regras devem ser ignoradas na configuração de regras existente. As regras a serem ignoradas são especificadas por IDs de regras, separados por vírgulas. Veja documentação sobre regras para uma lista das regras e seus IDs. Use um ponto e vírgula (;) ou a palavra and para separar a cláusula de verificação de regras de qualquer cláusula(s) anterior(es).

Then the page should be axe clean skipping: color-contrast

Then the page should be axe clean according to: wcag2a; skipping: color-contrast
Then the page should be axe clean according to: wcag2a but skipping: color-contrast

Cláusula de Seleção de Conjunto de Regras

Acesse conjuntos de regras etiquetadas no axeDriver através de uma cláusula Cucumber. Esta funcionalidade permite especificar um conjunto de regras (Ex: 508, wcag2, wcag2.1) para auditar a acessibilidade da página.

Then the page should be axe clean according to ruleset: wcag2.1

Uso do Serviço

Obtenha informações sobre as tendências de uso do Axe DevTools dentro da sua organização

Por padrão, o serviço de uso está desativado e a URL padrão é https://usage.deque.com.

Variáveis de ambiente

Essas variáveis de ambiente permitem que você configure o serviço de uso e altere as propriedades dos eventos relatados.

Próximos Passos

Para uso adicional dos seus resultados de varredura do Axe DevTools, como relatórios, consulte a documentação do pacote Axe DevTools Java Selenium

Solução de Problemas

Se você encontrar problemas ao configurar seu teste de acessibilidade, entre em contato diretamente com seu representante Deque, entre em contato conosco por meio do nosso suporte técnico, ou envie-nos um e-mail. Ficaremos felizes em ajudar a iniciar seus esforços de teste de acessibilidade.