Solución de Problemas

Watcher Solo Soporta Chrome para Pruebas o Chromium

Aunque el sitio web de axe Developer Hub soporta varios navegadores, el paquete Watcher solo soporta Google Chrome para Pruebas o Chromium. Problemas que podrías encontrar:

• Si usas la versión 139 de Chrome o posterior, recibirás un error de Watcher. Usa Chrome para Pruebas o Chromium en su lugar.
• Si usas el navegador Electron de Cypress, recibirás un error. Especifica el navegador como Chrome para Pruebas o Chromium cuando invoques Cypress; de lo contrario, el predeterminado será el navegador Electron. Consulta Iniciando Navegadores en la documentación de Cypress para más información.

Si usas WebdriverIO, WebDriverJS o Java Selenium, debes configurar tu entorno de pruebas para usar Chrome para Pruebas explícitamente. Consulta Usar Chrome para Pruebas para los pasos de instalación y ejemplos de configuración específicos de cada plataforma.

Consulta Plataformas de Pruebas Automatizadas para más información sobre el software compatible con Watcher.

Resultados Incompletos

Si tu suite de pruebas utiliza múltiples ejecuciones de pruebas en paralelo y utiliza el mismo ID de compilación no nulo, los resultados de cada ejecución de pruebas reemplazarán a los de otras ejecuciones para el mismo SHA de commit de Git, dando resultados incompletos. Debes asegurarte de que cada ejecución de pruebas use el mismo ID de compilación no nulo.

Normalmente configuras el ID de compilación en tu AxeConfiguration.

Para más información sobre el uso de ejecuciones de pruebas paralelas con diferentes plataformas CI/CD, consulta Ejecución de Pruebas en Paralelo.

Errores de Accesibilidad Duplicados o Conteo de Nuevos Problemas Incorrecto

Si tu sitio web utiliza IDs o nombres de clase dinámicos que cambian cada vez que se actualiza la página, probablemente verás errores de accesibilidad duplicados, especialmente problemas marcados como nuevos cuando ejecuciones de pruebas anteriores presentan el mismo problema en el mismo elemento. (Axe Developer Hub usa IDs y clases para identificar el mismo elemento entre ejecuciones de pruebas). Para resolver este problema, debes ajustar la ancestry propiedad en el objeto runOptions en tu configuración a true. El siguiente ejemplo muestra cómo configurar la opción en tu configuración:

axe: {
  runOptions: {
    ancestry: true
  }
}

Consulta Uso de Selectores Dinámicos para más orientación sobre el uso de selectores dinámicos.

Consulta (JavaScript/TypeScript) runOptions o (Java) AxeWatcherOptions.setRunOptions() para más información.

Versión antigua de @axe-core/watcher

Si estás usando la versión 3.18.0 o anterior de @axe-core/watcher, recibirás este mensaje de advertencia:

Axe Developer Hub ahora se adhiere a los ajustes definidos en Configuración de axe, y las ejecuciones de prueba creadas por versiones de @axe-core/watcher versión 3.18.0 o anterior generan sesiones que no eran conscientes de los ajustes globales en la Configuración de axe. Deberías actualizar tu paquete @axe-core/watcher y volver a ejecutar tus pruebas para crear sesiones que sigan la Configuración de axe de tu empresa. Ver Uso de configuraciones globales.

Método del controlador agotando el tiempo

(Solo en JavaScript o TypeScript) Recibirás un mensaje similar al siguiente si las llamadas a los métodos del controlador (definidos en la Controller clase base abstracta como analyze(), flush(), start(), y stop()) o comandos personalizados de Cypress se agotan:

Error: Watcher could not send results to the server. To resolve this problem, adjust your `timeout.flush` property within your configuration or see https://docs.deque.com/developer-hub/wa-troubleshooting for more troubleshooting.

El método Controller especificado (aquí, el método flush()) requirió más tiempo que el predeterminado para completarse y se agotó. Puedes cambiar el tiempo predeterminado agregando un timeout objeto a tu configuración:

axe: {
  timeout: {
    flush: 10000
  }
}

Ver Configurar tiempos de espera para obtener información sobre el uso de tiempos de espera.

Ver Timeouts Interfaz y timeouts para más información. Los valores de tiempo de espera predeterminados se muestran en la tabla bajo la Timeouts Interfaz.

Resultados no aparecen

Si has ejecutado tu suite de pruebas y no aparecen resultados en axe Developer Hub para un proyecto determinado, la causa podría encontrarse entre las razones en las siguientes secciones:

No configurar axe Watcher

Tu suite de pruebas modificada debe llamar a la función de configuración adecuada para tu marco de pruebas antes de ejecutar tus pruebas. Si no configuras axe Watcher correctamente, recibirás un mensaje indicando que necesitas configurarlo. Por ejemplo, si olvidas configurar axe Watcher con Cypress, verás este mensaje al ejecutar tu suite de pruebas:

Cypress is not configured for axe Watcher. Please ensure that axe Watcher's cypressConfig() is invoked within Cypress's defineConfig() in your cypress.config.js. All tests will fail with this error.

Consulta las instrucciones de configuración para ejemplos de configuración para tu lenguaje y marco de pruebas del navegador.

No vaciar resultados

Necesitas llamar a la flush() función (o al comando personalizado axeWatcherFlush() en Cypress) para enviar los resultados recopilados de vuelta a los servidores de Deque para que puedan ser presentados en el sitio web de axe Developer Hub. Normalmente, llamas a la flush() función en el gancho de limpieza de tu plataforma de automatización.

Por ejemplo, en el archivo support/e2e.js en Cypress agregas la llamada a afterEach():

// Flush axe-watcher results after each test.
afterEach(() => {
  cy.axeWatcherFlush()
})

Usando la opción --incognito

No puedes usar la opción --incognito de la línea de comandos con Chrome; de lo contrario, tus pruebas fallarán silenciosamente. Si estás usando el modo incógnito para evitar escribir archivos en caché en el disco (los archivos en caché se mantienen solo en la memoria en el modo incógnito), utiliza los métodos de caché de tu suite de pruebas en su lugar.

No configurar las variables de entorno requeridas

Si estás experimentando con los ejemplos en el repositorio de watcher-examples en GitHub, ten en cuenta que los ejemplos utilizan variables de entorno para configurar la clave API y el ID de proyecto, API_KEY y PROJECT_ID.

Prueba ejecutándose demasiado rápido

Tus pruebas podrían ejecutarse demasiado rápido, descargando la página y liberando sus recursos antes de que Watcher pueda analizarla. Para solucionar este problema, puedes agregar un retraso al final de la prueba para permitir tiempo para analizar la página.

Por ejemplo, en Cypress, puedes agregar un retraso de 10 segundos (10,000 milisegundos) con el método cy.wait() :

describe('Visitor', () => {
  it('should visit example.com', () => {
    cy.visit('https://www.example.com')
    cy.wait(10000);  })
})

Clave API faltante o inválida

Una clave API inválida o faltante aparece como un archivo de configuración inválido en Cypress. El seguimiento de pila revelará si es inválida o está ausente. Una clave faltante resulta en lo siguiente:

AssertionError [ERR_ASSERTION]: API key is required
    at validateApiKey ...

(Se eliminaron muchas líneas del seguimiento de pila para mayor brevedad.)

Una clave inválida resulta en el siguiente seguimiento de pila (abreviado):

Error: Server responded to https://axe.deque.com/api/api-keys/test/validate/axe-devtools-watcher with status code 404:
{"error":"Invalid API key"}
    at Response.getBody
...

Ayuda

Si no puedes resolver tu problema, por favor envíanos un correo electrónico para que podamos ayudarte.