Cucumber JavaScript

Prerequisiti

Per testare i tuoi contenuti utilizzando Cucumber con axe DevTools, devi prima importarli e inizializzarli nel tuo progetto.

Se non hai ancora completato questo passaggio, seleziona una delle seguenti opzioni per la configurazione con Cucumber:

1. Configurazione di WebDriverJS
2. Configurazione WebdriverIO
3. Configurazione di Puppeteer

Cucumber con axe DevTools

Dopo aver selezionato un'implementazione con cui lavorare con Cucumber, puoi creare un passaggio riutilizzabile che può essere impiegato in ciascuna delle tue funzionalità per testare il contenuto a livello di pagina o un componente specifico.

Creazione di una fase di scansione della pagina

Per creare un passaggio Cucumber che analizza l'intera pagina per problemi di accessibilità, crea una funzione Then che accetta una stringa per il nome della pagina. Quindi, all'interno del passaggio, crea semplicemente una nuova istanza del driver axe DevTools di tua scelta e quindi chiama analyze().

I risultati della scansione possono quindi essere utilizzati con il pacchetto reporter axe DevTools e impiegati per tutte le funzionalità di reporting. Per ulteriori informazioni sulla creazione di report di axe DevTools, vedere Generazione di report dai risultati JSON di axe DevTools

L'esempio seguente mostra l'utilizzo della funzione Then :

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

L'esempio seguente mostra uno scenario Cucumber con un passaggio Then 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 un passaggio di scansione dei componenti

Per creare un passaggio Cucumber che analizzi solo una parte della pagina o un componente per problemi di accessibilità, crea una funzione Then che accetti una stringa per il nome del componente e un'altra stringa per il selettore css. Successivamente, all'interno del passaggio, crea semplicemente una nuova istanza del driver axe DevTools di tua scelta e poi chiama analyze().

I risultati della scansione possono quindi essere utilizzati con il pacchetto reporter axe DevTools e impiegati per tutte le funzionalità di reporting. Per ulteriori informazioni sulla creazione di report di axe DevTools, vedere Generazione di report dai risultati JSON di axe DevTools

L'esempio seguente mostra come utilizzare Poi con un selettore per scansionare una 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 il passaggio Poi con uno scenario che esegue la scansione solo di una 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 di accessibilità, sei pronto a passare ad argomenti di scansione più avanzati come generazione di report e utilizzo dell'oggetto risultati.

Risoluzione dei problemi

In caso di problemi con l'ottenimento dei risultati della scansione, contattare direttamente il rappresentante Deque, contattarci tramite il nostro support desk o inviarci un'e-mail. Saremo lieti di aiutarti.

Per maggiori informazioni su axe DevTools in generale, vedere la pagina di benvenuto di axe DevTools.(welcome-axe-devtools)