Selenium: chrome driver makes screenshot just of visible part of page

Question

I need to do screenshot of full page using chrome driver, but it makes it partly.

File screenshotFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);

The screenshot looks as visible rectangle with correct information and big black area below.

Berty

Answer 1

This is a known bug: https://code.google.com/p/chromedriver/issues/detail?id=294 (Only for Chrome driver, firefox driver works fine)

Digitalize

It's been 3 and a half years and no fix in sight. IE, Edge, and Opera also mimicked chromes bugged behavior and the last holdout was firefox until november 2016. Now the latest firefox driver removed full page screenshots to also mimic this behavior. So after being marked as a chrome bug for 3 years it's now become a feature. – Othelia

Additionally, it's important to note that the W3C WebDriver Specification calls out that screenshots are to be of the visible view port only. The Chrome driver's behavior is in compliance with the specification. – Myxoma

Answer 2

Might worth trying to use this library:

https://www.assertthat.com/posts/selenium_shutterbug_make_custom_screenshots_with_selenium_webdriver

To make a full page screenshot:

Shutterbug.shootPage(driver, ScrollStrategy.BOTH_DIRECTIONS).save();

(it uses scroll-and-stitch method)

Sources on github https://github.com/assertthat/selenium-shutterbug

Provides ability to make full page screenshot in Chrome and some other extended features, tested on Windows and OS X.

Successfully using on my current project.

Ventriloquism

This is an awesome utility for the job at hand. – Excreta

scroll-and-stitch is good but a sticking header will spoil it – Here

You could try setting relative location to sticky header before taking the screenshot. Something like: ((JavascriptExecutor)webDriver).executeScript("arguments[0].style.position='relative'", stickyHeaderEl); – Ventriloquism

Answer 3

you need to use

load html2canvas.js

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://github.com/niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.js';
document.head.appendChild(script);

Command to download full page screenshot by this command

html2canvas(document.body).then(function(canvas) {
    var a = document.createElement('a');
        // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'somefilename.jpg';
        a.click();
})

you may call this script using javascriptexecutor and get desired results as download of the image would launch automatically to your default download location and you may change file name with an input argument of the javascriptexecutor command of the selenium.

hope this helps!

Lancey

promising idea but the quality is not great and a lot of sites implement cross domain script prevention things :( – Kitchenware

Answer 4

I know this is an old thread, but I wanted to show use of Selenium's ITakesScreenshot.

using OpenQA.Selenium;
using System.Drawing.Imaging;

((ITakesScreenshot)driver).GetScreenshot().SaveAsFile(@"YourImageNameHere.png", ImageFormat.Png);

Spacious