Controle Seus Scans

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

O modo manual do Watcher permite que você escolha quando ou quais páginas do seu site são analisadas para problemas de acessibilidade

Not for use with personal data

Por padrão, no que é conhecido como modo automático, o Axe Watcher determina automaticamente quando analisar uma página da web (seja quando ela é 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 interessam ou páginas 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 da web deve ser analisada (conhecido como modo manual).

Cenários

Escaneando Partes de um Site

Você pode usar o modo manual para escanear apenas uma parte de um site. Por exemplo, se sua equipe for responsável pela funcionalidade do carrinho de compras no seu site, mas seu conjunto de testes precisar 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 do catálogo. Assim que você chegar à página do carrinho de compras em seu conjunto de testes, poderá reativar a análise automática. Então, quando os testes do carrinho de compras forem concluídos, você poderá desativar a análise automática novamente.

Próximos Passos

Carregamento de Conteúdo Dinâmico

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 dinamicamente muitos recursos em segundo plano, pode desativar o modo automático até que ela esteja totalmente carregada. Isso limitará os problemas de acessibilidade àqueles 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 carregamento.

Próximos Passos

Capturando Estados Específicos da Página

Se você quiser garantir que um estado da página específico seja escaneado, pode disparar manualmente uma análise de acessibilidade depois de ter configurado sua página.

Próximos Passos

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, não é necessário dividir seu conjunto de testes maior em conjuntos menores e testar acessibilidade apenas nos conjuntos de testes que interessam.

Próximos Passos

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 objeto Controller 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 ativar 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 informações sobre como obter um objeto Controller, consulte a etapa quatro da página de instruções do seu framework de teste:

JavaScript:

TypeScript:

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

Cypress

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

Método do Controller Comando do Cypress
analyse() axeWatcherAnalyze()
flush() axeWatcherFlush()
start() axeWatcherStart()
stop() axeWatcherStop()

Teste Playwright

(JavaScript/TypeScript) Para o Teste Playwright, o objeto Controller (PlaywrightController) pode ser obtido de page, que contém um objeto axeWatcher. Você pode usar o objeto axeWatcher para invocar os métodos Controller (o exemplo abaixo está 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 de acessibilidade automático

(JavaScript/TypeScript) Por exemplo, defina autoAnalyze para false na 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 via Chamada

Com 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 método AxeWatcherController.stop().

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

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

Por exemplo, para 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 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.

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

Testes de ponta a ponta podem ser onerosos em termos de tempo ou custos de computação em nuvem. Você pode não querer que o Watcher analise páginas a cada commit ou execução de teste, apenas quando deseja explicitamente uma verificação de acessibilidade. Você pode controlar a análise por meio 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 configurada, outro sem:

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

No Windows, use cross-env para configurar variáveis de ambiente de maneira cross-platform. Você pode escolher qualquer nome de variável de ambiente; ACCESSIBILITY_TESTING é apenas um exemplo.

A mesma abordagem se aplica 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().

note

Esta abordagem controla se o Watcher analisa as páginas, não se o Watcher é inicializado. Algumas configurações do Watcher ainda ocorrem no seu ambiente de teste, independentemente do valor da variável de ambiente.

Veja também

Is this page helpful?

Help us improve this page

Still need help?