Following Protractor API documentation there should be a way to take screenshot of entire page, not only visible frame. In fact it should be default behaviour.

When takeScreenshot() is called like

browser.takeScreenshot().then(function (png) {
    // writing down image
});

Then in file is saved option 3. from documentation - 'Visible portion of current frame'. How to force webdriver to take full page screenshot?

Following Protractor API documentation there should be a way to take screenshot of entire page, not only visible frame. In fact it should be default behaviour.

When takeScreenshot() is called like

browser.takeScreenshot().then(function (png) {
    // writing down image
});

Then in file is saved option 3. from documentation - 'Visible portion of current frame'. How to force webdriver to take full page screenshot?

• javascript
• angularjs
• selenium
• testing
• protractor

• stackoverflow./a/31840790/2517622 – drets Commented Dec 8, 2015 at 9:15
• The documentation says that Ptor tries each method in that order, the first one that works is what it does. So it's not deliberately only giving you #3; it considered doing #1 and #2 but it couldn't do those. – Keith Tyler Commented May 25, 2016 at 20:04

5 Answers 5

This is a hack, but you can set the height of the browser in your onPrepare to be 2000 pixels or some other high value:

browser.driver.manage().window().setSize(320, 2000);

there is a bug on chrome. https://bugs.chromium/p/chromium/issues/detail?id=45209 https://bugs.chromium/p/chromedriver/issues/detail?id=294
After change browser height(browser.driver.manage().window().setSize(320, 2000);), Firefox will take entire page screenshot, but not Chrome.

This is something to do with the respective browser driver server. e.g If you are using chrome, chromedriver server is responsible to deliver the screenshot of entire page.

It has nothing to do with the WebDriver client libraries or Protractor.

You can use following code for full screenshot:

browser.driver.manage().window().setSize(width, height);

You can adjust width and height according to the html page.

I am using jasmine-reporters (a node package) here.

Write the code in your conf file.

onPrepare: function () {
jasmine.getEnv().addReporter({
            specDone: function (result) {
                if (result.status === 'failed') {
                    browser.getCapabilities().then(function (caps) {
                        var browserName = caps.get('browserName');
                        browser.takeScreenshot().then(function (png) {
                            var stream = fs.createWriteStream('screenshots/' + browserName + '-' + result.fullName + '.png');
                            stream.write(new Buffer(png, 'base64'));
                            stream.end();
                        });
                    });
                }
            }
        });
}

The above code takes screenshots when there is failure and then it stores in a folder named screenshots with filename as :-

browsername-errorItBlockName.png

example:-

it('user signup', function () {
// error here
}

screenshot Name : chrome-user signup.png