Iniziare con Axe Watcher
Come iniziare a usare Axe Watcher con le tue suite di test
Questa guida ti accompagnerà nell'impostazione di Axe Watcher per aggiungere test di accessibilità automatizzati alla tua suite di test end-to-end esistente.
Comprendere Watcher e Axe Developer Hub
Axe Watcher è una fonte di input per l'Axe Developer Hub che integri nella tua suite di test, mentre Axe Developer Hub è la piattaforma web dove visualizzi e gestisci i risultati di accessibilità. Lavorano insieme come una soluzione completa per i test di accessibilità:
Axe Watcher funziona con i tuoi test automatizzati, analizzando ogni pagina visitata dai tuoi test per problemi di accessibilità. Rileva le modifiche al DOM e cattura più stati della pagina, rendendolo ideale per testare contenuti dinamici come applicazioni a pagina singola, flussi di accesso e componenti interattivi. Quando integrato con Git, Watcher associa i risultati a commit e branche specifiche.
Axe Developer Hub riceve i risultati di accessibilità da fonti di input come Watcher e li presenta in un'interfaccia organizzata. Puoi monitorare i problemi di accessibilità nei commit, confrontare le branche, filtrare per gravità e monitorare nel tempo i progressi di accessibilità del tuo progetto. La piattaforma de-duplica i problemi, quindi vedi ciascun problema unico una sola volta.
Passi di Configurazione
Questi passaggi presuppongono che tu abbia un Account Axe e accesso a un abbonamento Axe Developer Hub.
Per assistenza con il tuo Account Axe o abbonamento Axe Developer Hub, contatta direttamente il tuo rappresentante Deque, rivolgiti al nostro servizio di supporto o inviaci un'email.
1. Crea un Progetto Watcher
Un progetto in Axe Developer Hub contiene i tuoi risultati di accessibilità, informazioni sui test eseguiti e dati Git. Ogni progetto ha un ID progetto unico che collega i tuoi test eseguiti ad esso.
Per creare un progetto:
- Visita la pagina di avvio di Axe Developer Hub o clicca Aggiungi nuovo progetto dalla tua pagina Progetti.
- Scegli Axe Watcher dalla pagina Scegli il tuo metodo di integrazione.
- Dai un nome al tuo progetto.
- Seleziona il tuo linguaggio di programmazione.
- Scegli la tua piattaforma di automazione del browser.
Per istruzioni complete, consulta Configura Progetti.
2. Modifica la Tua Suite di Test
Integrare Watcher richiede pochi cambiamenti ai tuoi test esistenti. Il processo generale include:
- Installazione del pacchetto Watcher
- Importazione delle funzioni di configurazione e delle classi controller
- Involucro della configurazione del browser con la funzione di configurazione di Watcher
- Involucro della tua istanza di browser o pagina con Watcher
- Flush dei tuoi risultati dopo ogni test per inviarli ad Axe Developer Hub
L'implementazione specifica varia a seconda della piattaforma. Scegli il tuo linguaggio dai link sottostanti per essere diretto a istruzioni specifiche per la tua piattaforma di automazione del browser:
Se non hai una suite di test esistente da modificare, il Repository di esempi di Axe Watcher fornisce esempi funzionanti per ogni piattaforma supportata.
3. Esegui i Tuoi Test e Controlla i Risultati
Una volta modificate le tue suite di test, eseguila come fai normalmente. Watcher analizza automaticamente le pagine e invia i risultati ad Axe Developer Hub.
Dopo che il test è completato, visita il tuo progetto in Axe Developer Hub per esaminare i risultati. Vedrai:
- Pagina delle Branche (progetti Git): Mostra tutte le branche analizzate con i sommari di accessibilità.
- Pagina dei Commit (Progetti Git): Mostra i commit all'interno di un branch con dati di confronto.
- Pagina Esecuzioni Test (Progetti non-Git): Mostra ogni esecuzione di test con timestamp e conteggi dei problemi.
- Pagina Riepilogo: Mostra tutte le regole di accessibilità violate con i conteggi dei problemi per impatto.
- Pagina Dettagli: Fornisce informazioni dettagliate su ogni violazione, inclusa la posizione dell'elemento, il codice sorgente e le linee guida per la correzione.
Per indicazioni su come navigare nei tuoi risultati, vedi Comprendere i risultati.
Prossimi passi
- Automatizzare i controlli di accessibilità in CI/CD: Usa il GitHub Action per bloccare le pull request con errori di accessibilità o integra con altre piattaforme usando il servizio REST
- Personalizza il tuo testing: Scopri modalità manuale per controllare quali pagine vengono analizzate
- Configura le soglie: Imposta il soglia a11y per definire la tolleranza della tua organizzazione per errori di accessibilità
- Usa una configurazione globale: Applica standard di accessibilità coerenti in tutta la tua organizzazione