Visual Studio Code, WebdriverIO, JavaScript and Chrome - cucumber html test report

 Apart Allure test report we can use Cucumber test report in html format.

We will follow this instructions.

1. Install wdio-cucumberjs-json-reporter that will create json files with test results data for each feature:

npm install wdio-cucumberjs-json-reporter --save-dev

2. Install multiple-cucumber-html-reporter that will generate Cucumber test report html:

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

3. Install fs-extra that will clear directory with test reports before new test run:

npm install fs-extra --save-dev




4. Edit wdio.conf.js file:

• add in the beginning:

const { generate } = require('multiple-cucumber-html-reporter');
const { removeSync } = require('fs-extra');

• find in the file commented onPrepare and replace it with the following code:

     onPrepare: () => {
        // Remove the `.tmp/` folder that holds the json and report files
        removeSync('reports/html-results');
      },
      /**
       * Gets executed after all workers got shut down and the process is about to exit.
       */
      onComplete: () => {
        // Generate the report when it all tests are done
        generate({
          // Required
          // This part needs to be the same path where you store the JSON files
          // default = '.tmp/json/'
          jsonDir: 'reports/html-results',
          reportPath: 'reports/html-results',
          // for more options see https://github.com/wswebcreation/multiple-cucumber-html-reporter#options
        });
      },

5. Run the tests:

npm run test:bdd

6. Go to the folder with test results and find html:

7. Open the file:

We can observe steps for each test scenario: