Cucumber JavaScript

Prerequisites

In order to test your content using Cucumber with axe DevTools, you first need it imported and initialized in your project.

If you haven't completed this step yet, please select one of the following to setup with Cucumber:

1. Webdriverjs Setup
2. WebdriverIO setup
3. Puppeteer Setup

Cucumber with axe DevTools

Once you have selected an implementation to work with Cucumber, you can now create a reusable step that can be used in each of your features that will test your page level content or a component specifically.

Creating a Page Scan Step

To create a Cucumber step that scans the entire page for accessibility issues, create a Then function that takes a string for the pages name. Next, within the step, simply create a new instance of the axe DevTools driver of your choice and then call analyze().

The results from the scan can then be used with the axe DevTools reporter package and used for all reporting functionality. See Generating Reports from axe DevTools JSON Results for more information on axe DevTools reporting.

The following example shows the usage of a Then function:

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

The following example shows a Cucumber scenario with a Then step for testing accessibility:

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

Creating a Component Scan Step

To create a Cucumber step that scans only a portion of the page or a component for accessibility issues, create a Then function that takes a string for the components name and another string for the css selector. Next, within the step, simply create a new instance of the axe DevTools driver of your choice and then call analyze().

The results from the scan can then be used with the axe DevTools reporter package and used for all reporting functionality. See Generating Reports from axe DevTools JSON Results for more information on axe DevTools reporting.

The following example shows how to use Then with a selector to scan part of a page:

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

This example shows how to use the Then step with a scenario that only scans part of a page:

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"

Now that you've successfully completed an accessibility scan, you're ready to move on to more advanced scanning topics like generating reports and using the results object.

Troubleshooting

If you have trouble with getting scan results, contact your Deque representative directly, reach us via our support desk, or send us an email. We'll be happy to help.

For more information about axe DevTools in general, see the axe DevTools welcome page