How to take screenshot of entire page in Protractor?

Question

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?

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, May 25 '16 at 20:04

score 1 · Answer 1 · answered Oct 26 '17 at 14:08

1

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);

answered Oct 26 '17 at 14:08

Alex W

37,233
13
109
109

score 1 · Answer 2 · answered Apr 16 '20 at 16:55

there is a bug on chrome. https://bugs.chromium.org/p/chromium/issues/detail?id=45209 https://bugs.chromium.org/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.

score 0 · Answer 3 · answered Dec 08 '15 at 08:50

0

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.

answered Dec 08 '15 at 08:50

Abhishek Swain

1,054
8
28

score 0 · Answer 4 · edited Jun 20 '19 at 14:26

0

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.

edited Jun 20 '19 at 14:26

sfy

2,810
1
20
22

answered Jun 20 '19 at 14:12

aditya singhal

21
2

score -1 · Answer 5 · answered Nov 08 '17 at 05:31

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

How to take screenshot of entire page in Protractor?

5 Answers5

Linked