Skip to content

Embeded Screenshots

Jim Davis edited this page Dec 6, 2017 · 3 revisions

How the feature works:

The WDIO BaseReporter includes detailed information on the WDIO Commands executed for each test. This reporter parses the list of commands for any with "type":"screenshot" (a request for the browser to capture a screenshot)

For each of the matching screenshot commands the wdio-mochawesome-reporter will add an entry to the context array of the mochawesome json.

The Mochawesome Report Generator is designed to read the contents of the context array and embed the information as part of a test result. For more information see the Mochawesome documentation

NOTE Context generated by the wdio-mochawesome-reporter assume screenshots will live in a /screenshots directory as part of the generated Mochawesome report.

Using the feature

WDIO Config Updates

Update your wdio config file as follows. The result will be a json file that now includes references to screenshots that should be embedded with the report.

// sample wdio.conf.js
module.exports = {
  // ...
  reporters: ['dot', 'mochawesome'],
  mochawesomeOpts: {
      includeScreenshots:true
  },
  // ...
};

Mochawesome Report Generation

As mentioned in the (README)[https://github.com/fijijavis/wdio-mochawesome-reporter.git#readme], actual report generation is handled the Mochawesome Report Generator. After the Mochawesome report is generated you'll need to make sure screenshots are moved into the report folder under /screenshots.

Sample script:

"scripts": {
    "generateMochawesome":"marge --reportDir path/where/report/generates path/to/results.json && cp -r /path/to/screenshots /path/where/report/generates/screenshots",
  },

Known Issue

When WDIO save screenshot is passed a file name that includes the full path ex:browser.saveScreenshot('path/to/screenshot/directory/screenshot.png') the command output appends path to the filenane attribute. This causes resolution conflicts for the mochawesome report. As a work around you can use the following format for programatically saving screenshots:

var screenshotName = 'myscreenshot.png'
var screenshot = browser.saveScreenshot(screenshotName)
fs.writeFileSync(path.join(this.screenshotPath,screenshotName),screenshot)
fs.unlinkSync(screenshotName)
Clone this wiki locally