Controla tus escaneos

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

El modo manual de Watcher te permite elegir cuándo o cuáles de las páginas de tu sitio se analizan para detectar problemas de accesibilidad

Not for use with personal data

De forma predeterminada, en lo que se conoce como modo automático, Axe Watcher determina automáticamente cuándo analizar una página web (ya sea que la visite su suite de pruebas o basado en cambios detectados en el DOM de la página). A veces, este análisis automático da como resultado un comportamiento que no es compatible con los objetivos de su organización: analizar demasiadas páginas (páginas que no le importan o páginas que pertenecen a otros departamentos en su organización). Puede desactivar el modo automático, lo que le permitirá determinar cuándo (o si) analizar una página web (conocido como modo manual).

Escenarios

Escaneo de Partes de un Sitio Web

Puedes usar el modo manual para escanear solo una parte de un sitio web. Por ejemplo, si tu equipo es responsable de la funcionalidad del carrito de compras en tu sitio pero tu suite de pruebas necesita visitar páginas del catálogo (que no son responsabilidad de tu equipo) para añadir productos al carrito, probablemente desees evitar probar la accesibilidad de las páginas del catálogo. Una vez que hayas alcanzado la página del carrito de compras en tu suite de pruebas, puedes reactivar el análisis automático. Luego, cuando las pruebas del carrito de compras estén completas, puedes deshabilitar el análisis automático nuevamente.

Siguientes pasos

Carga de Contenido Dinámico

Puedes usar el modo manual para evitar probar páginas con secuencias de carga complejas. Si la página que deseas probar carga dinámicamente muchos recursos en segundo plano, puedes desactivar el modo automático hasta que se haya cargado por completo. Esto limitará los problemas de accesibilidad a aquellos que existen solo una vez que la página se haya cargado completamente. También evitaría las verificaciones de accesibilidad durante las animaciones de carga u otras interfaces de usuario de carga.

Siguientes pasos

Captura de Estados Específicos de la Página

Si quieres asegurarte de que se escanee un estado de la página específico, puedes activar manualmente un análisis de accesibilidad una vez que hayas configurado tu página.

Siguientes pasos

Limitación del Alcance de una Gran Suite de Pruebas

Al deshabilitar el análisis automático, puedes usar una suite de pruebas más grande y más completa, pero limitar las pruebas de accesibilidad solo a una parte de ella. En este caso, no necesitas dividir tu suite de pruebas más grande en suites de pruebas más pequeñas y solo probar la accesibilidad en las suites de pruebas que te importan.

Siguientes pasos

Cómo Usar el Modo Manual

Puedes deshabilitar el análisis automático en tu configuración (consulta Desactivar el Análisis Automático en la Configuración a continuación).

El análisis de la página se controla mediante tres métodos en el objeto Controller o los comandos equivalentes en Cypress.

  1. analyze() (en Cypress: cy.axeWatcherAnalyze()) para realizar un análisis de la página actual.
  2. start() (en Cypress: cy.axeWatcherStart()) para habilitar el análisis automático de accesibilidad.
  3. stop() (en Cypress: cy.axeWatcherStop()) para deshabilitar el análisis automático de accesibilidad.

Obteniendo un Objeto Controlador

(JavaScript/TypeScript) Para obtener información sobre cómo obtener un objeto Controller, consulta el paso cuatro de la página de instrucciones de tu framework de pruebas:

JavaScript:

TypeScript:

(Java) Para Java, consulte paso tres en la página de instrucciones del marco de pruebas. Paso cuatro muestra cómo convertir el wrappedDriver para llamar a su método flush():

Cypress

(JavaScript/TypeScript) Para Cypress, puede utilizar el objeto global cy con estos comandos equivalentes:

Método del controlador Comando de Cypress
analyse() axeWatcherAnalyze()
flush() axeWatcherFlush()
start() axeWatcherStart()
stop() axeWatcherStop()

Prueba de Playwright

(JavaScript/TypeScript) Para Playwright Test, el objeto Controller (PlaywrightController) se puede obtener de page, que contiene un objeto axeWatcher. Puede usar el objeto axeWatcher para invocar los métodos de Controller (el ejemplo a continuación está en TypeScript):

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

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

Desactivar el Análisis Automático en la Configuración

Puede desactivar las pruebas automáticas de accesibilidad mediante

(JavaScript/TypeScript) Por ejemplo, establezca autoAnalyze en false en su configuración (la línea está resaltada en el ejemplo de JavaScript de Cypress a continuación):

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
  })
);

Desactivar el Análisis Automático mediante una Llamada

Con Cypress, puede utilizar el comando axeWatcherStop():

cy.axeWatcherStop()

(JavaScript/TypeScript) Las otras integraciones de prueba usan el método stop() en su objeto Controller:

await controller.stop()

(Java) En la integración de Java Watcher, utiliza el método AxeWatcherController.stop().

Consulte Obteniendo un Objeto Controlador para más información sobre cómo obtener un objeto controlador para su marco de pruebas.

Analizar Páginas Manualmente

Después de desactivar el análisis automático, puede añadir llamadas a (JavaScript/TypeScript) axeWatcherAnalyze() (para Cypress) o analyze() (con las otras integraciones de prueba). (Java) Para Java, utilice el método AxeWatcherController.analyze()](wa-java-watchercontroller#analyze).

Por ejemplo, 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')
  })
})

Consulte Obteniendo un Objeto Controlador para más información sobre cómo obtener un objeto controlador para su marco de pruebas.

Activar el Análisis Automático

Con Cypress, puede utilizar el comando axeWatcherStart:

cy.axeWatcherStart()

Las otras integraciones de prueba usan el método start en su objeto Controller:

await controller.start()

Consulte Obteniendo un Objeto Controlador para más información sobre cómo obtener un objeto controlador para su marco de pruebas.

Ejecutar Watcher Solo en Pruebas Específicas

Las pruebas de extremo a extremo pueden ser costosas en tiempo o en costos de computación en la nube. Es posible que no desee que Watcher analice páginas en cada confirmación o ejecución de prueba, solo cuando explícitamente desee un escaneo de accesibilidad. Puede controlar el análisis con una variable de entorno pasando el valor de la variable a autoAnalyze. Esto le da dos comandos de prueba distintos: uno sin análisis y otro con él.

(JavaScript/TypeScript) Por ejemplo, en una configuración de 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
  })
)

Agregue dos scripts a su package.json, uno con la variable establecida, otro sin ella:

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

En Windows, use cross-env para establecer variables de entorno de manera multiplataforma. Puede elegir cualquier nombre para la variable de entorno; ACCESSIBILITY_TESTING es solo un ejemplo.

El mismo enfoque se aplica a otros marcos de prueba de JavaScript y TypeScript: lee la variable en tu archivo de configuración y pasa su valor booleano a autoAnalyze. Los usuarios de Java pueden pasar el valor a setAutoAnalyze().

note

Este enfoque controla si Watcher analiza páginas, no si Watcher está inicializado. Parte de la configuración de Watcher aún ocurre en tu entorno de prueba independientemente del valor de la variable de entorno.

Ver también

Is this page helpful?

Help us improve this page

Still need help?