SDK Primer Part 3: Testing framework guidance (Cucumber example)

Here is an example of how to set up and start using a popular testing framework, Cucumber. 

On this page: 

• What's Cucumber
• Prerequisites and critical files
• Installing and setting up Cucumber
• Building a feature file
• Adding the SDK

What's Cucumber

This section describes how to start using Cucumber. This open-source testing tool supports Behavior-Driven-Development (BDD), which empowers teams to write test scenarios in plain language, called Gherkin. Use Cucumber to make tests understandable to all participants of the testing process, including those without a technical background. Before you begin, meet the mandatory prerequisites. 

Prerequisites and critical files

You must know and be able to define and access: 

• The mechanics of using Cucumber with Javascript. Read this 10- minute getting started tutorial created by the Cucumber developers.
• Gherkin syntax
  • Features
  • Scenarios
  • Step definitions

• Critical files. The following table lists the critical files: 

  Critical file	File purpose
  ./features/web_automation.feature	Written in Gherkin. The test script runner. Definitions of what will run needs matching descriptors from feature.js
  ./features/step_definitions/steps.js	Translates Gherkin to JavaScript.
  ./continuum.conf.js	Holds our SDK settings, including everything that we need to send the results to your Level Access Platform organization.

Installing and setting up Cucumber

In this procedure, use the Selenium sample file, web_automation.js.

To install and set up Cucumber:  

1. Ensure you are at the root folder of your existing project. It is located where the package.json exists.
2. Create the folder structure:

mkdir features
mkdir features/step_definitions
mkdir features/support

3. Install Cucumber:

npm install --save-dev @cucumber/cucumber

4. Set Cucumber to run by editing the package.json file using a simple text editor. In the scripts key, change the following lines:

...
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},

to these lines:

...
"scripts": {
  "test": "cucumber-js"
},

Now, you have the basic setup. Proceed with a simple Cucumber test.

Building a feature file

Gherkin allows you to build your tests in simple English. We'll use variables to take advantage of Cucumbers Scenario Outline syntax.

To build a feature file:

1. Create a features/search.feature file and paste in the following text:

Feature: Search functionality

Scenario Outline: Search for a search term and be directed to test results

        Given I am on the search page

        When I type "<search_term>" into the search bar

        And I click search

        Then I am shown the search results

Examples: 

        |search_term|
        |potatoes|

Note: This gives us a minimum required set of steps that we want Cucumber to perform. This file is the outline of the test. It is written in Gherkin, in plain English, and is very clear on what we will be doing. Now that we have the general outline, we must write some code. Each of those steps in the outline requires a matching JavaScript function. 

Our features/search.feature file starts with importing the Cucumber, Selenium, and SDK libraries:

const {Given, Then, When} = require('@cucumber/cucumber');
const { Builder, By, Capabilities, Key } = require('selenium-webdriver');
const {Continuum} = require('@continuum/continuum-javascript-professional');

2. Add driver information:

require("chromedriver");

// driver setup
const capabilities = Capabilities.chrome();
capabilities.set('chromeOptions', { "w3c": false });
const driver = new Builder().withCapabilities(capabilities).build();
Create a function to navigate to the duckduckgo.com homepage:
Given('I am on the search page', async function () {
    const url = 'www.duckduckgo.com';
await this.driver.get(url);
});

At this point, we have a fully working automated Cucumber test scenario running selenium. Procced with adding the SDK. 

Adding the SDK

To add the SDK: 

1. Create a features/a11y.feature file and populate it as follows: 

Feature: Search and Test for Accessibility

Scenario Outline: Run all automated accessibility tests at the homepage and at the results page.

        Given I am on the search page

        And the Level Access SDK is initialized

        When I use Continuum to test assertions

        When I type "<search_term>" into the search bar

        And I click search

        When I use Continuum to test assertions

        Then Assertions are sent to the Level Access Platform

  Examples: 

        |search_term|
        |potatoes|

2. Initialize the SDK:

And('the Level Access SDK is initialized', async function () {
await Continuum.setUp(this.driver, require('path').resolve(__dirname, "../support/continuum.conf.js"), null);
});

3. Set the features/steps/a11y_steps.js file to the following:

When('I use Continuum to test assertions', async function () {
await Continuum.runAllTestsForAssertions();
});

Then ('Assertions are sent to the Level Access Platform', async function () {

    const levelAccessPlatformReportingService = Continuum.LevelAccessPlatformReportingService;
    await levelAccessPlatformReportingService.openScanSession({
        sessionName: 'Sample Session'
    });
    try {
        const assertions = Continuum.getAssertions();
        await levelAccessPlatformReportingService.submit(assertions);
    } finally {
        await levelAccessPlatformReportingService.completeScanSession();
    }
});

This concludes our SDK Primer. To return to previous sections, go to:

• SDK Primer Part 1: Basic SDK concepts
• SDK Primer Part 2: Programming language guidance (JavaScript Coding Example)