Saving screenshots

[mike-mccormick]

Hi,

I'm trying to add screenshots to test steps manually, using client.SaveScreenshot(). I'm not having any trouble getting the screenshot to save (provided I specify a path) but I can't figure out how to get these picked up in the cucumber report.

I've got After setup exactly as the Cucumber Reporters section of the docs.

If anyone knows of a way to manually add screenshots to the report on demand, or have them save always (even on success) I'd really appreciate it.

I'm using Nightwatch (running Chromedriver), Nightwatch-API (which is awesome btw) +CucumberJS and cucumber-html-reporter.

I'm using nightwatch, nightwatch-api, cucumber and cucumber-html-reporter.

Thanks!

Expected Behavior

Using client.SaveScreenshot() inside the step definition, and getNewScreenshots() inside AfterAll in cucumber.conf.js, screenshots also get added to the cucumber report.

Context

Your Environment

nightwatch.json - test_settings

  "test_settings" : {
    "default" : {
      "screenshots": {
        "enabled": true,
        "on_failure" : true,
        "on_success" : true,
        "on_error" : true,
        "path": "report"
      },

cucumber.conf.js - After

After(function() {
    getNewScreenshots().forEach(file => this.attach(fs.readFileSync(file), 'image/png'));
});

The step definition I'm testing against:

Given(/^I browse to the homepage$/, function () {
        client
            .url('http://localhost:8080')
            .saveScreenshot('report');

        return client;
});

npm script I'm running

"e2e-test": "mkdirp report && cucumber-js --require cucumber.conf.js --require obsidian-reference/features/support --require features/step_definitions --format node_modules/cucumber-pretty --format json:report/cucumber_report.json"

package.json

        "nightwatch": "^1.3.5",
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.3",
        "babel-preset-env": "^1.7.0",
        "chromedriver": "^81",
        "cucumber": "^5.1.0",
        "cucumber-html-reporter": "^5.2.0",
        "nightwatch-api": "^3.0.1",
        "start-server-and-test": "^1.7.11",
        "cucumber-pretty": "^1.5.0",
        "nodemailer": "^6.4.6",
        "mkdirp": "^1.0.4"

[icloudphil]

@mike-mccormick ,Technically, if you don't want to capture failure screenshot by default, you can use saveScreenshot provided by nightwatch itself.

After(async function (scenario) {
    if (scenario.result.status === 'failed') {
        const uniqueScenario = `${scenario.pickle.name.replace(/[^a-zA-Z0-9]/g, '')}`;
        const filename = `./reports/${uniqueScenario}/${uniqueScenario}.png`;
        await client.saveScreenshot(`${filename}`);
        this.attach(fs.readFileSync(path.resolve(filename)), 'image/png');
    }
});

Otherwise, getNewScreenshots(provided from nightwatch-api) is quite convenient and will

After(async function (scenario) {
    getNewScreenshots().forEach(file => this.attach(fs.readFileSync(file), 'image/png'));
    }
});

Also,getNewScreenshot will only get you 1 screenshot at the very end of your test, since you config

        "on_failure" : true,
        "on_success" : true,
        "on_error" : true,

If you plan to get it in every steps, you will want to use the saveScreenshot approach and also try to save it to a unique name so it does not overwrite the screenshot you have.

[spnraju]

Thank you @icloudphil for the details.

Closing it as there is no further activity..