Visual Studio Code, WebdriverIO, JavaScript and Chrome

 For this setting I will use the great article: WebDriverIO Integration With Cucumber.

1. npm init -y

2. npm i --save-dev @wdio/cli

3. npx wdio config

4. npm install @wdio/allure-reporter --save-dev

5. npm install -g allure-commandline --save-dev

6. npm install --save moment

7. Create features directory with pages and step-definitions subdirectories. Create reports directory.

8. The first test scenario will be the same, so create first.feature file in features directory:

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 open
    Then the Automation Playground blog title should be equal <title>
     Examples:
            |title                   |
            |"Automation Playground" |

9. WebdriverIO provides ability to easily create page objects, so create page objects in pages directory. The base page object:

module.exports = class BasePage {
        open (path) {
            browser.url(path);
        }
    }

Page object for the Home page:

const BasePage = require('./base.page')

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

class HomePage extends BasePage {
    open() {
        super.open(base_url)
    }
}

module.exports = new HomePage();

10. Create steps definition file in the corresponding directory. The content will be slightly differ from the previous setup:

const { Before, Given, When, Then } = require('@cucumber/cucumber')
const HomePage = require('../pages/home.page');

Given('the Automation Playground blog open', function () {
  HomePage.open()
});

Then('the Automation Playground blog title should be equal {string}', async function (title) {
  expect(browser).toHaveTitle(title);
});

11. Edit wdio.conf.js file according to the article

afterStep: function (step, context, { error, result, duration, passed, retries }) {
        if(error) {
            browser.saveScreenshot('./reports/screenshots/Fail_' + 
                                   moment().format('DD-MMM-YYYY-HH-MM-SS') + '.png')
        }
     },

and

    reporters: [['allure', {
            outputDir: './reports/allure-results'
        }]],   

and

   cucumberOpts: {
        // <string[]> (file/dir) require files before executing features
        require: ['./features/step-definitions/first.steps.js'],

and put on the top of the config file the following:

const moment= require('moment')

12.

And the scripts in package.json :

  "scripts": {
    "test:bdd": "npx wdio run ./wdio.conf.js",
    "generate:allure" : "allure generate reports/allure-results/ --clean"
  },

12. Run the test: 

npm run test:bdd

13. On my Windows computer I have to run cmd as Administrator, go to the folder and execute the following commands to generate and open Allure test report:




 allure generate reports/allure-results/ --clean

and then:

 allure open

The test report appears in browser: