How to integrate screenshots in allure report with webdriverIO-CodePudding

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?

CodePudding user response：

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"}}');
        }
      },