Visual Studio Code, selenium-webdriver, JavaScript, Cucumber and Chrome

Now we will use selenium-webdriver and Cucumber.js for end-to-end testing for the same test scenario.

(Be aware: selenium-webdriver and webdriver.io are not the same.)

I will use Visual Studio Code as a code editor again and Windows system.

For better Cucumber support you may install the following VSC extensions (Ctrl + Shift + X):

• Cucumber (Gherkin) Full Support
• Search and install 'Snippets and Syntax Highlight for Gherkin (Cucumber)

1. Create a directory for the project, initialize the node project in the directory:

npm init -y

2. Then install selenium-webdriver :

npm install selenium-webdriver --save-dev

3. Install cucumber.js :

npm install --save-dev @cucumber/cucumber




4. Then install chromedriver:

npm install chromedriver --save-dev

5. Install cucumber-html-reporter :

npm install cucumber-html-reporter --save-dev

So, the dev dependencies part in package.json looks like:

6. Add the following script:

"test": "./node_modules/.bin/cucumber-js features -f json:report/cucumber_report.json"

7. Create features directories with support and steps subdirectories:

8. In support folder create env.js file:

const { setDefaultTimeout } = require('@cucumber/cucumber');
setDefaultTimeout(60 * 1000);

9. In support folder create word.js file:

require('chromedriver');

const { setWorldConstructor } = require('@cucumber/cucumber');
const webdriver = require('selenium-webdriver');
const Capabilities = require('selenium-webdriver/lib/capabilities')
        .Capabilities;
const capabilities = Capabilities.chrome();

function World({ attach, parameters }) {
    this.driver = new webdriver.Builder()
    .withCapabilities(capabilities).build();
}

setWorldConstructor(World);

10. In the project "root" directory create index.js file:

const reporter = require('cucumber-html-reporter');
 
const options = {
        theme: 'bootstrap',
        jsonFile: 'report/cucumber_report.json',
        output: 'report/cucumber_report.html',
        reportSuiteAsScenarios: true,
        scenarioTimestamp: true,
        launchReport: true,
        metadata: {
            "App Version":"0.0.1",
            "Test Environment": "STAGING",
            "Platform": "Windows 10",
            "Executed": "Local"
        }
    };
 
    reporter.generate(options);

11. In features directory create first.feature file with the first test scenario written in Gherkin language:

Feature: Automation Playground blog
As a test automation enthusiast
I want to write test for Automation Playground blog
So that I can practice Cucumber

Scenario: Verify the blog's title
  Given the Automation Playground blog opened
    Then the Automation Playground blog title should be equal <title>
     Examples:
            |title                   |
            |"Automation Playground" |

12. In steps directory create first.steps.js file with the steps difinitions:

const { Before, Given, When, Then } = require('@cucumber/cucumber')
const assert = require('assert')

const base_url = 'https://automation-playground.blogspot.com/'

Given('the Automation Playground blog opened', function () {
  return this.driver.get(base_url);
});

Then('the Automation Playground blog title should be equal {string}', async function (title) {
  const actualTitle = await this.driver.getTitle();
  assert(title, actualTitle);
});

13. Also in steps directory create hooks.js file:

const { After, Before } = require('@cucumber/cucumber');

After(function(){
        return this.driver.quit();
  })

14. In the project "root" directory create report subdirectory with empty cucumber_report.json file

15. Run the test:

npm test

The following test scenario will be executed: 

•  run Chrome browser
•  go to https://automation-playground.blogspot.com
•  verify the blog's title
•  close Chrome browser

 The test passed!

16. Execute the following command to create html report from now populated cucumber_report.json:

node index.js