Controla tus Escaneos

Por defecto, en lo que se conoce como modo automático, axe Watcher determina automáticamente cuándo analizar una página web (ya sea porque la visita tu suite de pruebas o en función de los cambios detectados en el DOM de la página). A veces, este análisis automático resulta en un comportamiento que no es compatible con los objetivos de tu organización: analizar demasiadas páginas (páginas que no te interesan o que pertenecen a otros departamentos de tu organización). Puedes desactivar el modo automático, lo que te permitirá decidir cuándo (o si) analizar una página web (conocido como modo manual).

Escenarios

Escanear 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 de catálogo (que tu equipo no posee) para agregar productos al carrito, probablemente quieras evitar probar la accesibilidad de las páginas de catálogo. Una vez que llegues a la página del carrito de compras en tu suite de pruebas, puedes volver a habilitar el análisis automático. Luego, cuando las pruebas del carrito de compras estén completas, puedes deshabilitar el análisis automático nuevamente.

Próximos Pasos

• Desactivar el Análisis Automático en la Configuración para evitar probar las páginas de catálogo.
• Habilitar el Análisis Automático para tu página del carrito de compras.
• Desactivar el Análisis Automático mediante un Llamado al final de probar tu página del carrito de compras para evitar que se prueben las páginas visitadas después de la página del carrito.

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 esté completamente cargada. Esto limitará los problemas de accesibilidad a aquellos que existen solo una vez que la página esté completamente cargada. También evitaría verificaciones de accesibilidad durante las animaciones de carga u otras interfaces de usuario de carga.

Próximos Pasos

• Desactivar el Análisis Automático en la Configuración para que las animaciones de carga y la interfaz de usuario no se prueben por errores de accesibilidad.
• Habilitar el Análisis Automático para reanudar la prueba automática de accesibilidad una vez que la página esté completamente cargada.

Capturar Estados Específicos de Página

Si quieres asegurarte de que un estado específico de la página sea escaneado, puedes activar manualmente un análisis de accesibilidad después de haber configurado tu página.

Próximos Pasos

• Desactivar el Análisis Automático en la Configuración para evitar que se realice un análisis de accesibilidad antes de que la página esté en el estado que requieres.
• Analizar Páginas Manualmente para probar el estado específico de la página que te interesa.

Limitar el Alcance de una Gran Suite de Pruebas

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

Próximos Pasos

• Desactivar el Análisis Automático en la Configuración para evitar que el análisis automático de accesibilidad comience al inicio de tu suite de pruebas.
• Habilitar el Análisis Automático cuando llegues a la parte de tu suite de pruebas que te gustaría probar.
• Desactivar el Análisis Automático mediante un Llamado para desactivar la prueba de accesibilidad para partes de la suite de pruebas que no te interesa probar por errores de accesibilidad.

Cómo Usar el Modo Manual

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

El análisis de páginas se controla mediante tres métodos en el Controller objeto 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 de Controlador

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

JavaScript:

• Playwright
• Puppeteer
• WebdriverIO
• WebdriverIO TestRunner
• WebDriverJS

TypeScript:

• Playwright
• Puppeteer
• WebdriverIO
• WebdriverIO TestRunner
• WebDriverJS

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

• Selenium

Cypress

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

Prueba de Playwright

(JavaScript/TypeScript) Para la prueba de Playwright, el Controller objeto (PlaywrightController) puede obtenerse de page, que contiene un axeWatcher objeto. Puede usar el axeWatcher objeto para invocar los Controller métodos (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()
})

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

Puede deshabilitar las pruebas automáticas de accesibilidad

• (JavaScript/TypeScript) Estableciendo la propiedad autoAnalyze en el objeto de configuración de axe a false.
• (Java) Llamando al setAutoAnalyze() método con false.

(JavaScript/TypeScript) Por ejemplo, estableces autoAnalyze en false en tu 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, puedes usar el comando axeWatcherStop() :

cy.axeWatcherStop()

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

await controller.stop()

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

Consulta Obtención de un Objeto Controller para más información sobre cómo obtener un objeto controller para tu marco de pruebas.

Analizar Páginas Manualmente

Después de haber desactivado el análisis automático, puedes añadir llamadas a (JavaScript/TypeScript) axeWatcherAnalyze() (para Cypress) o analyze() (con las otras integraciones de prueba). (Java) Para Java, usas 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')
  })
})

Consulta Obtención de un Objeto Controller para más información sobre cómo obtener un objeto controller para tu marco de pruebas.

Activar el Análisis Automático

Con Cypress, puedes usar el comando axeWatcherStart :

cy.axeWatcherStart()

Las otras integraciones de prueba utilizan el método start en tu objeto Controller:

await controller.start()

Consulta Obtención de un Objeto Controller para más información sobre cómo obtener un objeto controller para tu marco de pruebas.

Ejecutar Watcher Solo en Ejecuciones de Prueba Específicas

Las pruebas de extremo a extremo pueden ser costosas en tiempo o en costos de computación en la nube. Quizás no desees que Watcher analice páginas en cada commit o en cada ejecución de prueba, solo cuando explícitamente desees un escaneo de accesibilidad. Puedes restringir el análisis tras una variable de entorno pasando el valor de la variable a autoAnalyze. Esto te 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
  })
)

Añade dos scripts a tu package.json, uno con la variable configurada, otro sin:

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

En Windows, utiliza cross-env para configurar variables de entorno de manera multiplataforma. Puedes 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. (Java) Los usuarios de Java pueden pasar el valor a setAutoAnalyze().

Consultar También

• (JavaScript/TypeScript) Para dos ejemplos funcionales de pruebas en modo manual (para Cypress y Playwright), consulta los siguientes ejemplos en los ejemplos-watcher repositorio en GitHub:
  • Para Cypress, consulte Cypress manual-mode
  • Para Playwright, consulte Playwright manual-mode