If you know Node.js well and want to write a BDD test automation, you are probably reading the appropriate article now.

As we know Node.js + Cucumber.js can create a working test script. An automation engineer needs to know the details of gherkin format to create a feature file that matches the gherkin format, and also grasp tips to generate the matching step definitions, and to update script to maintain these matchings when steps are changed.

Here I would like to introduce you a development tool that makes life easier for Cucumber.js developers. CukeTest is a tool on Windows that is specially designed for Cucumber.js script authoring, and one doesn’t have to do all the chore of maintaining the mapping among code and feature files. CukeTest can generate code for the steps you created, and also locate the step with one step definition.

Here is a simple Web UI testing example to show how. There are 6 steps to create the script:

Step 1. Install CukeTest

First install CukeTest from CukeTest web site. You can choose to download and install desktop version from this site, or install Windows Store version from Microsoft Store if you are using Windows 10.

Step 2. Create Project

Then click "New Project" to create a project, give it a name “bing-search”, select "Web" template and a folder to put this project in, like the dialog below:

With the “Web” template, you will have feature file, code and npm packages configured for web testing. For example, Default cucumber.js timeout value is 5 seconds, and some web pages loading can easily exceed this time out value. So in this web template, it configures the timeout value to be 60 seconds (in hooks.js):

//set default step timeout
setDefaultTimeout(60 * 1000);

CukeTest has two modes to edit feature file, Visual mode and Text Mode. With Visual mode, you can double click any fields to start editing, for example, feature title, description, step text, etc. And when editing a step, you can also select any of the keywords from the drop down, to make the statement meaningful. With this, you don’t have to remember all available keywords. When finishing editing one field, you can press Tab or Shift-Tab key to move forward or backward to other fields. The following picture shows you the editing UI:

Step 3. Create Scenario

Here comes the third step, which is to create a scenario to be tested. Please update your feature file with the same content as the above picture. Or you can copy the text below into your feature file.

Feature: Bing Search
This is a sample feature to test search engine

  Scenario: Search something from bing
    Given browse to web site "https://www.bing.com"
    When input keyword "Mars"
    Then click Search button
    And search result should contain "NASA"

To copy the above content into your feature file, you can open your feature file, click “Text” button on the toolbar to switch to text model, and then replace the whole content with the above text. You can then switch back to Visual model by clicking “Visual” button. In CukeTest, you can edit content in one of these two modes, and switch between them, which gives you tremendous flexibility in Gherkin file editing.

Step 4. Generate Code

Now you can generate code for these two steps, make sure you are in Visual mode, and click every gray button on the right side of each step text. You can see that the code has been generated for each of the steps, and the button color changes from gray to orange.

In CukeTest, this button will appear in gray for a step without matching step definition. Once there is a matching step definition, the button will change its color to indicate new status, orange if there are matching step definitions and the definition is not implemented, or green if the matching step definition is implemented. As we know, in Cucumber.js the default unimplemented code stub returns a string "pending", which is the code generated by default.

In CukeTest you can not only generate code and jump to it, but also jump from the step definition code to the corresponding step:

Step 5. Implement Code

Next step is to implement each of these steps. I assume you already have some knowledge of how to use selenium-webdriver to automate a browser. You can enter code similar to the following:

const { Given, When, Then } = require('cucumber');
const assert = require('assert');
const { driver } = require('../support/web_driver');

Given(/^browse to web site "([^"]*)"$/, async function(url) {
    return driver.get(url);
});

When(/^input keyword "([^"]*)"$/, async function (keyword) {
    return driver.findElement({ id: "sb_form_q" }).sendKeys(keyword);
});

Then(/^click Search button$/, async function () {
    return driver.findElement({ id: "sb_form_go" }).click();
});

Then(/^search result should contain "([^"]*)"$/, async function (keyword) {
    await driver.sleep(1000);
    let result = await driver.findElement({ id: "b_results" }).getText();
    return assert.ok(result.includes(keyword));
});

Compared with automatically generated code, the changed part is the code within the “Given”, “When” and “Then” function.

You may notice that once you implement the code, the button next to the step text shows green instead of orange, which indicates the step has matching step definition code that is implemented.

Now you finish creating the test script. Anything left to make this script run…?

You’ve probably thought of the right one, which is to download dependent npm packages. For this script to run, one needs to install selenium-webdriver package as well as some other browser driver packages. When creating the project from “Web” template, your package.json has been pre-filled with popular packages as follows:

If you don’t want all these browser drivers, you can update the package.json by removing the corresponding entries from package.json. For example, if you only want to run test Chrome browser, you can remove “geckodriver” which is for FireFox, or “iedriver” which is for Internet Explorer. Remember if you remove these two packages, you should also update web_driver.js file in your project and remove the corresponding “require” statement to avoid runtime error.

To install packages you just need to open command prompt, change directory to this folder(which is “bing-search”), and run “npm install” from command line.

Another thing you can do in CukeTest is to validate the script before running. It will validate all aspects of Cucumber.js script, including JS syntax error, unimplemented steps, mismatch between steps and step definitions. It will save developers time compared to running script and then finding errors. For example, in the picture below, I deliberately create an error in the script, and it shows the following screen after I click "Validate Project". It shows a warning message, and clicking the warning message will open the corresponding file location for you.

Step 6. Run Script

Now you can really run your script. This is the simplest step: you just click the “Run Project” button from the toolbar and that’s it. “Run Project” is the button with double arrow. It will launch the browser, search the keyword “Mars”, and validate whether the search result contains keyword “NASA”. If it does not, it will show error in output window and in report.

Run the project you can get html report that shows how many features or scenarios succeeded in this run:

And also in the detailed part, you can see whether each step succeeded or failed. And also it will capture a screenshot before the end of each scenario, like the following picture.

Screenshot is quite helpful for UI testing, which gives tester confidence that automation is really doing the work.

Capturing screenshot is a capability of Selenium-webdriver, and you can customize this behavior in your code. For example, instead of capturing one screenshot for each scenario, you can capture one screenshot for each step, or for each failed step. This report is in html format, so it can be mailed to anyone who wants to view the report, or export it as a PDF file from within CuteTest.

In CukeTest one can also capture videos during the test run.

You probably notice there are multiple ways to run your test, including running the project, running a feature file, running a single scenario, or configure a project profile to run, which you can customize scenario filter or report formats. Only running project shows you the html report. For others, CukeTest will show you the result in Output panel.

Summary

Node.js + Cucumber.js is a great test framework of choice, as it can fully leverage existing rich testing automation libraries for node.js. For example, for web there are “selenium-webdriver”, “webdriverio”, “wdio”, “puppeteer” etc., for RESTful API, there are “got”, “request”, “axios” etc., for mobile, there are “appium”, "macaca" etc. And with CukeTest, creating BDD test script is very easy and intuitive. One doesn’t have to remember details on Cucumber syntax to create a working script.

The script CukeTest created can run on Node.js + Cucumber.js on non-Windows platforms, e.g. Linux or Mac. Some further reading on how to create automation scripts with Node.js + Cucumber.js:

• BDD Web Automation Series
• Windows Application Automation Series
• Qt Automation