Scrivere Test Cucumber

Utilizzare Cucumber con Axe DevTools

Prerequisiti

Per scrivere test di accessibilità e ottenere risultati, devi aver già creato un file di test con Axe DevTools e la tua scelta di Selenium WebDriver pre-importata e pre-inizializzata. Se non l'hai ancora fatto, leggi questa guida per sapere come farlo.

Configurazione

Prima di tutto, aggiungi Axe DevTools alla tua configurazione

public class AppConfiguration {

    @Bean
    public static AxeWorld axeWorld() {
        return new AxeWorld();
    }
}

Ora, aggiungi i passaggi necessari per utilizzare Axe DevTools

public class StepDefinitions {

    private AxeWorld axeWorld;

    public StepDefinitions(AxeWorld axeWorld) {
        this.axeWorld = axeWorld;
    }

    private WebDriver webDriver;

    @Before
    public void setup() throws IOException {
        webDriver = new ChromeDriver();
        axeWorld.setPage(new AxeDriver(webDriver));
    }

    @After
    public void tearDown() throws Exception {
        webDriver.quit();
    }

    @When("^I visit \"([^\"]*)\"$")
    public void iVisit(String url) throws Throwable {
        webDriver.get(url);

    }
}

Scrittura dei Test

Prima di poter testare una pagina, devi accedervi. Il primo passo è istanziare Selenium WebDriver e accedere a una pagina

WebDriver webDriver = new ChromeDriver();
webDriver.get("'https://broken-workshop.dequelabs.com'");

Poi, puoi creare un oggetto scan driver di Axe DevTools e passare il WebDriver

AxeDriver axeDriver = new AxeDriver(webDriver);

Infine, includi l'axeDriver nelle tue definizioni di passo

// Inject AxeWorld into your step definitions.
public StepDefinitions(AxeWorld axeWorld) {
  this.axeWorld = axeWorld;
}
// Provide the page to the Axe World
axeWorld.setPage(new axeDriver(webDriver));

Puoi quindi testare la pagina per l'accessibilità. Attualmente, Axe DevTools supporta i test con Pico e Spring tramite Cucumber.

Utilizzo

Passaggi Cucumber di Accessibilità

Gli esempi di controlli di accessibilità sotto utilizzano Then the page should be axe clean, ma tutti i controlli funzionano indistintamente con Then the page should be audited for accessibility. La differenza tra questi due è se il test fallirà su violazioni di accessibilità con Then the page should be axe clean, rispetto a non fallire con Then the page should be audited for accessibility.

Per costruire un passaggio Cucumber di accessibilità axe, inizia con il passaggio base e aggiungi eventuali clausole necessarie. Tutte le seguenti clausole possono essere mescolate e abbinate; tuttavia, devono apparire nell'ordine specificato:

Then the page should be axe clean [including] [excluding] [according-to] [checking-rules/checking-only-rules] [skipping-rules]

Passaggio Base

Il passaggio base è il componente principale del passaggio Cucumber. È un passaggio completo di per sé e verifica che la pagina attualmente caricata sia accessibile. Effettua un audit sull'accessibilità della tua pagina. L'audit registra i problemi di accessibilità in target/axe-report/accessibility-check.log e crea un output JSON dei risultati in target/axe-report/accessibility-check.json.

Then the page should be axe clean

This step will cause test suite failures if accessibility violations are found

Then the page should be audited for accessibility

This step will require handling of violations outside of test suite failures, as this step does not trigger the suite to fail if violations are found.

Ambito

Axe DevTools consente di eseguire scansioni di accessibilità con ambiti inclusivi ed esclusivi. Inoltre, questi ambiti possono funzionare l'uno all'interno dell'altro per creare enclave ed exclave complesse di ambito. Questi ambiti funzionano su selettori CSS.

Clausola di Inclusione

La clausola di inclusione within "#selector" specifica quali elementi controllare sulla pagina. Solo gli elementi all'interno dell'ambito selezionato saranno scansionati. La clausola di inclusione deve includere un selettore CSS valido racchiuso tra virgolette doppie. Usa selettori composti per selezionare più elementi. Esempio: within "#header, .footer"

Then the page should be axe clean within "#selector"

Clausola di Esclusione

La clausola di esclusione excluding "#selector" specifica quali elementi ignorare. Nessun elemento all'interno dell'ambito selezionato sarà scansionato. La clausola di esclusione deve includere un selettore CSS valido racchiuso tra virgolette doppie. Usa selettori composti per selezionare più elementi. Esempio: excluding "#widget, .ad"

Then the page should be axe clean excluding "#selector"

Concatenare Clausole di Inclusione ed Esclusione

Per concatenare clausole di inclusione ed esclusione, usa il punto e virgola (;) o la parola ma per separarle.

Then the page should be axe clean within "main"; excluding "aside"
Then the page should be axe clean within "main" but excluding "aside"

Configurazione delle Regole

Ci sono alcuni modi per modificare la configurazione standard delle regole utilizzando l'API di Cucumber. Puoi selezionare le regole per gruppo tramite l'uso di tag o selezionare le regole singolarmente tramite il loro ID.

Clausola dei Tag delle Regole

La clausola dei tag specifica quale standard di accessibilità (o standard) utilizzare nel controllo della pagina. Specifica gli standard di accessibilità per nome (tag). Più standard possono essere specificati quando separati da virgole. Esempio: according to: wcag2a, section508

Tutto il nomi dei tag sono documentati oltre a un elenco completo delle descrizioni delle regole che corrisponde a ciascun tag.

Then the page should be axe clean according to: best-practice

Clausola di Verifica delle Regole Aggiuntive

Questa clausola consente di aggiungere ulteriori regole alle tue regole esistenti. È possibile specificare una singola regola tramite ID della regola o un elenco di regole separate da virgole. Consulta la documentazione delle regole per un elenco delle regole e dei loro ID. Usa un punto e virgola (;) o la parola and per separare la clausola di controllo delle regole da qualsiasi clausola precedente.

Then the page should be axe clean checking: color-contrast

Then the page should be axe clean according to: wcag2a; checking: color-contrast
Then the page should be axe clean according to: wcag2a and checking: color-contrast

Clausola di Verifica Solo delle Regole Specificate

Aggiungendo la parola only alla clausola di controllo delle regole, puoi modificare il significato del passo. Come descritto in precedenza, la clausola di controllo delle regole specifica ulteriori regole da eseguire. Solo le regole specificate vengono verificate se viene utilizzata la parola only. Consulta la documentazione delle regole per un elenco delle regole e dei loro ID. Usa un punto e virgola (;) o la parola and per separare la clausola di controllo delle regole da qualsiasi clausola precedente.

Then the page should be axe clean checking only: color-contrast

Clausola di Salto delle Regole

La clausola di salto delle regole specifica quali regole saltare dalla configurazione delle regole esistente. Le regole da saltare sono specificate tramite ID di regola separati da virgole. Consulta la documentazione delle regole per un elenco delle regole e dei loro ID. Usa un punto e virgola (;) o la parola and per separare la clausola di controllo delle regole da qualsiasi clausola precedente.

Then the page should be axe clean skipping: color-contrast

Then the page should be axe clean according to: wcag2a; skipping: color-contrast
Then the page should be axe clean according to: wcag2a but skipping: color-contrast

Clausola di Selezione del Set di Regole

Accedi ai set di regole taggati nell'axeDriver tramite una clausola Cucumber. Questa funzionalità ti consente di specificare un set di regole (Es: 508, wcag2, wcag2.1) per eseguire un audit dell'accessibilità della pagina.

Then the page should be axe clean according to ruleset: wcag2.1

Servizio di Utilizzo

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

Per impostazione predefinita, il servizio di utilizzo è abilitato e l'URL di default è 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 di ambiente

Queste variabili d'ambiente ti permettono di configurare il servizio di utilizzo e di modificare le proprietà degli eventi riportati.

Prossimi Passi

Per un ulteriore utilizzo dei risultati della tua scansione Axe DevTools, come la creazione di report, consulta la documentazione del pacchetto Axe DevTools Java Selenium

Risoluzione dei Problemi

Se riscontri problemi nell'impostazione dei tuoi test di accessibilità, contatta direttamente il tuo rappresentante Deque, raggiungici tramite il nostro help desk, o inviare un'email. Siamo felici di aiutarti a far decollare i tuoi sforzi per i test di accessibilità.