'How to integrate screenshots in allure report with webdriverIO

I'm trying to generate screenshots in my allure reports after each step in my test or just a single screenshot at the end of the test. I have referred to the webdriverIO docs and it seems I should use afterStep function together with the .takeScreenshot method. I have tried that in my config file but no screenshot is taken Here is my afterStep function:

afterStep: function (test, scenario, { error, duration, passed }) {
 if (!error) {
     browser.takeScreenshot() } }

The closest I have come to my desired result is by using this

 afterTest: function (test, scenario, { error, duration, passed }) { 
if (!error) { 
    browser.saveScreenshot('test.png') } }

What it does is take a screenshot at the end of the test and store it in my root directory,

the image however cannot be displayed on Allure Report

How do I attach screenshots to be shown on the Allure Report?

Solution 1:^[1]

After a lot of scrutiny on my code, I realized that I was doing one thing wrong here.

I had another afterTest hook in my config file which was being called instead of the hook to capture the screenshot. To solve this, I used a browser.takeScreenshot() function to the original afterTest hook and this solves my problem. The screenshot is attached at the end of the allure report.

browser.saveScreenshot saves the screenshot to your local folder while browser.takeScreenshot attaches it to the allure report.

My full afterTest hook

afterTest: async function (test, context, { error, result, duration, passed, retries }) {
        if(passed) {
          await browser.takeScreenshot();
          browser.executeScript('browserstack_executor: {"action": "setSessionStatus", "arguments": {"status":"passed","reason": "Assertions passed"}}');
        } else {
          browser.executeScript('browserstack_executor: {"action": "setSessionStatus", "arguments": {"status":"failed","reason": "At least 1 assertion failed"}}');
        }
      },

Solution 2:^[2]

In my case I was having only 1 afterTest command on my wdio.conf.ts file.

I'm using ts and I have to add async & await , and after this it get solved and attaching the screenshot in the allure report:

 afterTest: async function(test, context, { error, result, duration, passed, retries }) {
            if (error) {
                await browser.takeScreenshot()
              }
        },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	damian-sketch
Solution 2	4b0

'How to integrate screenshots in allure report with webdriverIO

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]