Escrever Testes com Selenium

Usar Axe DevTools Java Selenium

Esta configuração do Axe DevTools não se vincula automaticamente a qualquer biblioteca de asserção. Isso permite testes de acessibilidade simples, bem como a personalização completa dos testes e o uso com asserções personalizadas.

Pré-requisitos

Para usar o Axe DevTools Java Selenium e produzir resultados com ele, você deve já ter criado um arquivo de teste com o Axe DevTools e ter sua escolha de Selenium WebDriver importada e inicializada. Caso não tenha concluído esta etapa, primeiro leia este guia sobre como fazer isso.

Executar uma Varredura

Com esta configuração, executar uma varredura básica de acessibilidade requer apenas três linhas de código. No seu arquivo de teste, substitua <URL> pelo endereço web desejado da página que você quer testar. Os resultados da varredura são salvos na variável results

webdriver.get("<URL>");
Results results = axeSelenium.run(axedriver);
webdriver.quit();

Usando os Resultados da Varredura

Depois de executar a varredura, você pode querer fazer algo com os resultados. A opção mais simples é imprimir os resultados no console.

System.out.print(results);

Você também pode usar os resultados para verificar violações de acessibilidade. A maneira mais simples de fazer isso é com uma declaração assim:

if (!results.violationFree()) { 
    //do something, like throw an exception
}

Para mais informações sobre como utilizar o objeto de resultados para escrever testes personalizados, consulte a página sobre usando os resultados.

Arquivo de Teste de Exemplo

Este arquivo de teste funciona com os mesmos blocos de construção abordados em importar e inicializar, bem como o guia de escrita de testes nesta página.

import com.deque.html.axedevtools.selenium.*;
import com.deque.html.axedevtools.selenium.results.*;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class Example {
    public static void main(final String[] args) {
        AxeSelenium axeselenium = new AxeSelenium();
        WebDriver webdriver = new ChromeDriver();
        AxeDriver axedriver = new AxeDriver(wd);

        webdriver.get("<URL>");

        Results results = axeselenium.run(axedriver);

        webdriver.quit();

        if (!results.violationFree()) {
            int violationCount = results.getViolations().size();
            System.out.printf("Found %d violations!\n", violationCount);
            System.exit(1);
        }

        System.out.println("No violations found!");
    }
}

Neste exemplo, são usados o Chrome e o ChromeDriver. Eles podem ser substituídos por qualquer outro driver de navegador do Selenium e navegador. Se este arquivo de teste encontrar algum problema de acessibilidade, ele imprime o número de violações encontradas e sai com o código de status 1 (erro). Para usar este arquivo de teste no seu próprio ambiente, você deverá adicionar um URL à linha

webdriver.get("<URL>");

Referência Adicional

Além do uso básico descrito acima, o Axe DevTools Java Selenium fornece vários métodos de encadeamento para modificar a forma como a varredura é executada. Estes métodos podem modificar o escopo e o conjunto de regras da varredura para qualquer configuração desejada. Por padrão, toda a página é varrida e verificada quanto a violações de acessibilidade de acordo com as diretrizes do WCAG 2.0 nível AA. Uma nota importante é que chamadas subsequentes ao método de execução substituirão qualquer preferência dos métodos de encadeamento listados abaixo. Alterações feitas no escopo ou nas regras não persistem em múltiplas varreduras usando estes métodos encadeados.

Escopo

Por padrão, toda a página é varrida. No entanto, o Axe DevTools suporta a capacidade de verificar porções específicas de uma página com seus métodos de encadeamento de escopo. Estes métodos de escopo mudam efetivamente a "área" da página a ser varrida para a área alvo desejada. Além disso, está disponível um método para ignorar violações. "Delimitar" a página com este método não reduz a área da varredura, mas ignorará violações de um tipo especificado dentro da área especificada e ainda assim varrerá a área para outras potenciais violações. Todos estes métodos funcionam com base em áreas de seletores CSS. A área de cada seletor CSS em uma determinada página pode ser determinada usando o widget "inspecionar elemento" das ferramentas de desenvolvedor do seu navegador.

Métodos de Escopo

Como explicado acima, esses métodos mudam efetivamente a área da superfície da página a ser verificada. Existem dois métodos nesta categoria, um método "inclusivo" e um método "exclusivo". Eles podem ser encadeados mutuamente para criar múltiplos enclaves e exclaves de área de verificação.

Delimitação - Incluindo

O método de encadeamento de escopo incluindo altera a varredura para ser executada apenas dentro da área da página especificada pelos seletor(es) CSS passados para ele. Existem várias maneiras de usar o método incluindo: escopo único, escopo múltiplo, escopo composto e delimitação de IFrame.

Este método pode ser usado com um único seletor da seguinte maneira:

axeselenium.including("#selector1").run(axedriver);

Esta varredura será executada apenas dentro do escopo do seletor 1

Você pode configurar uma varredura com escopos múltiplos:

axeselenium.including("#selector1").including("#selector2").run(axedriver);

Esta chamada verificará dentro do escopo do seletor 1 e do seletor 2. Eles podem ser separados por vírgula ou declarados em uma cláusula de inclusão separada.

Escopo composto pode ser realizado com a seguinte sintaxe:

axeselenium.including("#selector1 .selector2").run(axedriver);

Este escopo composto resulta em apenas elementos com o seletor 2 dentro do seletor 1 sendo verificados. Isso é configurado ao não separar os seletores por vírgulas.

Para delimitar dentro de um IFrame, um List<String> pode ser passado. O escopo a ser verificado dentro do IFrame é passado como um parâmetro adicional.

axeselenium.including(Arrays.asList(new String[] {"#frame1", "#selector1"})).run(axedriver);

Esta varredura é executada em elementos dentro do seletor 1, que está dentro do quadro 1.

Delimitar dentro de múltiplos IFrames funciona da mesma forma que a seleção múltipla padrão. Simplesmente chame including novamente.

axeselenium.including(Arrays.asList(new String[] {"#frame1", "#selector1"}))
    .including(Arrays.asList(new String[] {"#frame2", "#selector2"})).run(axedriver);

Esta varredura é executada apenas dentro do seletor 1 dentro do quadro 1, e do seletor 2 dentro do quadro 2.

Também é possível delimitar dentro de IFrames aninhados:

axeselenium.including(Arrays.asList(new String[] {"#frame1", "#frame2", "#selector1"})).run(axedriver);

Esta varredura é executada dentro do escopo do seletor 1 dentro do quadro 2, que está dentro do quadro 1

Delimitação - Excluindo

Além do método de encadeamento incluindo, esta API possui um método de exclusão. Este método altera a verificação para que apenas elementos fora do escopo especificado sejam verificados. Sua configuração e uso são idênticos ao método incluindo, portanto, consulte a seção acima para mais detalhes e exemplos de como ele pode ser usado. Um detalhe importante a lembrar é que os métodos de inclusão e exclusão podem ser encadeados entre si para criar escopos complexos de forma muito mais simples do que apenas usar incluir ou excluir.

Este exemplo mostra um jeito de combinar os métodos de inclusão e exclusão:

axeselenium.including("#selector1").excluding("#selector2").run(axedriver);

Esta varredura é executada apenas na parte da página que está dentro do seletor 1 e que não está também dentro do seletor 2.

Delimitação - Ignorando Violações

O método final relacionado à delimitação é o método de ignorar resultados. Este método não altera o escopo geral da varredura, mas ignorará violações de um tipo especificado dentro de um escopo especificado. Ele funciona passando os seletor(es) do(s) elemento(s) que você deseja ignorar como uma matriz, juntamente com a regra que eles violam.

axeselenium.ignoring("[\".sidebar\", \"#branded-content\"]", "color-contrast").run(axedriver);

Esta varredura ignorará violações de contraste de cores dentro da seção da barra lateral e da seção de conteúdo com marca.

Regras

Existem três maneiras de modificar sua configuração de regras para cada varredura. Esses diferentes métodos permitem diferentes granularidades ao selecionar regras para testar. O método de conjunto de regras menos granular seleciona um conjunto de regras, ou um grupo maior de regras baseadas nos padrões comuns de acessibilidade. O método de padrões de conjunto de regras ligeiramente mais granular, também conhecido como tags, seleciona regras com base nas áreas de um padrão de acessibilidade maior em que elas se encaixam. Finalmente, existem três opções para configuração com uma regra por vez. Juntos, esses métodos de encadeamento permitem que você ajuste sua varredura para executar precisamente as regras que deseja.

Para informações sobre as regras do axe-core, visite a página de visão geral de conjunto de regras.

Seleção de Conjunto de Regras

Este método seleciona regras por sua associação mais agregada - um conjunto de regras. Um conjunto de regras é uma coleção de todas as regras que pertencem a um padrão de acessibilidade amplamente utilizado na indústria. Conjuntos de regras para WCAG 2.0, 2.1 e 2.2; ADA Section 508; Trusted Tester v5; EN 301 549; e RGAA. Além disso, as regras de melhores práticas podem ser ativadas com uma bandeira booleana.

Conjuntos de regras são frequentemente compostos por várias tags, que são regras agrupadas por distinções mais específicas. Por exemplo, o conjunto de regras wcag2 contém todas as regras marcadas wcag2a como regras do nível A do WCAG 2.0, wcag2aa para regras do nível AA do WCAG 2.0 e wcag2aaa para regras do nível AAA do WCAG 2.0.

Use esta opção quando quiser selecionar um conjunto de regras sem modificações.

axeselenium.forRuleset("wcag2.1").run(axedriver);

Esta varredura será executada apenas com regras do WCAG 2.1.

Para ativar regras de melhores práticas, use a segunda forma de forRuleset.

axeselenium.forRuleset("wcag2.1", true).run(axedriver);

Seleção de Padrão

O método de cadeia de padrões de acessibilidade, ou tag, permite um pouco mais de granularidade dentro dos conjuntos de regras do axe-core. Para regras baseadas em WCAG, este método permite que você selecione apenas regras marcadas com A simples ou AA duplo. Esta lista detalha os nomes de tags disponíveis e seus padrões correspondentes.

Esta opção é particularmente útil ao testar apenas uma parte específica de um conjunto de regras, por exemplo, apenas as regras de nível A simples do WCAG 2.0.

Embora não definidas explicitamente como parte de qualquer padrão de acessibilidade, oferecemos várias regras que chamamos de "melhores práticas". Embora não estritamente necessárias, testar com essas regras ajudará seu site a ser o mais equitativo possível em termos de uso.

Um único padrão pode ser selecionado da seguinte forma:

axeselenium.accordingTo("wcag2a").run(axedriver);

Esta varredura será executada apenas com regras marcadas sob o nível A do WCAG 2.0

Além disso, várias tags podem ser especificadas para selecionar múltiplos padrões de acessibilidade:

axeselenium.accordingTo("wcag2a", "section508").run(axedriver);

Estas varreduras executarão tanto as regras marcadas sob o nível A do WCAG 2.0 como a Seção 508 do ADA.

Seleção de Regras

Finalmente, você pode alterar seu conjunto de regras por uma única regra. Para informações sobre os nomes de todas as regras do axe-core e o que cada regra testa, veja a documentação de descrições de regras do axe-core.

Esses métodos funcionam bem quando seu grupo final desejado de regras difere de um conjunto de regras ou padrão/tag existente por apenas algumas regras individuais. Para construir um conjunto de regras totalmente personalizado, confira nossas opções de regras personalizadas.

Verificação de Regras Adicionais

O método de cadeia de verificação permite que você adicione regras adicionais para testar além do seu conjunto de regras padrão.

Este método pode ser usado para verificar uma única regra adicional:

axeselenium.checking("label").run(axedriver);

onde a varredura é executada com o conjunto de regras padrão, além da regra „label“.

Também pode ser usado para verificar várias regras adicionais de duas maneiras diferentes:

axeselenium.checking("label", "tabindex").run(axedriver);
axeselenium.checking("label").checking("tabindex").run(axedriver);

onde a varredura é executada com o conjunto de regras padrão, além das regras „label“ e „tabindex“.

Também pode ser usado para adicionar uma única regra ou várias regras a uma tag específica:

axeselenium.accordingTo("wcag2a").checking("tabindex").run(axedriver);

onde a varredura é executada testando contra as regras do WCAG 2.0 nível A, com a adição da regra „tabindex“.

Ignorando Regras

Semelhante ao método de verificação, o método de ignorar altera as regras padrão a serem usadas pela(s) regra(s) especificada(s). No entanto, em vez de adicioná-la ao conjunto de regras, o método de ignorar remove a(s) regra(s) especificada(s) daquelas usadas para testar a página. Sua configuração e uso são idênticos ao método de verificação, portanto, consulte a seção acima para mais detalhes e exemplos de como utilizá-lo. Um detalhe importante a lembrar é que os métodos de verificação e ignorar podem ser encadeados entre si para criar conjuntos de regras personalizados de forma muito mais simples do que usar apenas os métodos de ignorar ou verificar isoladamente.

axeselenium.accordingTo("wcag2a").checking("tabindex").skipping("label").run(axedriver);

Este exemplo mostra uma varredura testando contra as regras do WCAG 2.0 nível A, com a adição da regra „tabindex“ e a remoção da regra „label“.

Verificação Apenas

O método de verificação apenas verifica apenas a(s) regra(s) especificada(s). Qualquer regra não especificada explicitamente não será incluída na varredura.

Este método de encadeamento pode ser usado para especificar uma única regra:

axeselenium.checkingOnly("tabindex").run(axedriver);

onde a varredura é executada apenas com a regra „tabindex“.

Também pode ser usado para especificar mais de uma regra de duas maneiras:

axeselenium.checkingOnly("label", "tabindex").run(axedriver);
axeselenium.checkingOnly("label").checkingOnly("tabindex").run(axedriver);

onde a varredura é executada apenas com as regras „label“ e „tabindex“.

Desativando iframe Testes

Em páginas voláteis, iframes podem causar problemas. Axe precisa ser injetado em cada frame e configurado da mesma forma em cada um deles. Se iframes forem adicionados ou removidos enquanto AxeSelenium::run está testando sua página, é possível que exceções sejam lançadas ou que ocorra um comportamento inesperado. Como medida de segurança, AxeSelenium expõe um método para desabilitar toda a interação com iframes, AxeSelenium::disableIframeTesting. Quando ativado, o axe-core não será injetado nos iframes da página, nem será executado neles. Apenas a página de nível superior será verificada.

Pode ser usado da seguinte forma:

axeselenium.disableIframeTesting().run(axedriver);

Serviço de Uso

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

O serviço de uso pode ser configurado através de variáveis de ambiente ou métodos em tempo de execução. Quando ambos são usados, os valores nos métodos são utilizados. Nota: nem todos os campos de dados do serviço de uso podem ser configurados por métodos.

Por padrão, o serviço de uso está desativado e a URL padrão para a qual os resultados são enviados é https://usage.deque.com.

Variáveis de Ambiente

Essas variáveis de ambiente permitem configurar o serviço de uso e alterar as propriedades dos eventos relatados.

Habilitar Rastreamento

Este método permite que os usuários optem por enviar ou não dados ao serviço de uso

.enableTracking(boolean state)

Definir URL de Rastreamento

Este método permite que os usuários alterem para onde os dados de métricas de uso estão sendo enviados. O padrão é https://usage.deque.com

.setTrackingUrl(String url)

Definir ID Distinto

Este método permite que os usuários alterem o ID distinto que está sendo armazenado/usado

.setDistinctId(String distinctId)

Próximos Passos

Depois de escrever testes com o Axe DevTools, leia mais sobre usando resultados para escrever testes personalizados mais detalhados, ou leia sobre usando o repórter para gerar relatórios das varreduras de acessibilidade.

Resolução de Problemas

Se você tiver problemas ao configurar seus testes de acessibilidade, entre em contato diretamente com seu representante Deque, fale conosco através do nosso atendimento ao cliente, ou envie-nos um email. Estamos felizes em ajudar a iniciar seus esforços de teste de acessibilidade.