Scrivere Test con Selenium
Scrivere test di accessibilità utilizzando Selenium WebDriver con Axe DevTools per il Web per Java
Questa configurazione di Axe DevTools non si collega intrinsecamente a nessuna libreria di asserzioni. Ciò consente semplici test di accessibilità così come la completa personalizzazione dei test e l'uso con asserzioni personalizzate.
Prerequisiti
Per utilizzare Axe DevTools Java Selenium e ottenere risultati con esso, devi aver già creato un file di test con Axe DevTools e aver importato e inizializzato la tua scelta di Selenium WebDriver. Se non hai completato questo passaggio, leggi prima questa guida su come farlo.
Eseguire una Scansione
Con questa configurazione, eseguire una scansione di accessibilità di base richiede solo tre righe di codice. Nel tuo file di test, sostituisci <URL> con l'indirizzo web desiderato della pagina che vuoi testare. I risultati della scansione sono salvati nella variabile results
webdriver.get("<URL>");
Results results = axeSelenium.run(axedriver);
webdriver.quit();Utilizzare i Risultati della Scansione
Una volta eseguita la scansione, potresti voler fare qualcosa con i risultati. L'opzione più semplice è stampare i risultati sulla console.
System.out.print(results);Puoi anche utilizzare i risultati per verificare violazioni di accessibilità. Il modo più semplice per farlo è con un'istruzione come questa:
if (!results.violationFree()) {
//do something, like throw an exception
}Per maggiori informazioni su come utilizzare l'oggetto dei risultati per scrivere test personalizzati, vedi la pagina su utilizzando i risultati.
File di test di esempio
Questo file di test lavora con gli stessi elementi costitutivi trattati in importare e inizializzare così come la guida per scrivere i test su questa pagina.
import com.deque.html.axedevtools.selenium.*;
import com.deque.html.axedevtools.selenium.results.*;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class Example {
public static void main(final String[] args) {
AxeSelenium axeselenium = new AxeSelenium();
WebDriver webdriver = new ChromeDriver();
AxeDriver axedriver = new AxeDriver(wd);
webdriver.get("<URL>");
Results results = axeselenium.run(axedriver);
webdriver.quit();
if (!results.violationFree()) {
int violationCount = results.getViolations().size();
System.out.printf("Found %d violations!\n", violationCount);
System.exit(1);
}
System.out.println("No violations found!");
}
}In questo esempio vengono utilizzati Chrome e ChromeDriver. Questo può essere sostituito con qualsiasi altro driver e browser Selenium. Se questo file di test trova problemi di accessibilità, stampa il numero di violazioni trovate ed esce con il codice di stato 1 (errore). Per utilizzare questo file di test nel tuo ambiente, dovrai aggiungere un URL alla linea
webdriver.get("<URL>");Riferimento Aggiuntivo
Oltre all'utilizzo di base descritto sopra, Axe DevTools Java Selenium fornisce diversi metodi di concatenazione per modificare il modo in cui viene eseguita la scansione. Questi metodi possono modificare l'ambito e il set di regole della scansione a qualsiasi configurazione desiderata. Per impostazione predefinita, l'intera pagina viene scansionata e controllata per rilevare violazioni di accessibilità secondo le linee guida WCAG 2.1 livello AA, con le regole di buone pratiche e sperimentali disattivate. Le impostazioni di questi metodi di concatenazione rimangono sull'oggetto AxeSelenium, e include e exclude si aggiungono alle aree precedenti ogni volta che le chiami, quindi riutilizzare un oggetto per una seconda scansione configurata diversamente trasferisce le impostazioni della prima scansione. Crea un nuovo AxeSelenium per ogni scansione configurata diversamente.
Ambito
Per impostazione predefinita, l'intera pagina viene scansionata. Tuttavia, Axe DevTools supporta la possibilità di scansionare porzioni specifiche di una pagina con i suoi metodi di concatenazione di ambito. Questi metodi di ambito modificano efficacemente la "superficie" della pagina da scansionare all'area(e) target desiderata. Inoltre, è disponibile un metodo per ignorare le violazioni. Questo metodo non riduce l'area della scansione; ignora le violazioni di una regola quando questa fallisce su un elemento specifico, e il resto della pagina viene comunque controllato come di consueto. Tutti questi metodi funzionano in base alle aree selettore CSS. L'area di ciascun selettore CSS su una determinata pagina può essere determinata utilizzando lo strumento "ispeziona elemento" degli strumenti di sviluppo del browser.
Metodi di Ambito
Come spiegato sopra, questi metodi cambiano efficacemente la superficie della pagina da scansionare. Ci sono due metodi in questa categoria, un metodo "inclusivo" e un metodo "esclusivo". Possono essere concatenati tra loro per creare più enclavi ed esclavi dell'area di scansione.
Ambito - Inclusione
Il metodo di concatenazione include modifica la scansione in modo che venga eseguita solo all'interno dell'area della pagina specificata dal(i) selettore(i) CSS passato(i) ad esso. Esistono diversi modi per utilizzare il metodo include: ambito singolo, ambito multiplo, ambito composto e ambito IFrame.
Questo metodo può essere utilizzato con un singolo selettore come segue:
axeselenium.include("#selector1").run(axedriver);Questa scansione verrà eseguita solo all'interno dell'ambito del selettore 1
Puoi impostare una scansione con ambiti multipli:
axeselenium.include("#selector1").include("#selector2").run(axedriver);Questa chiamata scansionerà all'interno dell'ambito del selettore 1 e del selettore 2. Possono essere separati da una virgola o dichiarati in una chiamata include separata.
L'ambito composto può essere realizzato con la seguente sintassi:
axeselenium.include("#selector1 .selector2").run(axedriver);Questo ambito composto fa sì che vengano scansionati solo gli elementi con il selettore 2 all'interno del selettore 1. Questo si configura non separando i selettori con la virgola.
Per definire l'ambito all'interno di un IFrame, si può passare un List<String>. L'ambito da scansionare all'interno dell'IFrame viene passato come parametro aggiuntivo.
axeselenium.include(Arrays.asList(new String[] {"#frame1", "#selector1"})).run(axedriver);Questa scansione si esegue sugli elementi all'interno del selettore 1, che si trova all'interno del frame 1.
La definizione dell'ambito all'interno di più IFrame funziona nello stesso modo della selezione multipla standard. Basta chiamare include di nuovo.
axeselenium.include(Arrays.asList(new String[] {"#frame1", "#selector1"}))
.include(Arrays.asList(new String[] {"#frame2", "#selector2"})).run(axedriver);Questa scansione si esegue solo all'interno del selettore 1 all'interno del frame 1, e del selettore 2 all'interno del frame 2.
È anche possibile definire l'ambito all'interno di IFrame annidati:
axeselenium.include(Arrays.asList(new String[] {"#frame1", "#frame2", "#selector1"})).run(axedriver);Questa scansione si esegue all'interno dell'ambito del selettore 1 dentro il frame 2, che a sua volta si trova dentro il frame 1
Ambito - Esclusione
Oltre al metodo di concatenazione include, questa API possiede un metodo exclude. Questo metodo modifica la scansione in modo che vengano scansionati solo gli elementi al di fuori dell'ambito specificato. La sua configurazione e utilizzo sono identici al metodo include, quindi consulta la sezione sopra per maggiori dettagli ed esempi su come può essere utilizzato. Un dettaglio importante da ricordare è che i metodi include e exclude possono essere concatenati tra loro per creare ambiti complessi in modo molto più semplice rispetto all'uso di soli include o exclude.
Questo esempio mostra un modo per combinare i metodi include e exclude:
axeselenium.include("#selector1").exclude("#selector2").run(axedriver);Questa scansione si esegue solo sulla parte della pagina che è all'interno del selettore 1 e che non è anche all'interno del selettore 2.
Ambito - Ignorare le Violazioni
L'ultimo metodo di concatenazione relativo all'ambito è il metodo di ignorare i risultati. Questo metodo non altera l'ambito complessivo della scansione; ignora le violazioni di una regola quando questa fallisce su un elemento specifico. Funziona passando il target dell'elemento che si desidera ignorare, come appare nei risultati, insieme alla regola che viola. Il target è scritto nel modo in cui Java stampa un elenco, con il selettore racchiuso tra parentesi quadre, come "[.sidebar]". Una chiamata ignoring per regola è sufficiente, perché una corrispondenza rimuove l'intera voce della regola. Non chiamarlo due volte per la stessa regola: se entrambi i target corrispondono agli elementi in errore, la scansione genera un IllegalStateException.
axeselenium.ignoring("[.sidebar]", "color-contrast").ignoring("[#branded-content]", "image-alt").run(axedriver);Questa scansione ignorerà la violazione del contrasto dei colori nella barra laterale e la violazione del testo alternativo delle immagini sull'immagine di contenuto di marca. Se il target corrisponde a qualsiasi elemento che fallisce la regola, l'intera voce della regola viene rimossa dalle violazioni, incluse le mancanze su altri elementi. Vedi AxeSelenium.ignoring(String, String) nella documentazione API.
Regole
Ci sono tre modi per modificare la configurazione delle regole per ciascuna scansione. Questi diversi metodi consentono una diversa granularità nella selezione delle regole contro cui testare. Il metodo del set di regole meno granulare seleziona un set di regole, o un gruppo più ampio di regole basato sugli standard di accessibilità comuni. Il metodo degli standard dei set di regole leggermente più granulare, noto anche come tag, seleziona le regole in base alle aree di uno standard di accessibilità più ampio in cui rientrano. Infine, ci sono tre opzioni per la configurazione con una regola alla volta. Tutti insieme, questi metodi di concatenazione ti permettono di regolare la tua scansione per eseguire esattamente le regole desiderate.
Per informazioni sulle regole di axe-core, visita la pagina panoramica del set di regole.
Selezione del Set di Regole
Questo metodo seleziona le regole in base alla loro associazione più aggregata: un insieme di regole. Un insieme di regole è una raccolta di tutte le regole che riguardano uno standard di accessibilità riconosciuto a livello industriale. Insiemi di regole per WCAG 2.0, 2.1 e 2.2; ADA Sezione 508; Trusted Tester v5; EN 301 549; e RGAA. Inoltre, le regole migliori possono essere abilitate con un flag booleano.
Gli insiemi di regole sono spesso composti da più tag, che sono regole raggruppate per distinzioni più specifiche. Ad esempio, l'insieme di regole wcag2 contiene tutte le regole contrassegnate wcag2a con il livello A WCAG 2.0, wcag2aa con il livello AA WCAG 2.0, e wcag2aaa con il livello AAA WCAG 2.0.
Usa questa opzione quando desideri selezionare un insieme di regole non modificato.
axeselenium.forRuleset("wcag2.1").run(axedriver);Questa scansione verrà eseguita solo con le regole WCAG 2.1.
Per abilitare le regole migliori, utilizza la seconda forma di forRuleset.
axeselenium.forRuleset("wcag2.1", true).run(axedriver);Selezione degli Standard
Il metodo della catena di standard di accessibilità, o tag, consente una leggera maggiore granularità all'interno degli insiemi di regole axe-core. Per le regole basate su WCAG, questo metodo consente di selezionare solo le regole contrassegnate con singolo-A o doppio-A. Questo elenco suddivide i nomi dei tag disponibili e i corrispondenti standard.
Questa opzione è particolarmente utile quando si testa solo una parte specifica di un insieme di regole, ad esempio, solo le regole singolo A sotto WCAG 2.0.
| Nome del Tag | Standard di Accessibilità |
|---|---|
| wcag2a | WCAG 2.0 Livello A |
| wcag2aa | WCAG 2.0 Livello AA |
| wcag2aaa | WCAG 2.0 Livello AAA |
| wcag21a | WCAG 2.1 Livello A |
| wcag21aa | WCAG 2.1 Livello AA |
| wcag21aaa | WCAG 2.1 Livello AAA |
| wcag22a | WCAG 2.2 Livello A |
| wcag22aa | WCAG 2.2 Livello AA |
| wcag22aaa | WCAG 2.2 Livello AAA |
| section508 | Sezione 508 |
| EN-301-549 | EN 301 549 |
| RGAAv4 | RGAA Versione 4 |
| TTv5 | Trusted Tester v5 |
| best-practice | Migliori pratiche approvate da Deque |
Pur non essendo definite esplicitamente come parte di uno standard di accessibilità, offriamo una serie di regole che chiamiamo „migliori pratiche.“ Sebbene non strettamente necessarie, testare con queste regole aiuterà il tuo sito web a essere il più equo possibile nell'uso.
Un singolo standard può essere selezionato come segue:
axeselenium.accordingTo("wcag2a").run(axedriver);Questa scansione verrà eseguita solo con le regole contrassegnate sotto WCAG 2.0 livello A
Inoltre, è possibile specificare più tag per selezionare più standard di accessibilità:
axeselenium.accordingTo("wcag2a", "section508").run(axedriver);Queste scansioni eseguiranno sia le regole contrassegnate sotto WCAG 2.0 livello A che ADA Sezione 508.
Selezione delle Regole
Infine, puoi modificare il tuo insieme di regole aggiungendo una singola regola. Per informazioni sui nomi di tutte le regole di axe-core e su cosa ciascuna regola verifica, consulta il documentazione delle descrizioni delle regole di axe-core.
Questi metodi funzionano bene quando il gruppo di regole finale desiderato differisce da un set di regole esistente o da uno standard/tag solo per alcune regole individuali. Per creare un set di regole completamente personalizzato, dai un'occhiata alle nostre opzioni di regole personalizzate.
Verifica delle Regole Aggiuntive
Il metodo della catena di verifica ti permette di aggiungere regole aggiuntive per il test, oltre al tuo insieme di regole standard.
Questo metodo può essere utilizzato per verificare una singola regola aggiuntiva:
axeselenium.checking("label").run(axedriver);in cui la scansione viene eseguita con il set di regole predefinito oltre alla regola "label".
Per controllare più regole aggiuntive, passarle tutte in una sola chiamata. Chiamando checking una seconda volta si sostituiscono le regole della prima chiamata anziché aggiungerle.
axeselenium.checking("label", "tabindex").run(axedriver);in cui la scansione viene eseguita con il set di regole predefinito oltre alle regole "label" e "tabindex".
Può essere utilizzato anche per aggiungere una o più regole a un tag specificato:
axeselenium.accordingTo("wcag2a").checking("tabindex").run(axedriver);in cui la scansione viene eseguita testando contro le regole del livello A di WCAG 2.0, con l'aggiunta della regola "tabindex".
Omettere Regole
Simile al metodo di controllo, il metodo di esclusione modifica le regole predefinite da utilizzare con la/le regola(e) specificata(e). Tuttavia, invece di aggiungerle al set di regole, il metodo di esclusione rimuove la/e regola/e specificata/e da quelle utilizzate per testare la pagina. La sua configurazione e utilizzo sono identici al metodo di controllo, quindi consulta la sezione sopra per maggiori dettagli ed esempi su come utilizzarlo.
axeselenium.accordingTo("wcag2a").skipping("label").run(axedriver);Questo esempio mostra una scansione che testa contro le regole WCAG 2.0 livello A, con la rimozione della regola "etichetta".
I metodi di controllo ed esclusione impostano la stessa opzione, quindi solo l'ultima delle due chiamate in una catena ha effetto. Non combinarli nella stessa scansione.
Controllo Solo
Il metodo di controllo solo esamina solo la regola o le regole specificate. Qualsiasi regola non specificata esplicitamente non sarà inclusa nella scansione.
Questo metodo a catena può essere usato per specificare una singola regola:
axeselenium.checkingOnly("tabindex").run(axedriver);in cui la scansione viene eseguita solo con la regola "tabindex".
Per specificare più di una regola, passarle tutte in una sola chiamata. Una seconda chiamata checkingOnly sostituisce le regole della prima. checkingOnly e accordingTo impostano anche la stessa opzione, quindi solo l'ultima delle due ha effetto.
axeselenium.checkingOnly("label", "tabindex").run(axedriver);in cui la scansione viene eseguita solo con le regole "label" e "tabindex".
Disabilitare iframeTestare
Su pagine volatili, gli iframes possono causare problemi. Axe deve essere iniettato in ogni frame e configurato allo stesso modo in ciascun frame. Se gli iframes vengono aggiunti o rimossi mentre AxeSelenium::run sta testando la tua pagina, è possibile che vengano generate eccezioni o si verifichi un comportamento inaspettato. Come misura di sicurezza, AxeSelenium espone un metodo per disabilitare tutte le interazioni con gli iframes, AxeSelenium::disableIframeTesting.
Quando abilitato, axe-core non verrà iniettato negli iframes della pagina, né verrà eseguito in essi. Solo la pagina di livello superiore verrà controllata.
Può essere utilizzato in questo modo:
axeselenium.disableIframeTesting().run(axedriver);L'uso di questo metodo non è raccomandato. È sempre meglio aspettare che la tua pagina diventi stabile prima di passarla a AxeSelenium::run.
Servizio di utilizzo
Ottieni informazioni sui trend di utilizzo di Axe DevTools all'interno della tua organizzazione
Il servizio di utilizzo può essere configurato tramite variabili d'ambiente o mediante metodi a runtime. Quando entrambi vengono utilizzati, vengono adottati i valori nei metodi. Nota: non tutti i campi dati del servizio di utilizzo possono essere impostati tramite metodi.
Per impostazione predefinita, il servizio di utilizzo è abilitato e i risultati sono inviati a https://usage.deque.com. Imposta la variabile d'ambiente AXE_TRACK_USAGE su false per disabilitarlo. Se i tuoi eventi di utilizzo non raggiungono Deque, imposta esplicitamente la variabile d'ambiente AXE_METRICS_URL.
Variabili d'ambiente
Queste variabili d'ambiente ti permettono di configurare il servizio di utilizzo e modificare le proprietà degli eventi riportati.
| Nome | Tipo | Può Sovrascrivere | Descrizione |
|---|---|---|---|
AXE_DISTINCT_ID |
Stringa | — | Un identificatore UUID che rimane lo stesso per l'utente connesso (a meno che non venga rigenerato). In Ruby, questa variabile è denominata DEQUE_DISTINCT_ID. |
AXE_INCLUDE_TEST_RESULTS |
Booleano | — | Imposta su true per includere i risultati completi di axe-core nell'oggetto testResults di ogni evento (predefinito è false). Supportato solo dalla CLI e dalle API di Node.js. |
AXE_METRICS_URL |
Stringa | — | L'URL dell'endpoint di utilizzo REST (predefinito è https://usage.deque.com) |
AXE_TRACK_USAGE |
Booleano | — | Imposta su false per disabilitare il servizio di reporting sull'utilizzo. Il reporting è abilitato per impostazione predefinita. |
AXE_ACTOR |
Stringa | — | Imposta su human o automation per decidere se gli eventi registrano una persona o una pipeline automatizzata come esecutrice dei test. Per impostazione predefinita, automation viene rilevato dalle variabili di ambiente comuni nei CI. Supportato solo dall'interfaccia CLI e dalle API di Node.js. |
AXE_APPLICATION |
Stringa | falso | L'applicazione utilizzata per controllare gli errori di accessibilità |
AXE_DEV_INSTANCE |
Booleano | vero | Indica se questo evento è dovuto ad azioni di uno sviluppatore software. Utile per marcare e successivamente rimuovere eventi registrati durante lo sviluppo o i test. |
AXE_DEPARTMENT |
Stringa | vero | Il dipartimento utente all'interno dell'organizzazione |
AXE_KEYCLOAK_ID |
Stringa | falso | L'ID Keycloak dell'utente |
AXE_LOGGED_IN |
Booleano | falso | Registra se l'utente è connesso all'applicazione in test |
AXE_ORGANIZATION |
Stringa | vero | L'organizzazione dell'utente. Per fare sì che il tuo utilizzo appaia nei Rapporti Axe, imposta questo valore sull'ID della tua organizzazione (contatta Deque per ottenerlo). |
AXE_SESSION_ID |
Stringa | falso | Un UUID che identifica la sessione dell'utente |
AXE_TEAMS |
Stringa | falso | Le squadre che eseguono i test, come un array JSON di oggetti { "id": "...", "name": "..." } o il percorso a un file JSON che ne contiene uno. Un valore passato al metodo setTeams delle API o all'opzione --set-teams della CLI ha la precedenza. Supportato solo dall'interfaccia CLI e dalle API di Node.js. |
AXE_USER_ID |
Stringa | falso | L'identità di un utente specifico come un indirizzo email, un nome o un ID di accesso. I Rapporti Axe contano gli utenti unici a partire da questo valore. |
AXE_USER_JOB_ROLE |
Stringa | falso | Il ruolo lavorativo dell'utente |
AXE_USER_STATUS |
Stringa | falso | Informazioni sullo stato che si desidera associare all'utente |
Abilitare il tracciamento
Questo metodo consente agli utenti di scegliere se inviare o meno i dati al servizio di utilizzo. L'invio è abilitato per impostazione predefinita.
.enableTracking(boolean state)Impostare l'URL di tracciamento
Questo metodo consente agli utenti di modificare la destinazione dei dati delle metriche di utilizzo. Predefinito a https://usage.deque.com
.setTrackingUrl(String url)Impostare ID distinto
Questo metodo consente agli utenti di modificare l'ID distinto memorizzato/utilizzato
.setDistinctId(String distinctId)Prossimi passi
Una volta che stai scrivendo test con Axe DevTools, leggi di più su utilizzando i risultati per scrivere test personalizzati più dettagliati, oppure leggi di utilizzando il reporter per generare rapporti delle scansioni di accessibilità.
Risoluzione dei problemi
Se riscontri problemi nella configurazione dei test di accessibilità, contatta direttamente il tuo rappresentante Deque, contattaci tramite il nostro supporto tecnico, oppure inviaci un'email. Siamo felici di aiutarti a far decollare i tuoi sforzi di test di accessibilità.
