Reporting and Taking Screenshots

Cucumber and TestCafe both have reporting capabilities. Since we are using Cucumber to "drive" the tests and TestCafe to "execute" the tests, the Cucumber reporting tool will be better suited to handle reporting.

Creating a report

Creating a report is really easy in Cucumber. You can create a report with the following command line command.

./node_modules/.bin/cucumber-js.cmd --format json:./reports/report.json

or you could use one of the built in scripts in the package.json file

test-report
test-chrome-report
test-ie-report
test-edge-report
test-firefox-report
test-opera-report
test-safari-report

These commands will create a JSON report. What's really nice is there are a lot of projects that can consume the JSON file and create really nice HTML reports. I've been using cucumber-html-reporter which creates bootstrap styled reports that are really intuitive to use and navigate.

Taking Screenshots

Taking a simple screenshot

TestCafe has a really simple API call to creating screenshots you can simply write

t.takeScreenshot()

if you are using the testcafe-cucumber repo you can make relatively the same call

testController.takeScreenshot()

the specified path can be called in the parameter

testController.takeScreenshot(path)

or it's specified in the runner class in the hooks file

function runTest(iteration, browser) {
    let runner = null;

    createTestCafe('localhost', 1338 + iteration, 1339 + iteration)
        .then(function(tc) {
            cafeRunner = tc;
            runner = tc.createRunner();
            return runner
                .src('./test.js')
                .screenshots('reports/screenshots/', true) //path to the screenshots
                .browsers(browser)
                .run()
                .catch(function(error) {
                    console.log(error);
                });
        })
        .then(function(report) {
        });
}

Attaching screenshots to the Cucumber report

If you want to add screenshots to the JSON report created by Cucumber you can use the following command.

this.addScreenshotToReport();

This will only take a screenshot if you are also running the report. If you are not running the report no screenshot will be taken. Also, a .png file of the screenshot can be found in the ./reports/screenshots directory. The code for this function can be found in the world.js file.

Screenshot on failure

You can set whether you want to take screenshots on failure by setting the second parameter in the screenshot's function in the runner class. From hooks.js change the screenshot's function second parameter to true if you want to take a screenshot on failure and false if you don't want to take a screenshot on failure.

function runTest(iteration, browser) {
    let runner = null;

    createTestCafe('localhost', 1338 + iteration, 1339 + iteration)
        .then(function(tc) {
            cafeRunner = tc;
            runner = tc.createRunner();
            return runner
                .src('./test.js')
                .screenshots('reports/screenshots/', true) //take screenshot on failure
                .browsers(browser)
                .run()
                .catch(function(error) {
                    console.log(error);
                });
        })
        .then(function(report) {
        });
}

NOTE: Currently I haven't been able to attach the failure screenshot to the report.