Control del análisis de páginas

Normalmente, axe Developer Hub analiza automáticamente cada página visitada por su suite de pruebas (conocido como modo automático). A veces, este análisis automático da como resultado que se analicen demasiadas páginas, páginas que no le interesa que se analicen o páginas que pertenecen a otros departamentos de su organización (páginas sobre las que su equipo no tiene propiedad). Puede desactivar el modo automático, de modo que usted determine cuándo (o si) analizar cada página (conocido como modo manual).

Escenarios

Escaneo de partes de un sitio web

Puede utilizar el modo manual para escanear solo una parte de un sitio web. Por ejemplo, si su equipo posee la funcionalidad del carrito de compras en su sitio, pero su conjunto de pruebas necesita visitar páginas del catálogo (que su equipo no posee) para agregar productos al carrito, probablemente desee evitar probar la accesibilidad de las páginas del catálogo. Una vez que haya llegado a la página del carrito de compras en su conjunto de pruebas, puede volver a habilitar el análisis automático. Luego, cuando se completen las pruebas del carrito de compras, puede desactivar nuevamente el análisis automático.

Próximos pasos

• Deshabilitar análisis automático en la configuración para evitar probar las páginas del catálogo.
• Habilitar análisis automático para su página de carrito de compras.
• Deshabilitar el análisis automático mediante una llamada al final de la prueba de su página del carrito de compras para evitar que se prueben las páginas visitadas después de la página del carrito de compras.

Carga de contenido dinámico

Puede utilizar el modo manual para evitar probar páginas con secuencias de carga complejas. Si la página que desea probar carga dinámicamente muchos recursos en segundo plano, puede desactivar el modo automático hasta que se cargue por completo. Esto limitará los problemas de accesibilidad a aquellos que existan solo una vez que la página esté completamente cargada. También evitaría comprobaciones de accesibilidad durante la carga de animaciones u otras interfaces de usuario de carga.

Próximos pasos

• Deshabilitar el análisis automático en la configuración para que las animaciones de carga y la interfaz de usuario no se prueben para detectar errores de accesibilidad.
• Habilitar análisis automático para reanudar las pruebas de accesibilidad automáticas una vez que la página se haya cargado por completo.

Captura de estados de página específicos

Si desea asegurarse de que se escanee un estado de página específico, puede activar manualmente un análisis de accesibilidad después de haber configurado su página.

Próximos pasos

• Deshabilitar análisis automático en la configuración para evitar que se realice el análisis de accesibilidad antes de que la página esté en el estado requerido.
• Analizar páginas manualmente para probar el estado específico de la página que le interesa.

Limitar el alcance de un conjunto de pruebas grande

Al deshabilitar el análisis automático, puede utilizar un conjunto de pruebas más grande y completo, pero limitar las pruebas de accesibilidad a solo una parte de él. En este caso, no es necesario dividir el conjunto de pruebas más grande en conjuntos de pruebas más pequeños y solo probar la accesibilidad en los conjuntos de pruebas que le interesan.

Próximos pasos

• Deshabilitar el análisis automático en la configuración para evitar que el análisis automático de accesibilidad se inicie al comienzo de su conjunto de pruebas.
• Habilitar análisis automático cuando llegue a la parte de su conjunto de pruebas que desea probar.
• Deshabilitar el análisis automático mediante una llamada para deshabilitar las pruebas de accesibilidad para las partes del conjunto de pruebas que no desea probar para detectar errores de accesibilidad.

Cómo utilizar el modo manual

Puede desactivar el análisis automático en su configuración (consulte Deshabilitar el análisis automático en la configuración a continuación).

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

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

Obtención de un objeto controlador

Para obtener información sobre cómo obtener un Controlador, consulte el paso cuatro de la página de instrucciones de su framework de pruebas: **** ****

JavaScript:

• Playwright
• Puppeteer
• WebdriverIO
• Ejecutor de pruebas de WebdriverIO
• WebDriverJS

TypeScript:

• Playwright
• Puppeteer
• WebdriverIO
• WebdriverIO TestRunner
• WebDriverJS

Cypress

Para Cypress, puede utilizar el objeto global cy con estos comandos equivalentes:

Test de Playwright

Para Playwright Test, el objeto Controller (PlaywrightController) se puede obtener de página, que contiene un objeto axeWatcher . Puede utilizar el objeto axeWatcher para invocar los métodos 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()
})

Deshabilitar el análisis automático en la configuración

Cuando modificó su conjunto de pruebas para agregar pruebas de accesibilidad, necesitó crear un objeto de configuración axe . Puede deshabilitar las pruebas de accesibilidad automáticas configurando autoAnalyze como false en su objeto axe .

Por ejemplo, si establece 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');

const API_KEY = process.env.API_KEY

module.exports = defineConfig(  
  cypressConfig({
    axe: {
      apiKey: API_KEY,
      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()

Las otras integraciones de prueba utilizan el método stop() en su objeto Controlador:

await controller.stop()

Consulte Obtener un objeto controlador para obtener más información sobre cómo obtener un objeto controlador para su marco de prueba.

Analizar páginas manualmente

Después de haber deshabilitado el análisis automático, puede agregar llamadas a axeWatcherAnalyze() (para Cypress) o analyze() (con las otras integraciones de prueba). Por ejemplo, en 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 Obtener un objeto controlador para obtener más información sobre cómo obtener un objeto controlador para su marco de prueba.

Habilitar análisis automático

Con Cypress, puedes usar el comando axeWatcherStart :

cy.axeWatcherStart()

Las otras integraciones de prueba utilizan el método start en su objeto Controlador:

await controller.start()

Consulte Obtener un objeto controlador para obtener más información sobre cómo obtener un objeto controlador para su marco de prueba.

Consulte también

• Para ver dos ejemplos prácticos de pruebas en modo manual (para Cypress y Playwright), consulte los siguientes ejemplos en el repositorio watcher-examples en GitHub:
  • Para Cypress, consulte Modo manual de Cypress
  • Para Playwright, consulte Modo manual de Playwright
• En la Referencia de API, puede encontrar información de referencia sobre todas las API proporcionadas por el paquete @axe-core/watcher.