Geek Answers Handbook

How to take a screenshot of the entire page in Protractor?

Following the Protractor API Documentation , there should be a way to take a screenshot of the entire page, not just the visible frame. In fact, this should be the default behavior.

When takeScreenshot() is called as

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

Then option 3. is saved in the file from the documentation - “Visible part of the current frame”. How to get webdriver to take a full screenshot of a page?

+9
source share
5 answers

This is a hack, but you can set the browser height in onPrepare as a 2000 pixel or some other high value:

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

This is somehow related to the corresponding browser driver server. For example, if you use chrome, the chromedriver server is responsible for delivering a screenshot of the entire page.

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

0
source

Add the following code to the specification. file:

 var fs = require('fs'); browser.takeScreenshot().then(function(png) { writeScreenShot(png, 'exception.png'); }); function writeScreenShot(data, filename) { var stream = fs.createWriteStream(filename); stream.write(new Buffer(data, 'base64')); stream.end(); }

This will take a screenshot of the page and add the file to the project folder as an exception.

0
source

You can use the following code for a full screenshot:

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

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

0
source

I use jasmine reporters (a node) here.

Write the code in the 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 has screenshots when there is a failure, and then it is stored in a folder with screenshot names with the file name: -

browsername-errorItBlockName.png

example: -

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

Screenshot Title: chrome-user signup.png

-1
source

More articles:


All Articles