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:

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!

  • Felipe Araujo

    Thanks a lot, my friend. So helpfull!

  • Andy

    Hi there,

    Just recently I published a brand new plugin protractor-screenshoter-plugin – https://github.com/azachar/protractor-screenshoter-plugin that captures for each browser instance a screenshot and console logs. The snapshot is made optionally for each expect or spec. It comes with a beautiful angular and bootstrap based analytics tool to visually check and fix tests results.

    Check it out at https://github.com/azachar/protractor-screenshoter-plugin.

    Also, I created a list of all available alternatives – https://github.com/azachar/protractor-screenshoter-plugin/wiki/Alernatives, so if you find something else, please do not hesitate to add it there.

    • Jyoti Shah

      Any plans to extend to cucumber reports using protractor?

  • ananth vyayavaram

    Hi Team, I want to s zoom out web page in chrome,How to send both ‘ctrl ‘ and ‘-‘ through sendkeys in protractor help me please.

  • suraj kumar

    What if we are running test for 2 different browsers ? Ho will it take screenshot for both browsers ?

  • Abbas Khoja

    What is the reason , I am getting half screen shot on chrome and full of firefox .
    Am I missing something ?