Scrivi test di Selenium

Utilizza axe DevTools Java Selenium

Questa configurazione di axe DevTools non si vincola intrinsecamente ad alcuna libreria di asserzioni. Ciò consente di effettuare semplici test di accessibilità, nonché di personalizzarli completamente e di utilizzarli con asserzioni personalizzate.

Prerequisiti

Per poter utilizzare axe DevTools Java Selenium e produrre risultati, è necessario aver già creato un file di prova con axe DevTools e aver importato e inizializzato il Selenium WebDriver scelto. Se non hai completato questo passaggio, leggi prima questa guida su come farlo.

Esegui una scansione

Con questa configurazione, per eseguire una scansione di accessibilità di base sono necessarie solo tre righe di codice. Nel tuo file di prova, sostituisci <URL> Con l'indirizzo web desiderato della pagina che vuoi testare. I risultati della scansione vengono salvati nella results variabile

webdriver.get("<URL>");
Results results = axeSelenium.run(axedriver);
webdriver.quit();

Utilizzo dei risultati della scansione

Una volta eseguita la scansione, potresti voler utilizzare i risultati in qualche modo. L'opzione più semplice è stampare i risultati sulla console.

System.out.print(results);

È inoltre possibile utilizzare i risultati per verificare eventuali violazioni dell'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 risultati per scrivere test personalizzati, consultare la pagina su utilizzo dei risultati.

File di test di esempio

Questo file di test funziona con gli stessi elementi costitutivi trattati in import and initialize e nella guida alla scrittura dei test presente in 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. Può essere sostituito con qualsiasi altro driver Selenium e browser. Se questo file di test rileva problemi di accessibilità, stampa il numero di violazioni rilevate e termina con il codice di stato 1 (errore). Per utilizzare questo file di prova nel tuo ambiente, dovrai aggiungere un URL alla riga

webdriver.get("<URL>");

Riferimento aggiuntivo

Oltre all'utilizzo di base descritto sopra, axe DevTools Java Selenium fornisce diversi metodi di concatenamento per modificare il modo in cui viene eseguita la scansione. Questi metodi possono modificare l'ambito e il set di regole della scansione in base a qualsiasi configurazione desiderata. Per impostazione predefinita, l'intera pagina viene scansionata e controllata per rilevare eventuali violazioni di accessibilità, secondo le linee guida WCAG 2.0 livello AA. È importante notare che le chiamate successive al metodo run sovrascriveranno tutte le preferenze dei metodi della catena indicati di seguito. Le modifiche apportate all'ambito o alle regole non vengono mantenute per più scansioni mediante questi metodi della catena di scoping.

Ambito

Per impostazione predefinita, viene scansionata l'intera pagina. Tuttavia, axe DevTools supporta la possibilità di analizzare parti specifiche di una pagina con i suoi metodi della catena di scoping. Questi metodi di definizione dell'ambito modificano in modo efficace la "superficie" della pagina da scansionare, adattandola alle aree di destinazione desiderate. Inoltre, è disponibile un metodo per ignorare le violazioni. "Definendo l'ambito di" la pagina con questo metodo non si riduce l'area della scansione, ma si ignoreranno le violazioni di un tipo specificato all'interno dell'area specificata e si continuerà a eseguire la scansione dell'area per altre potenziali violazioni. Tutti questi metodi funzionano in base alle aree del selettore CSS. L'area di ciascun selettore CSS su una determinata pagina può essere determinata utilizzando il widget "ispeziona elemento" degli strumenti per sviluppatori del tuo browser.

Metodi di definizione dell'ambito

Come spiegato sopra, questi metodi modificano in modo efficace l'area di visualizzazione della pagina da scansionare. In questa categoria si distinguono due metodi: il metodo "inclusivo" e il metodo "esclusivo". Possono essere concatenati tra loro per creare più aree separate di superficie di scansione.

Ambito - Inclusione

Il metodo di inclusione del metodo di definizione dell'ambito modifica la scansione in modo che venga eseguita solo all'interno dell'area di visualizzazione della pagina specificata dai selettori CSS passati. Esistono diversi modi per utilizzare il metodo 'including': ambito singolo, 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 nell'ambito del selettore 1

È possibile impostare una scansione con più ambiti:

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

Questa chiamata eseguirà la scansione nell'ambito del selettore 1 e del selettore 2. Possono essere separati da virgole o dichiarati in una clausola 'including' separata.

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

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

Questo ambito composto determina la scansione solo degli elementi con selettore 2 all'interno del selettore 1. Ciò si ottiene non separando i selettori con virgole.

Per definire l'ambito all'interno di un IFrame, è possibile passare un parametro a 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 viene eseguita sugli elementi all'interno del selettore 1, che si trova all'interno del frame 1.

L'ambito all'interno di più IFrame funziona allo stesso modo della selezione multipla standard. Basta semplicemente chiamare including di nuovo.

axeselenium.including(Arrays.asList(new String[] {"#frame1", "#selector1"}))
    .including(Arrays.asList(new String[] {"#frame2", "#selector2"})).run(axedriver);

Questa scansione viene eseguita solo all'interno del selettore 1 nel fotogramma 1 e del selettore 2 nel fotogramma 2.

È anche possibile definire l'ambito all'interno di IFrame nidificati:

axeselenium.including(Arrays.asList(new String[] {"#frame1", "#frame2", "#selector1"})).run(axedriver);

Questa scansione viene eseguita nell'ambito del selettore 1 all'interno del frame 2, che a sua volta si trova all'interno del frame 1

Ambito - Esclusione

Oltre al metodo di inclusione della catena, questa API dispone di un metodo di esclusione. Questo metodo modifica la scansione in modo che vengano analizzati solo gli elementi al di fuori dell'ambito specificato. La sua configurazione e il suo utilizzo sono identici al metodo di inclusione, quindi per maggiori dettagli ed esempi sul suo utilizzo fare riferimento alla sezione precedente. Un dettaglio importante da ricordare è che i metodi di inclusione ed esclusione possono essere concatenati tra loro per creare ambiti complessi in modo molto più semplice rispetto al solo utilizzo di include o exclude.

Questo esempio mostra uno di questi modi per abbinare i metodi di inclusione ed esclusione:

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

Questa scansione viene eseguita solo sulla parte della pagina che si trova nel selettore 1 e che non si trova anche nel selettore 2.

Ambito - Ignorare le violazioni

L'ultimo metodo a catena correlato all'ambito è il metodo che ignora i risultati. Questo metodo non modifica 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 della barra laterale e nella sezione dei contenuti brandizzati.

Regole

Esistono tre modi per modificare la configurazione delle regole per ogni scansione. Questi diversi metodi consentono una diversa granularità nella selezione delle regole da testare. Il metodo basato sul 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 basati su set di regole leggermente più granulari, noti 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 di configurazione con una regola alla volta. Nel complesso, questi metodi concatenati consentono di adattare la scansione in modo che esegua esattamente le regole desiderate.

Per informazioni sulle regole di axe-core, visita la pagina di panoramica del set di regole.

Selezione del set di regole

Questo metodo seleziona le regole in base alla loro associazione più aggregata: un set di regole. Un ruleset è una raccolta di tutte le regole relative a uno standard di accessibilità valido per l'intero settore. Rulesets per WCAG 2.0, 2.1 e 2.2; ADA Section 508; Trusted Tester v5; e EN 301 549. Inoltre, le regole di best practice possono essere abilitate con un flag booleano.

I ruleset sono spesso composti da più tag, ovvero regole raggruppate in base a distinzioni più specifiche. Ad esempio, il wcag2 ruleset contiene tutte le regole contrassegnate wcag2a come regole WCAG 2.0 livello A, wcag2aa regole WCAG 2.0 livello AA e wcag2aaa regole WCAG 2.0 livello AAA.

Utilizzare questa opzione quando si desidera selezionare un ruleset senza modificarlo.

axeselenium.forRuleset("wcag2.1").run(axedriver);

Questa scansione verrà eseguita solo con le regole WCAG 2.1.

Per abilitare le regole delle best practice, usa la seconda forma di forRuleset.

axeselenium.forRuleset("wcag2.1", true).run(axedriver);

Selezione standard

Il metodo della catena di standard di accessibilità, o tag, consente una granularità leggermente maggiore all'interno dei set di regole di axe-core. Per le regole basate su WCAG, questo metodo consente di selezionare solo le regole contrassegnate come A singolo o A doppio. Questo elenco suddivide i nomi dei tag disponibili e gli standard corrispondenti.

Questa opzione è particolarmente utile quando si testa solo una parte specifica di un set di regole, ad esempio solo le singole regole A secondo WCAG 2.0.

Sebbene non siano definite esplicitamente come parte di alcuno standard di accessibilità, offriamo una serie di regole che chiamiamo "buone pratiche". Sebbene non sia strettamente necessario, testare con queste regole aiuterà a rendere il tuo sito web il più equo possibile.

È possibile selezionare un singolo standard come segue:

axeselenium.accordingTo("wcag2a").run(axedriver);

Questa scansione verrà eseguita solo con le regole contrassegnate con 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 le regole contrassegnate sia sotto WCAG 2.0 livello A che sotto la sezione 508 ADA.

Selezione delle regole

Infine, puoi modificare il tuo set di regole per una singola regola. Per informazioni sui nomi di tutte le regole di axe-core e sui test eseguiti da ciascuna regola, consultare la documentazione sulle descrizioni delle regole di axe-core.

Questi metodi funzionano bene quando il gruppo finale di regole desiderato si differenzia da un set di regole o da uno standard/tag esistente solo per poche regole singole. Per creare un set di regole completamente personalizzato, dai un'occhiata alle nostre opzioni di regole personalizzate.

Controllo delle regole aggiuntive

Il metodo della catena di controllo consente di aggiungere ulteriori regole da testare oltre al set di regole standard.

Questo metodo può essere utilizzato per controllare una singola regola aggiuntiva:

axeselenium.checking("label").run(axedriver);

Dove la scansione viene eseguita con il ruleset predefinito oltre alla regola "etichetta".

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

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

Dove la scansione viene eseguita con il ruleset predefinito oltre alle regole "label" e "tabindex".

Può anche essere utilizzato per aggiungere una o più regole a un tag specificato:

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

Dove la scansione viene eseguita testando le regole WCAG 2.0 livello A, con l'aggiunta della regola "tabindex".

Esclusione delle regole

Simile al metodo di controllo, il metodo di ignorare modifica le regole predefinite da utilizzare in base alle regole specificate. Tuttavia, anziché aggiungerlo al set di regole, il metodo di ignorare rimuove le regole specificate da quelle utilizzate per testare la pagina. La sua configurazione e il suo utilizzo sono identici al metodo di controllo, quindi per maggiori dettagli ed esempi su come utilizzarlo fare riferimento alla sezione precedente. Un dettaglio importante da ricordare è che i metodi di controllo e di salto possono essere concatenati tra loro per creare set di regole personalizzati in modo molto più semplice rispetto all'utilizzo dei soli metodi di salto o di controllo.

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

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

Solo verifica

Il metodo di controllo verifica solo le regole specificate. Tutte le regole non specificate esplicitamente non verranno incluse nella scansione.

Questo metodo a catena può essere utilizzato per specificare una singola regola:

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

Dove la scansione viene eseguita solo con la regola "tabindex".

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

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

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

Disabilitazione dei test iframe

Nelle pagine che cambiano frequentemente, gli iframe possono causare problemi. Axe deve essere iniettato in ogni frame e Configurato nello stesso modo in ogni frame. Se gli iframe vengono aggiunti o rimossi mentre AxeSelenium::run è Testando la tua pagina, è possibile che vengano generate eccezioni o che si verifichino comportamenti imprevisti. Da completare con il resto della frase Misure di sicurezza AxeSelenium espone un metodo per disabilitare tutte le interazioni iframe AxeSelenium::disableIframeTesting. Se abilitato, axe-core non verrà iniettato negli iframe della pagina, né verrà eseguito negli stessi. Verrà controllata solo la pagina di livello superiore.

Può essere utilizzato così:

axeselenium.disableIframeTesting().run(axedriver);

Servizio di uso

Ottieni informazioni sulle tendenze di utilizzo di axe DevTools all'interno della tua organizzazione

Il servizio di utilizzo può essere configurato tramite variabili di ambiente o metodi in fase di esecuzione. Quando vengono utilizzati entrambi, vengono utilizzati i valori nei metodi. Nota: non tutti i campi dei dati del servizio di utilizzo possono essere impostati tramite metodi.

Per impostazione predefinita, il servizio di uso è disabilitato e i risultati dell'URL predefinito vengono inviati a https://usage.deque.com.

Variabili d'ambiente

Questo metodo consente agli utenti di modificare valori specifici del servizio di utilizzo tramite variabili di ambiente

Abilita il monitoraggio

Questo metodo consente agli utenti di scegliere se inviare o meno i dati al servizio di utilizzo

.enableTracking(boolean state)

Imposta URL di tracciamento

Questo metodo consente agli utenti di modificare la destinazione dei dati delle metriche di utilizzo. Impostato di default su 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 scritti i test con axe DevTools, leggi di più su utilizzare i risultati per scrivere test personalizzati più dettagliati oppure su usare il reporter per generare report delle scansioni di accessibilità.

Risoluzione dei problemi

Se riscontri problemi durante la configurazione dei test di accessibilità, contatta direttamente il tuo rappresentante Deque, contattaci tramite il nostro support desk oppure inviaci un'e-mail. Saremo lieti di aiutarti a far partire i tuoi sforzi di test di accessibilità.