Cucumber JavaScript

Vereisten

Om je content te testen met Cucumber en Axe DevTools, moet je het eerst importeren en initialiseren in je project.

Als je deze stap nog niet hebt voltooid, selecteer dan een van de volgende om op te zetten met Cucumber:

1. WebDriverJS Setup
2. WebdriverIO Setup
3. Puppeteer Setup

Cucumber met Axe DevTools

Nadat je een implementatie hebt gekozen om met Cucumber te werken, kun je nu een herbruikbare stap maken die in elk van je features kan worden gebruikt om je paginaniveau-content of specifiek een component te testen.

Een Pagina Scan Stap Maken

Om een Cucumber-stap te maken die de gehele pagina scant op toegankelijkheidsissues, maak je een Dan-functie die een string voor de naam van de pagina gebruikt. Maak vervolgens binnen de stap eenvoudig een nieuwe instantie van de Axe DevTools-driver van jouw keuze en roep dan analyseren() aan.

De resultaten van de scan kunnen vervolgens worden gebruikt met het Axe DevTools-reporterpakket en worden gebruikt voor alle rapportagefunctionaliteiten. Zie Rapporten Genereren uit Axe DevTools JSON-resultaten voor meer informatie over Axe DevTools-rapportage.

Het volgende voorbeeld toont het gebruik van een Dan-functie:

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

Het volgende voorbeeld toont een Cucumber-scenario met een Dan-stap voor het testen van toegankelijkheid:

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

Een Component Scan Stap Maken

Om een Cucumber-stap te maken die slechts een deel van de pagina of een component scant op toegankelijkheidsissues, maak je een Dan-functie die een string voor de naam van de component en een andere string voor de css-selector gebruikt. Maak vervolgens binnen de stap eenvoudig een nieuwe instantie van de Axe DevTools-driver van jouw keuze en roep dan analyseren() aan.

De resultaten van de scan kunnen vervolgens worden gebruikt met het Axe DevTools-reporterpakket en worden gebruikt voor alle rapportagefunctionaliteiten. Zie Rapporten Genereren uit Axe DevTools JSON-resultaten voor meer informatie over Axe DevTools-rapportage.

Het volgende voorbeeld laat zien hoe je Dan met een selector gebruikt om een deel van een pagina te scannen:

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

Dit voorbeeld laat zien hoe je de Dan-stap gebruikt met een scenario dat slechts een deel van een pagina scant:

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"

Nu je met succes een toegankelijkheidsscan hebt voltooid, ben je klaar om door te gaan naar meer geavanceerde scanthema's zoals rapporten genereren en met behulp van het resultatenobject.

Probleemoplossing

Als je problemen hebt met het verkrijgen van scanresultaten, neem dan direct contact op met je Deque-vertegenwoordiger, bereik ons via onze helpdesk of stuur ons een e-mail. We helpen je graag.

Voor meer informatie over Axe DevTools in het algemeen, zie de Axe DevTools welkomstpagina