Risoluzione dei problemi

Watcher supporta solo Chrome per Testing o Chromium

Anche se il sito web di Axe Developer Hub supporta diversi browser, il pacchetto Watcher supporta solo Google Chrome per Testing o Chromium. Problemi che potresti incontrare:

• Se utilizzi la versione 139 o superiore di Chrome, riceverai un errore da Watcher. Usa invece Chrome per Testing o Chromium.
• Se utilizzi il browser Electron di Cypress, riceverai un errore. Specifica il browser come Chrome per Testing o Chromium quando avvii Cypress; altrimenti, predefinito sarà il browser Electron. Vedi Avvio dei Browser nella documentazione di Cypress per maggiori informazioni.

Se utilizzi WebdriverIO, WebDriverJS o Java Selenium, devi configurare il tuo setup di test per usare esplicitamente Chrome per Testing. Vedi Utilizzare Chrome per Testing per i passaggi di installazione e gli esempi di configurazione specifici per la piattaforma.

Vedi Piattaforme di Test Automatizzate per ulteriori informazioni sul software supportato con Watcher.

Risultati Incompleti

Se la tua suite di test utilizza più test runner che operano in parallelo e usano lo stesso ID build non nullo, i risultati di ciascun test runner sostituiranno quelli di altri test runner per lo stesso SHA di commit Git, dando risultati incompleti. Devi assicurarti che ogni test runner usi lo stesso ID build non nullo.

Di solito imposti l'ID build nel tuo AxeConfiguration.

Per ulteriori informazioni sull'utilizzo dei test runner paralleli con le diverse piattaforme CI/CD, vedi Esecuzione dei Test in Parallelo.

Errori di Accessibilità Duplicati o Conteggio Errato delle Nuove Problematiche

Se il tuo sito web utilizza ID dinamici o nomi di classe che cambiano ogni volta che la pagina viene aggiornata, probabilmente vedrai errori di accessibilità duplicati, in particolare problemi contrassegnati come nuovi quando i test precedenti presentano lo stesso problema sullo stesso elemento. (Axe Developer Hub utilizza ID e classi per identificare lo stesso elemento tra i test). Per risolvere questo problema, è necessario impostare la proprietà ancestry nell'oggetto runOptions nella tua configurazione a true. L'esempio qui sotto mostra come impostare l'opzione nella tua configurazione:

axe: {
  runOptions: {
    ancestry: true
  }
}

Vedi Utilizzo dei Selettori Dinamici per ulteriori indicazioni sull'uso dei selettori dinamici.

Vedi (JavaScript/TypeScript) runOptions o (Java) AxeWatcherOptions.setRunOptions() per ulteriori informazioni.

Vecchia versione di @axe-core/watcher

Se stai utilizzando la versione 3.18.0 o precedente di @axe-core/watcher, riceverai questo messaggio di avviso:

Axe Developer Hub ora segue le impostazioni definite in Configurazione axe, e i test eseguiti con versioni di @axe-core/watcher 3.18.0 o precedenti generano sessioni che non erano a conoscenza delle impostazioni globali in Configurazione axe. Dovresti aggiornare il tuo pacchetto @axe-core/watcher e rieseguire i tuoi test per creare sessioni che seguano la Configurazione axe della tua azienda. Vedi Utilizzo delle configurazioni globali.

Timeout del metodo Controller

(Solo JavaScript o TypeScript) Riceverai un messaggio simile al seguente se le chiamate ai metodi Controller (definiti nella Controller classe base astratta come analyze(), flush(), start(), e stop()) o ai comandi personalizzati Cypress vanno in timeout:

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.

Il metodo specificato Controller (qui, il metodo flush() ) ha richiesto più del tempo predefinito per completarsi ed è andato in timeout. Puoi modificare il tempo predefinito aggiungendo un timeout oggetto alla tua configurazione:

axe: {
  timeout: {
    flush: 10000
  }
}

Vedi Impostare i timeout per informazioni sull'utilizzo dei timeout.

Vedi Timeouts Interfaccia e timeouts per maggiori informazioni. I valori di timeout predefiniti sono mostrati nella tabella sotto l' Timeouts Interfaccia.

Risultati che Non Compaiono

Se hai eseguito la tua suite di test e nessun risultato compare in axe Developer Hub per un progetto specifico, la causa potrebbe trovarsi tra i motivi nelle sezioni seguenti:

Non Configurare axe Watcher

La tua suite di test modificata deve chiamare la funzione di configurazione appropriata per il tuo framework di test prima di eseguire i tuoi test. Se non configuri correttamente axe Watcher, riceverai un messaggio che ti avvisa di configurare axe Watcher. Ad esempio, se dimentichi di configurare axe Watcher con Cypress, vedrai questo messaggio quando esegui la tua suite di test:

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 le istruzioni di configurazione per esempi di configurazione per il tuo linguaggio e framework di test browser.

Non Eliminare i Risultati

Devi chiamare la funzione flush() (o il comando personalizzato axeWatcherFlush() in Cypress) per inviare i risultati raccolti ai server di Deque in modo che i risultati possano essere presentati sul sito axe Developer Hub. Di solito, chiami la funzione flush() nel hook di cleanup della tua piattaforma di automazione.

Ad esempio, nel file support/e2e.js in Cypress aggiungi la chiamata a afterEach():

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

Utilizzo dell'opzione --incognito

Non puoi usare l'opzione da linea di comando con Chrome; altrimenti, i tuoi test falliranno silenziosamente. Se stai usando la modalità incognito per evitare di scrivere file cache su disco (i file cache sono mantenuti solo in memoria nella modalità incognito), usa invece i metodi di caching della tua suite di test. --incognito command-line option with Chrome; otherwise, your tests will silently fail. If you're using incognito mode to avoid writing cached files to disk (cached files are kept in memory only in incognito mode), use your testing suite's caching methods instead.

Non impostare le variabili d'ambiente richieste

Se stai sperimentando con gli esempi nel repository watcher-examples su GitHub, nota che gli esempi usano le variabili d'ambiente per impostare la chiave API e l'ID del progetto, API_KEY e PROJECT_ID.

Test eseguito troppo velocemente

I tuoi test potrebbero essere eseguiti troppo velocemente, scaricando la pagina e liberando le sue risorse prima che Watcher possa analizzarla. Per risolvere questo problema, puoi aggiungere un ritardo alla fine del test per permettere l'analisi della pagina.

Ad esempio, in Cypress, puoi aggiungere un ritardo di 10 secondi (10.000 millisecondi) con il metodo cy.wait() :

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

Chiave API mancante o non valida

Una chiave API non valida o mancante appare come un file di configurazione non valido in Cypress. Il traceback rivelerà se è non valida o mancante. Una chiave **mancante** risulta nel seguente:

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

(Molte righe del traceback sono state eliminate per brevità.)

Una chiave **non valida** risulta nel seguente traceback (accorciato):

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
...

Aiuto

Se non riesci a risolvere il tuo problema, per favore contattaci via email così possiamo aiutarti.