Screenshot is not being attached to the Failed Cucumber Scenario Step in Allure(or Any) Reports

[kasyed245]

I am new in wdio and trying to explore different wdio frameworks. I have been working on wdio-cucumber-framework lately and facing this issue. Kindly help me in this matter
Issue :> Whenever I try to run my cucumber tests along with allure reports (in sync mode), it doesn't attach the Screenshot to the right failed step in the allure XML file [even it is happening to other reports too like multiple HTML reports] BUT it is attaching screenshot to the next Scenario's 1st step.
Here is the simple wdio-cucumber project ('https://github.com/kasyed245/webdriverio-cucumber/tree/master/allure-results') where you can check two xml files (*-testsuite.xml) regarding screenshots.

Here is the hook where I am trying to capture the screenshot in wdio.conf.js

   afterStep: function afterStep(stepResult) {
        
        if(stepResult.status == "passed"){
           console.log("===============Step passed===============")
        }else{
          console.log("===============Step Failed===============")
          console.log("Feature : "+stepResult.feature);
          console.log("Scenario : "+stepResult.scenario);
          console.log("Step Text : "+stepResult.text);
          var d = new Date();
          var datetime = d.getDate() + "_"+ (d.getMonth()+1)  + "_" + d.getFullYear()
                          + "_"+ d.getHours() + "_" + d.getMinutes() + "_" + d.getSeconds();
          var fileName = encodeURIComponent(stepResult.scenario.replace(/\s+/g, '-'))+"_"+datetime;
          var filePath = this.screenshotPath + fileName +'.png';
          browser.saveScreenshot(filePath);
          console.log('\n\t Screenshot location:',filePath,'\n');
         }

Apologies in advance if this is already discussed in this forum although I searched but couldn't find any relevant details. Thanks.

[kasyed245]

I found the solution here

https://github.com/wswebcreation/wdio-multiple-cucumber-html-reporter/blob/master/README.md#how-do-i-add-screenshots-to-the-report

You need to copy following code in separate file in step folder (like hooks.js) and commented out all the After hooks in the conf.js file

const {After, Status} =  require('cucumber');

After((scenarioResult)=>{
  // Here it is added to a failed step, but each time you call `browser.saveScreenshot()` it will automatically bee added to the report
  if (scenarioResult.result.status === 'failed') {
    // It will add the screenshot to the JSON
    browser.saveScreenshot()
  }
  return scenarioResult.status;
});

And now you'll find both Allure report or wdio-multiple-cucumber-html-reporter working fine.

[espekkaya]

Hello,
The same problem that I have had. If you use afterStep to take screenshot, the screenshot save after that step attach.

Here is my package.json file details below;

    "@types/archiver": "^3.0.0",
    "@types/chai": "^4.2.3",
    "@types/cucumber": "^4.0.7",
    "@types/fs-extra": "^8.0.0",
    "@types/mysql2": "github:types/mysql2",
    "@types/node": "^12.7.7",
    "@types/nodemailer": "^6.2.1",
    "@types/sprintf-js": "^1.1.2",
    "@types/underscore": "^1.9.3",
    "@types/uuid": "^3.4.5",
    "@types/xml2js": "^0.4.5",
    "@wdio/allure-reporter": "^5.13.2",
    "@wdio/cli": "^5.13.2",
    "@wdio/cucumber-framework": "^5.13.2",
    "@wdio/local-runner": "^5.13.2",
    "@wdio/selenium-standalone-service": "^5.13.2",
    "@wdio/spec-reporter": "^5.13.2",
    "@wdio/sync": "^5.13.2",
    "allure-commandline": "^2.13.0",
    "appium-controller": "^1.1.6",
    "archiver": "^3.1.1",
    "browser-detect": "^0.2.28",
    "chai": "^4.2.0",
    "fs-extra": "^8.1.0",
    "moment": "^2.24.0",
    "mysql2": "^1.7.0",
    "nodemailer": "^6.3.0",
    "sprintf-js": "^1.1.2",
    "ts-node": "^8.4.1",
    "tsconfig-paths": "^3.9.0",
    "typescript": "^3.6.3",
    "webdriverio": "^5.13.2",