CODEWITHSUNDEEP
javascriptangularjsseleniumtestingprotractor
Patzick
Patzick

Reputation: 171

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() 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?

Upvotes: 9

Views: 4611

Answers (5)

Abdullah Nurum
Abdullah Nurum

Reputation: 345

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.

Upvotes: 1

aditya singhal
aditya singhal

Reputation: 21

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.

Upvotes: 0

Pavan Srivatsav
Pavan Srivatsav

Reputation: 74

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

Upvotes: -1

Alex W
Alex W

Reputation: 38193

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

Upvotes: 1

Abhishek Swain
Abhishek Swain

Reputation: 1054

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.

Upvotes: 0

Related Questions