Controle seus Scans

Por padrão, no que é conhecido como modo automático, o axe Watcher determina automaticamente quando analisar uma página web (seja quando visitada pelo seu conjunto de testes ou com base em alterações detectadas no DOM da página). Às vezes, essa análise automática resulta em um comportamento que não é compatível com os objetivos da sua organização: analisar muitas páginas (páginas que não são do seu interesse ou que pertencem a outros departamentos da sua organização). Você pode desativar o modo automático, o que permitirá determinar quando (ou se) uma página web será analisada (conhecido como modo manual).

Cenários

Analisando Partes de um Site

Você pode usar o modo manual para analisar apenas parte de um site. Por exemplo, se sua equipe é responsável pela funcionalidade do carrinho de compras no seu site, mas seu conjunto de testes precisa visitar páginas de catálogo (que não são de responsabilidade da sua equipe) para adicionar produtos ao carrinho, você provavelmente desejará evitar testar a acessibilidade das páginas de catálogo. Quando você chegar à página do carrinho de compras no seu conjunto de testes, poderá reativar a análise automática. Depois que os testes do carrinho de compras forem concluídos, você pode desativar a análise automática novamente.

Próximos Passos

• Desativar Análise Automática na Configuração para evitar testar as páginas do catálogo.
• Ativar Análise Automática para sua página de carrinho de compras.
• Desativar Análise Automática via Chamada ao final do teste da sua página de carrinho de compras para evitar que as páginas visitadas após o carrinho de compras sejam testadas.

Carregamento Dinâmico de Conteúdo

Você pode usar o modo manual para evitar testar páginas com sequências de carregamento complexas. Se a página que você deseja testar carrega muitos recursos dinamicamente em segundo plano, você pode desativar o modo automático até que esteja totalmente carregada. Isso limitará as questões de acessibilidade àquelas que existem apenas quando a página está completamente carregada. Também evitaria verificações de acessibilidade durante animações de carregamento ou outras interfaces de usuário de carregamento.

Próximos Passos

• Desativar Análise Automática na Configuração para que as animações de carregamento e a interface do usuário não sejam testadas para erros de acessibilidade.
• Ativar Análise Automática para retomar a verificação automática de acessibilidade assim que a página estiver completamente carregada.

Capturando Estados Específicos da Página

Se você deseja garantir que um estado específico da página seja analisado, você pode acionar manualmente uma análise de acessibilidade depois de configurar sua página.

Próximos Passos

• Desativar Análise Automática na Configuração para evitar que a análise de acessibilidade ocorra antes que a página esteja no estado desejado.
• Analisar Páginas Manualmente para testar o estado específico da página que você tem interesse.

Limitando o Escopo de um Grande Conjunto de Testes

Ao desativar a análise automática, você pode usar um conjunto de testes maior e mais abrangente, mas limitar seus testes de acessibilidade a apenas uma parte dele. Nesse caso, você não precisa dividir seu conjunto de testes maior em conjuntos menores e testar a acessibilidade apenas nos conjuntos de testes que lhe interessam.

Próximos Passos

• Desativar Análise Automática na Configuração para evitar que a análise automática de acessibilidade comece no início do seu conjunto de testes.
• Ativar Análise Automática quando você atingir a parte do seu conjunto de testes que deseja testar.
• Desativar Análise Automática via Chamada para desabilitar a verificação de acessibilidade para partes do conjunto de testes que você não deseja testar por erros de acessibilidade.

Como Usar o Modo Manual

Você pode desativar a análise automática na sua configuração (veja Desativar Análise Automática na Configuração abaixo).

A análise da página é controlada por três métodos no Controller objeto ou pelos comandos equivalentes no Cypress.

1. analyze() (no Cypress: cy.axeWatcherAnalyze()) para realizar uma análise da página atual.
2. start() (no Cypress: cy.axeWatcherStart()) para habilitar a análise automática de acessibilidade.
3. stop() (no Cypress: cy.axeWatcherStop()) para desativar a análise automática de acessibilidade.

Obtendo um Objeto Controller

(JavaScript/TypeScript) Para obter informações sobre como obter um Controller objeto, veja passo quatro da página de instruções do seu framework de teste:

JavaScript:

• Playwright
• Puppeteer
• WebdriverIO
• TestRunner do WebdriverIO
• WebDriverJS

TypeScript:

• Playwright
• Puppeteer
• WebdriverIO
• TestRunner do WebdriverIO
• WebDriverJS

(Java) Para Java, veja passo três da página de instruções do framework de teste. Passo quatro mostra como converter o wrappedDriver para chamar o seu flush() método:

• Selenium

Cypress

(JavaScript/TypeScript) Para Cypress, você pode usar o cy objeto global com estes comandos equivalentes:

Teste com Playwright

(JavaScript/TypeScript) Para o Teste com Playwright, o Controller objeto (PlaywrightController) pode ser obtido a partir de page, que contém um axeWatcher objeto. Você pode usar o axeWatcher objeto para invocar os Controller métodos (exemplo abaixo em TypeScript):

import { test, expect } from './fixtures'

test('example test', async ({ page }) => {
  await page.goto('https://example.com')
  await page.axeWatcher.analyze()
})

Desativar Análise Automática na Configuração

Você pode desativar o teste automático de acessibilidade

• (JavaScript/TypeScript) Definindo a autoAnalyze propriedade no objeto de configuração do axe para false.
• (Java) Chamando o setAutoAnalyze() método com false.

(JavaScript/TypeScript) Por exemplo, você define autoAnalyze para false em sua configuração (a linha está destacada no exemplo de JavaScript do Cypress abaixo):

const { defineConfig } = require('cypress');
const { cypressConfig } = require('@axe-core/watcher/cypress/config');

const API_KEY = process.env.API_KEY
const PROJECT_ID = process.env.PROJECT_ID

module.exports = defineConfig(  
  cypressConfig({
    axe: {
      apiKey: API_KEY,      projectId: PROJECT_ID,
      autoAnalyze: false
    },
    // Your existing Cypress configuration code here
  })
);

Desativar Análise Automática por Meio de uma Chamada

Com o Cypress, você pode usar o comando axeWatcherStop() :

cy.axeWatcherStop()

(JavaScript/TypeScript) As outras integrações de teste usam o método stop() no seu objeto Controller:

await controller.stop()

(Java) Na integração Java Watcher, você usa o AxeWatcherController.stop() método.

Veja Obtendo um Objeto Controller para mais informações sobre como obter um objeto controller para o seu framework de teste.

Analisar Páginas Manualmente

Após desativar a análise automática, você pode adicionar chamadas para (JavaScript/TypeScript) axeWatcherAnalyze() (para o Cypress) ou analyze() (com as outras integrações de teste). (Java) Para o Java, você usa o método AxeWatcherController.analyze()](wa-java-watchercontroller#analyze).

Por exemplo, para o Cypress:

describe('My Login Application', () => {
  it('should login with valid credentials', () => {
    cy.visit('https://the-internet.herokuapp.com/login')
      // Analyze the page.
      .axeWatcherAnalyze()      .get('#username')
      .type('tomsmith')
      .get('#password')
      .type('SuperSecretPassword!')
      .get('button[type="submit"]')
      .click()
      .wait(1000)
      // Analyze the page.
      .axeWatcherAnalyze()      // Restart automatic axe analysis.
      .axeWatcherStart()
      .get('#flash')
      .should('exist')
  })
})

Veja Obtendo um Objeto Controller para mais informações sobre como obter um objeto controller para o seu framework de teste.

Ativar Análise Automática

Com o Cypress, você pode usar o comando axeWatcherStart :

cy.axeWatcherStart()

As outras integrações de teste usam o método start no seu objeto Controller:

await controller.start()

Veja Obtendo um Objeto Controller para mais informações sobre como obter um objeto controller para o seu framework de teste.

Executar o Watcher Apenas em Execuções de Teste Específicas

Testes de ponta a ponta podem ser caros em termos de tempo ou custos de computação em nuvem. Você pode não querer que o Watcher analise páginas em todos os commits ou em todas as execuções de teste, apenas quando você explicitamente desejar uma verificação de acessibilidade. Você pode controlar a análise por trás de uma variável de ambiente passando o valor da variável para autoAnalyze. Isso lhe dá dois comandos de teste distintos: um sem análise e outro com análise.

(JavaScript/TypeScript) Por exemplo, em uma configuração do Cypress:

const { defineConfig } = require('cypress')
const { cypressConfig } = require('@axe-core/watcher/cypress/config')

const API_KEY = process.env.API_KEY
const PROJECT_ID = process.env.PROJECT_ID
const ACCESSIBILITY_TESTING = process.env.ACCESSIBILITY_TESTING === 'true'

module.exports = defineConfig(
  cypressConfig({
    axe: {
      apiKey: API_KEY,
      projectId: PROJECT_ID,
      autoAnalyze: ACCESSIBILITY_TESTING
    },
    // Your existing Cypress configuration code here
  })
)

Adicione dois scripts ao seu package.json, um com a variável definida, outro sem:

{
  "scripts": {
    "test:e2e": "cypress run",
    "test:e2e:accessibility": "ACCESSIBILITY_TESTING=true cypress run"
  }
}

No Windows, use cross-env para definir variáveis de ambiente de uma forma multiplataforma. Você pode escolher qualquer nome de variável de ambiente; ACCESSIBILITY_TESTING é apenas um exemplo.

A mesma abordagem é aplicada a outros frameworks de teste JavaScript e TypeScript: leia a variável no seu arquivo de configuração e passe seu valor booleano para autoAnalyze. (Java) Usuários de Java podem passar o valor para setAutoAnalyze().

Veja Também

• (JavaScript/TypeScript) Para dois exemplos funcionais de testes em modo manual (para Cypress e Playwright), veja os seguintes exemplos no exemplos-watcher repositório no GitHub:
  • Para Cypress, veja modo manual do Cypress
  • Para Playwright, veja modo manual do Playwright