Scrivere Test con Selenium

Utilizzare Axe DevTools Java Selenium

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

In aggiunta all'utilizzo di base descritto sopra, Axe DevTools Java Selenium fornisce diversi metodi a catena per modificare il modo in cui viene eseguita la scansione. Questi metodi possono modificare l'ambito e il set di regole della scansione secondo qualsiasi configurazione desiderata. Per impostazione predefinita, l'intera pagina viene scansionata e controllata per violazioni di accessibilità secondo le linee guida WCAG 2.0 livello AA. È importante notare che chiamate successive al metodo run sovrascriveranno eventuali preferenze dei metodi a catena sottostanti. Le modifiche apportate all'ambito o alle regole non persistono a scansioni multiple utilizzando questi metodi a catena.

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 a catena di ambito. Questi metodi di ambito cambiano efficacemente la "superficie" della pagina da scansionare all'area target desiderata. Inoltre, è disponibile un metodo per ignorare le violazioni. "Definire l'ambito" della pagina con questo metodo non riduce l'area della scansione, ma ignora le violazioni di un tipo specificato all'interno dell'area specificata e continua a scansionare l'area per altre potenziali violazioni. Tutti questi metodi funzionano in base ad aree dei selettori CSS. L'area di ciascun selettore CSS su una determinata pagina può essere determinata utilizzando lo strumento "ispeziona elemento" degli strumenti per sviluppatori 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 a catena di inclusione modifica la scansione in modo da eseguirsi solo all'interno dell'area della pagina specificata dai selettori CSS passati. Ci sono diversi modi per utilizzare il metodo di inclusione: singolo ambito, ambito multiplo, ambito composto e ambito IFrame.

Questo metodo può essere utilizzato con un singolo selettore come segue:

axeselenium.including("#selector1").run(axedriver);

Questa scansione verrà eseguita solo all'interno dell'ambito del selettore 1

Puoi impostare una scansione con ambiti multipli:

axeselenium.including("#selector1").including("#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 clausola di inclusione separata.

L'ambito composto può essere realizzato con la seguente sintassi:

axeselenium.including("#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.including(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 including di nuovo.

axeselenium.including(Arrays.asList(new String[] {"#frame1", "#selector1"}))
    .including(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.including(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 a catena di inclusione, questa API ha un metodo di esclusione. Questo metodo altera la scansione in modo che vengano scansionati solo gli elementi al di fuori dell'ambito specificato. La sua configurazione e il suo utilizzo sono identici al metodo di inclusione, quindi consulta la sezione sopra per ulteriori dettagli ed esempi su come può essere utilizzato. Un dettaglio importante da ricordare è che i metodi di inclusione ed esclusione possono essere concatenati tra loro per creare ambiti complessi molto più semplicemente che usando solo include o exclude.

Questo esempio mostra un modo per abbinare i metodi di inclusione ed esclusione:

axeselenium.including("#selector1").excluding("#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 a catena relativo all'ambito è il metodo di ignorare i risultati. Questo metodo non altera l'ambito complessivo della scansione, ma ignorerà le violazioni di un tipo specificato all'interno di un ambito specificato. Funziona passando i selettori degli elementi che si desidera ignorare come un array, insieme alla regola che violano.

axeselenium.ignoring("[\".sidebar\", \"#branded-content\"]", "color-contrast").run(axedriver);

Questa scansione ignorerà le violazioni del contrasto di colore nella sezione barra laterale e nella sezione contenuto del brand.

Regole

Ci sono tre modi per modificare la configurazione delle regole per ciascuna scansione. Questi diversi metodi permettono una granularità diversa nella selezione delle regole da testare. Il metodo del set di regole meno granulare seleziona un set di regole, o un gruppo più ampio di regole basate sugli standard comuni di accessibilità. Il metodo di selezione degli standard del 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. Complessivamente, questi metodi a catena ti permettono di regolare la tua scansione per eseguire esattamente le regole che desideri.

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.

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 tuo gruppo finale desiderato di regole differisce solo da un insieme di regole o standard/tag esistente per alcune regole individuali. Per costruire un insieme di regole completamente personalizzato, consulta le 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".

Può essere utilizzato anche per controllare più regole aggiuntive in due modi diversi:

axeselenium.checking("label", "tabindex").run(axedriver);
axeselenium.checking("label").checking("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 omissione modifica le regole predefinite da utilizzare con la regola o le regole specificate. Tuttavia, invece di aggiungerla al set di regole, il metodo di omissione rimuove la regola o le regole specificate da quelle usate per testare la pagina. La sua configurazione e utilizzo è identico al metodo di controllo, quindi consulta la sezione sopra per ulteriori dettagli ed esempi su come utilizzarlo. Un dettaglio importante da ricordare è che i metodi di controllo e omissione possono essere concatenati tra loro per creare set di regole personalizzati in modo molto più semplice rispetto all'utilizzo esclusivo dei metodi di ignoranza o di controllo.

axeselenium.accordingTo("wcag2a").checking("tabindex").skipping("label").run(axedriver);

Questo esempio mostra una scansione testando contro le regole del livello A di WCAG 2.0, con l'aggiunta della regola "tabindex" e la rimozione della regola "label".

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

Può essere utilizzato anche per specificare più di una regola in questi due modi:

axeselenium.checkingOnly("label", "tabindex").run(axedriver);
axeselenium.checkingOnly("label").checkingOnly("tabindex").run(axedriver);

in cui la scansione viene eseguita solo con le regole "label" e "tabindex".

Disabilitare iframe Testare

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);

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 metodi a runtime. Quando entrambi vengono utilizzati, i valori nei metodi vengono utilizzati. 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.

Abilita 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)

Imposta 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)

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