Selenium Webdriver (node.js) take screenshot and save test results

25
votes

I started developing tests for a website application and I have some problems.

I'm using Node.js, webdriver, chromedriver and selenium rc.

The questions are: 1. How do I make a screenshot and save it in the same folder as the script. 2. Is there a way to save the test logs for a test case? For example, if check for an element on the page and don't find it, how do I output that?

3
javascriptnode.jsselenium-webdriver
Don't ask two questions at once - this makes it more complicated and hence less useful for others. You could e.g. fix this problem by removing the "how do I save the test logs" part of the question. – oberlies

3 Answers

46
votes

For saving the test logs you typically use a test runner. When you check if an element is on the page and you can't find it then you raise an exception (typically an assertion error) and the test runner will record this and mark it as a failed test. In the documentation they suggest you use Mocha.

As for saving a screenshot to disk, the the api looks like this 

driver.takeScreenshot().then(
    function(image, err) {
        require('fs').writeFile('out.png', image, 'base64', function(err) {
            console.log(err);
        });
    }
);
11
votes

Adapting aychedee's answer into a complete promise that will resolve after the file is written and reject on write failure:

const util = require('util')
const fsp = require('fs').promises

function takeScreenshot(driver, file){
  return driver.takeScreenshot()
    .then(image => fsp.writeFile(file, image, 'base64'))
}

Or in an async function

async function takeScreenshot(driver, file){
  let image = await driver.takeScreenshot()
  await fsp.writeFile(file, image, 'base64')
}
7
votes

Just for the record, this is how you take a screenshot with WebdriverJS:

var webdriverjs = require('webdriverjs'),
    client = webdriverjs.remote({
        desiredCapabilities: {
            browserName: 'chrome'
        }
    });

client
    .init()
    .url('http://google.com')
    .saveScreenshot(__dirname + '/googleScreenshot.png')
    .end();

You can also use WebdriverCSS to take screenshots. It is a plugin for WebdriverJS to do CSS regression tests. It is pretty much the same like PhantomCSS.