How To Take Screenshot Of Entire Page In Protractor?

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(

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

Solution 2:

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

Solution 3:

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.

Solution 4:

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.

Solution 5:

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(newBuffer(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