Allure Report In Webdriver IO

This blog explains how to set up allure report in webdriverio test automation project.

Introduction

In this blog, we will look at how to set up allure report in our WebdriverIO Test Automation project.

Reports are an important part of Test Automation. It helps us analyze and depict the results of test run in a pictorial manner so that it is easy to comprehend for the QA Leads/Managers.

Let's go ahead and configure the allure report

Prerequisite

WebdriverIO Project Setup done.

Steps to configure Allure report

Step 1

Open the Terminal in the Visual studio code

Step 2

Install allure webdriverIO package from npm by running the below command

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

Step 3

Now add the below allure reports settings at the reporters section of the wdio.conf.js file

reporters: ['spec',['allure', {
        outputDir: 'allure-results',
        disableWebdriverStepsReporting: false,
        disableWebdriverScreenshotsReporting: false,
    }]],

Note

Spec reporter will already be present just put comma and add these allure report settings

• disableWebdriverStepsReporting is set to false meaning it will not add any custom allure logs to the reporter.
• disableWebdriverScreenshotsReporting is set to false meaning we can add screenshots to the reporter using the aftertest hook.

Step 4

Now run any tests from your tests folder.

Step 5

After running you will see the allure-results folder created inside your project.

Step 6

Now install the Allure command line

npm i allure-commandline

Step 7

Now with the help of allure commandline and allure-results folder we can generate allure results by running the below command

npx allure generate allure-results && npx allure open

The above command will access the allure modules which gets installed in your node modules and generates the report by reading the contents in allure-results folder.

npx allure open will open the report in your browser.

You will see an allure report folder generated in your project once you run this command

Every time you run the test and generate report using command you need to clean the contents of the allure-results folder to generate the report

So just add the flag --clean while generating allure report

npx allure generate --clean allure-results && npx allure open

If you want screenshot to be attached to allure report when tests fails then add the below code in the after test hook.

Save it run the tests(make the test fail purposely) and generate the allure results again and see Now screenshot will get attached in allure report.

 afterTest: async function(test, context, { error}) {
        if (error) {
            await browser.takeScreenshot();
          }
    },

Summary

Hope this blog will be helpful for generating and setting up allure reports in WebDriverIO Test Automation Project.

Thanks..........

Happy learning..........