Scrivi i test Cucumber

Utilizzo di Cucumber con axe DevTools

Prerequisiti

Per scrivere test di accessibilità e produrre risultati, è necessario aver già creato un file di test con axe DevTools e il Selenium WebDriver preimportato e preinizializzato. Se non lo hai ancora fatto, leggi questa guida per sapere come farlo.

Configurazione

Per prima cosa, 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 di test

Prima di poter testare una pagina, è necessario accedervi. Il primo passo è creare un'istanza di Selenium WebDriver e accedere a una pagina

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

Quindi, puoi creare un oggetto driver di scansione axe DevTools e passarlo nel WebDriver

AxeDriver axeDriver = new AxeDriver(webDriver);

Infine, includi axeDriver nelle definizioni dei tuoi passaggi

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

È quindi possibile testare l'accessibilità della pagina. Attualmente, axe DevTools supporta i test Pico e Spring tramite Cucumber.

Utilizzo

Accessibilità Passaggi di Cucumber

Gli esempi di controlli di accessibilità riportati di seguito utilizzano Then the page should be axe clean, ma tutti i controlli funzionano in modo intercambiabile con Then the page should be audited for accessibility. La differenza tra i due è se il test fallirà in caso di violazioni dell'accessibilità con Then the page should be axe clean, oppure non fallirà con Then the page should be audited for accessibility.

Per costruire uno step Cucumber per l'accessibilità di axe, iniziare con lo step base e aggiungere tutte le 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 di base

Il passaggio base è il componente centrale del passaggio Cucumber. Si tratta di un passaggio completo che verifica che la pagina attualmente caricata sia accessibile. Esegue un controllo dell'accessibilità della tua pagina. I log di audit segnalano i problemi di accessibilità in target/axe-report/accessibility-check.log e creano 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 di applicazione

Axe DevTools consente di effettuare scansioni di accessibilità in modo inclusivo ed esclusivo. Inoltre, questi scope possono interagire tra loro per creare enclaves and exclaves complesse di scope. Questi scope funzionano tramite selettori CSS.

Clausola di inclusione

La clausola di inclusione within "#selector" specifica quali elementi controllare nella pagina. Verranno scansionati solo gli elementi compresi nell'ambito selezionato. La clausola di inclusione deve includere un selettore CSS valido racchiuso tra virgolette doppie. Utilizzare i selettori composti per selezionare più elementi. Ad es. 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. Non verrà scansionato alcun elemento compreso nell'ambito selezionato. La clausola di esclusione deve includere un selettore CSS valido racchiuso tra virgolette doppie. Utilizzare i selettori composti per selezionare più elementi. Ad esempio: excluding "#widget, .ad"

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

Concatenare inclusione ed esclusione

Per concatenare le clausole di inclusione ed esclusione, utilizzare 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

Esistono alcuni modi per modificare la configurazione delle regole standard utilizzando l'API Cucumber. È possibile selezionare le regole per gruppo tramite l'uso di tag oppure selezionare le regole singolarmente tramite il loro ID.

Clausola del tag della regola

La condizione tag specifica quale standard (o standard) di accessibilità utilizzare nel controllo della pagina. Specificare gli standard di accessibilità per nome (tag). È possibile specificare più standard separati da virgole. p.e. according to: wcag2a, section508

Tutti i nomi dei tag sono documentati oltre a un elenco completo delle descrizioni delle regole che corrispondono a ciascun tag.

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

Controllare la clausola delle regole aggiuntive

Questa clausola consente di aggiungere regole aggiuntive a quelle esistenti. È possibile specificare una singola regola tramite ID regola oppure un elenco di regole separate da virgole. Consulta la documentazione delle regole per un elenco delle regole e dei relativi ID. Utilizzare un punto e virgola (;) o la parola and per separare la clausola checking-rules da tutte le clausole precedenti.

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 delle regole di controllo, è possibile modificare il significato del passaggio. Come descritto in precedenza, la clausola checking-rules specifica regole aggiuntive da eseguire. Se viene utilizzata una certa parola only , vengono controllate solo le regole specificate. Consulta la documentazione delle regole per un elenco delle regole e dei relativi ID. Utilizzare un punto e virgola (;) o la parola and per separare la clausola checking-rules da tutte le clausole precedenti.

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

Clausola di esclusione delle regole

La clausola skipping-rules specifica quali regole saltare dalla configurazione delle regole esistente. Le regole da ignorare sono specificate tramite ID regola separati da virgole. Consulta la documentazione delle regole per un elenco delle regole e dei relativi ID. Utilizzare un punto e virgola (;) o la parola "to" and per separare la clausola checking-rules da tutte le clausole precedenti.

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 in axeDriver tramite una clausola Cucumber. Questa funzionalità consente di specificare un set di regole (ad esempio: 508, wcag2, wcag2.1) per verificare l'accessibilità della pagina.

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

Servizio di uso

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

Per impostazione predefinita, il servizio di utilizzo è disabilitato e l'URL predefinito è https://usage.deque.com.

Variabili ambientali

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

Prossimi passi

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

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