Generating allure reports in webdriverio

Webdriver provides lot of reports which we can add as a part of the automation suite. You can find details in the webdriverio documentation here

Depending on your requirement you can look for the options. The product on which I am working on, is a customer facing application, so we wanted to consider variant matrix covered as a part of browsers, Operating system, versions of them. Also for the stakeholders to show how the tests are running & moreover the coverage, we have to integrate the reports in our post scripts.

Let’s understand to generate & serve the reports what shall we need to do.

After some research I found, allure report quite impressive. As it provides a wide view of the test scripts in multiple variant.

Let’s make it run

package.json

Add these dependencies in package.json

    "@wdio/allure-reporter": "^6.0.12",
    "allure-commandline": "^2.13.0",
 

npm command

npm i @wdio/allure-reporter

yarn command

yarn add @wdio/allure-reporter

Configuration required

Its always good to make the scripts to run the command, rather than just manually typing it all the time. For that we can use scripts option in package.json

package.json

"scripts": {
    "allure-report": "allure generate report/allure-results --clean && allure open",
    "report:history": "mkdir -p report/allure-report/history allure-results/history && cp -a report/allure-report/history report/allure-results/",
    "allure": "allure serve report/allure-results",
    "report.ci": "allure generate report/allure-results --clean -o allure-report",
  },
 

I have created these scripts , you can use any of them as per your requirement.

Directory set up

You need to create a report directory at your root folder to get this done.

You can change it to any other name as per your wish, for that just change the name of the directory in the script file.

wdio.config.js

const allure = require('@wdio/allure-reporter').default;
reporters: [
'allure', {
            outputDir: 'report/allure-results',
            disableWebdriverStepsReporting: true,
            disableWebdriverScreenshotsReporting: false,
        }],

 beforeSuite: function (suite) {
 global.allure = allure;
        allure.addFeature(suite.name);
        allure.addDescription("generating Allure reports " + suite.name);
    },
    beforeTest: function (test, context) {
        allure.addEnvironment("BROWSER", browser.capabilities.browserName);
        allure.addEnvironment("BROWSER_VERSION", browser.capabilities.version);
        allure.addEnvironment("PLATFORM", browser.capabilities.platform);
        allure.addDescription("generating Allure reports" + test.title);
        allure.addTestId("TC-001" + test.title);
        allure.addLabel("label" + + today.toISOString().replace(/[^\w]/g, "") + ".png");
    },

 

What script is actually doing?

Script is referring to the report directory & generating a reporting from the xml files.

How to run the command?

npm run allure

OR

yarn allure

The outcome

On the left side, multiple options can be seen.

You can check for overview, behaviour, timeline view, and others.

You can check for failure, bugs, defects, errors, etc

Details of the failure with reason can be seen upon clicking.

You can store the details of the previous runs, by using history script.

#yarn #webdriverio #allurereportsinwebdriverio #npm #allurereport