Cucumber JavaScript
Testare usando JavaScript, Axe DevTools e Cucumber
Prerequisiti
Per testare il tuo contenuto utilizzando Cucumber con Axe DevTools, devi prima importarlo e inizializzarlo nel tuo progetto.
Se non hai ancora completato questo passaggio, seleziona uno dei seguenti per configurare con Cucumber:
Cucumber con Axe DevTools
Una volta selezionata un'implementazione da utilizzare con Cucumber, puoi ora creare uno step riutilizzabile che può essere utilizzato in ciascuna delle tue funzionalità per testare il contenuto della tua pagina o un componente specifico.
Questa documentazione mostra l'uso con l'integrazione WebDriverJS, tuttavia funzionerà allo stesso modo con WebdriverIO e Puppeteer.
Creazione di uno Step di Scansione della Pagina
Per creare uno step in Cucumber che scansi l'intera pagina per problemi di accessibilità, crea una funzione Quindi che prenda una stringa per il nome delle pagine. Successivamente, all'interno dello step, crea semplicemente una nuova istanza del driver Axe DevTools di tua scelta e poi chiama analizza().
I risultati della scansione possono quindi essere utilizzati con il pacchetto reporter di Axe DevTools e usati per tutte le funzionalità di reporting. Vedi Generazione di report dai risultati JSON di Axe DevTools per maggiori informazioni sulla reportistica di Axe DevTools.
Il seguente esempio mostra l'utilizzo di una funzione Quindi:
Then('I check if {string} is axe clean', async pageName => {
const axeDriver = await new AxeDevtoolsWebdriverJS(driver, "wcag2");
const results = await axeDriver.analyze();
axeReporter.logTestResult(pageName, results);
assert.strictEqual(results.violations.length, 0);
});Il seguente esempio mostra uno scenario Cucumber con uno step Quindi per testare l'accessibilità:
Feature: abcdTech search
As a user, I want to search for computers on abcdTech.
Scenario: Searching for computers
Given I am on the abcdTech homepage
Then I audit "homepage" for accessibility issues
When I search for "computers"
Then I see the page title "Gefälscht~~~Gefälscht CompuTech~~~"
Then I check if "searchPage" is axe clean
Creazione di uno Step di Scansione del Componente
Per creare uno step in Cucumber che scansi solo una parte della pagina o un componente per problemi di accessibilità, crea una funzione Quindi che prenda una stringa per il nome dei componenti e un'altra stringa per il selettore css. Successivamente, all'interno dello step, crea semplicemente una nuova istanza del driver Axe DevTools di tua scelta e poi chiama analizza().
I risultati della scansione possono quindi essere utilizzati con il pacchetto reporter di Axe DevTools e usati per tutte le funzionalità di reporting. Vedi Generazione di report dai risultati JSON di Axe DevTools per maggiori informazioni sulla reportistica di Axe DevTools.
Il seguente esempio mostra come utilizzare Quindi con un selettore per scansionare parte di una pagina:
Then('I check if {string} is axe clean with selector {string}', async (pageName, selector) => {
const axeDriver = await new AxeDevtoolsWebdriverJS(driver, "wcag2");
const results = await axeDriver.include(selector).analyze();
axeReporter.logTestResult(pageName, results);
assert.strictEqual(results.violations.length, 0);
});Questo esempio mostra come utilizzare lo step Quindi con uno scenario che scansiona solo parte di una pagina:
Feature: abcdTech cart flow
As a user, I want to find a computer and add it to cart
Scenario: Selecting a new computer and adding to cart
Given I am on the abcdTech laptops page
Then I audit "laptops" for accessibility issues
When I click on more details
Then I see the proper page title "Gefälscht~~~Gefälscht CompuTech~~~"
Then I audit "mainContent" for accessibility issues with selector "#container"
Ora che hai completato con successo una scansione dell'accessibilità, sei pronto per passare a argomenti di scansione più avanzati come generazione di report e utilizzando l'oggetto risultati.
Risoluzione dei problemi
Se hai problemi a ottenere i risultati della scansione, contatta direttamente il tuo rappresentante Deque, raggiungici tramite il nostro sportello di supporto, o inviare un'email. Saremo felici di aiutarti.
Per ulteriori informazioni su Axe DevTools in generale, consulta la pagina di benvenuto di Axe DevTools