Taking Screenshots with Protractor
Reading Time: 1 minute
This post is part of a ten-part series on how to write better Protractor tests. You can find the rest of the series here.
Protractor provides the ability to take a screenshot via the browser.takeScreenshot()
function. After you’ve taken a screenshot, though, you probably want to save it. The easiest way is to create a helper function that will save it for you like so:
// at the top of the test spec:
var fs = require('fs');
// abstract writing screen shot to a file
function writeScreenShot(data, filename) {
var stream = fs.createWriteStream(filename);
stream.write(new Buffer(data, 'base64'));
stream.end();
}
// ...
// within a test:
browser.takeScreenshot().then(function (png) {
writeScreenShot(png, 'exception.png');
});
One thing you’ll probably want to do is setup a way to automatically capture screenshots whenever there is a test failure. You can write this yourself, but one convenient way is to simply use the npm module protractor-html-screenshot-reporter. That module has the added benefit of outputting a pretty HTML report.

Learn Protractor in a few hours with our online course
Protractor is a one of the best ways to ensure your app is working correctly because you can write code that acts like a real user. But Protractor can also be confusing and difficult to work with when you're just starting out. We've put together an online course that will help you become a master at Protractor.
You'll save tons of time and frustration learning Protractor because we've worked out everything you need to know. Become a Protractor testing master today!