Solución de problemas

Watcher solo admite Chrome para pruebas o Chromium

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

• Si utilizas la versión 139 o posterior de Chrome, recibirás un error de Watcher. Utiliza Chrome para pruebas o Chromium en su lugar.
• Si utilizas el navegador Electron de Cypress, recibirás un error. Especifica el navegador como Chrome para pruebas o Chromium cuando invoques Cypress; de lo contrario, se establecerá por defecto en el navegador Electron. Consulta Iniciar navegadores en la documentación de Cypress para más información.

Consulta Plataformas de pruebas automatizadas para obtener más información sobre el software compatible con Watcher.

Resultados incompletos

Si tu suite de pruebas utiliza múltiples ejecutores de pruebas que se ejecutan en paralelo y usan el mismo ID de compilación no nulo, los resultados de cada ejecutor de pruebas reemplazarán a los de otros ejecutores para el mismo SHA del commit de Git, dando resultados incompletos. Debes asegurarte de que cada ejecutor use el mismo ID de compilación no nulo.

Sueleas establecer el ID de compilación en tu AxeConfiguration.

Para obtener más información sobre el uso de ejecutores de pruebas en paralelo con diferentes plataformas de CI/CD, consulta Ejecutar pruebas en paralelo.

Errores de accesibilidad duplicados o conteo incorrecto de nuevos problemas

Si tu sitio web utiliza IDs dinámicos o nombres de clases que cambian cada vez que se actualiza la página, es probable que veas errores de accesibilidad duplicados, especialmente problemas marcados como nuevos cuando ejecuciones de pruebas anteriores muestran el mismo problema en el mismo elemento. (Axe Developer Hub utiliza IDs y clases para identificar el mismo elemento entre ejecuciones de pruebas.) Para solucionar este problema, debes configurar la ancestry propiedad en el runOptions objeto en tu configuración a true. El ejemplo a continuación muestra cómo establecer 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:

El Centro de Desarrolladores de Axe ahora se adhiere a los ajustes definidos en ", "context": "paragraph Configuración de axe", "context": "link text, y las ejecuciones de prueba creadas por versiones de @axe-core/watcher 3.18.0 o anteriores generan sesiones que no eran conscientes de los ajustes globales en Configuración de axe. Debería actualizar su paquete @axe-core/watcher y volver a ejecutar sus pruebas para crear sesiones que sigan la Configuración de axe de su empresa. Vea ", "context": "paragraph Uso de Configuraciones Globales", "context": "link text.", "context": "paragraph

Tiempo de espera del método del controlador", "context": "heading level 2

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

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 ", "context": "paragraph Controller método especificado (aquí, el método ", "context": "paragraph flush()) requirió más tiempo del predeterminado para completarse y se agotó. Puede cambiar el tiempo predeterminado agregando un ", "context": "paragraph timeout objeto a su configuración:", "context": "paragraph

axe: {
  timeout: {
    flush: 10000
  }
}

Vea ", "context": "paragraph Configurar Tiempos de Espera", "context": "link text para obtener información sobre el uso de tiempos de espera.", "context": "paragraph

Vea ", "context": "paragraph Timeouts Interfaz", "context": "link text y ", "context": "paragraph timeouts para obtener más información. Los valores de tiempo de espera predeterminados se muestran en la tabla bajo la ", "context": "paragraph Timeouts Interfaz", "context": "link text.", "context": "paragraph

Resultados no aparecen", "context": "heading level 2

Si ha ejecutado su suite de pruebas y no aparecen resultados en el Centro de Desarrolladores de axe para un proyecto determinado, la causa podría encontrarse entre las razones de las siguientes secciones:", "context": "paragraph

No configurar axe Watcher", "context": "heading level 3

Su suite de pruebas modificada debe llamar a la ", "context": "paragraph función de configuración", "context": "link text adecuada para su marco de pruebas antes de ejecutar sus pruebas. Si no configura correctamente axe Watcher, recibirá un mensaje que le indicará que debe configurar axe Watcher. Por ejemplo, si olvida configurar axe Watcher con Cypress, verá este mensaje cuando ejecute su suite de pruebas:", "context": "paragraph

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.

Consulte las ", "context": "paragraph instrucciones", "context": "link text de configuración para ejemplos de configuración para su idioma y marco de pruebas de navegador.", "context": "paragraph

No vaciar los resultados", "context": "heading level 3

Necesita llamar a la ", "context": "paragraph flush() función (o al comando personalizado ", "context": "paragraph axeWatcherFlush() en Cypress) para enviar los resultados recopilados de vuelta a los servidores de Deque para que puedan ser presentados en el sitio web del Centro de Desarrolladores de axe. Por lo general, llama a la ", "context": "paragraph flush() función en el gancho de limpieza de la plataforma de automatización.", "context": "paragraph

Por ejemplo, en el archivo support/e2e.js en Cypress debe agregar la llamada a ", "context": "paragraph afterEach():", "context": "paragraph

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

Uso de la opción --incognito", "context": "heading level 3

No puede usar la ", "context": "paragraph --incognito opción de 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 almacenamiento en caché de tu suite de pruebas en su lugar.

No Configurar las Variables de Entorno Requeridas

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

La Prueba Se Ejecuta Demasiado Rápido

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

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

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 no válido en Cypress. La traza de la pila revelará si es inválida o está faltante. Una **faltante** clave da como resultado lo siguiente:

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

(Muchas líneas de la traza de pila fueron eliminadas por brevedad.)

Una clave **inválida** da como resultado la siguiente traza de pila (acortada):

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.