How to get screenshot of full webpage using Selenium and Java?

Question

How to take a screenshot of the entire web page (full-page screenshot), not only partial (top-to-bottom) using Selenium WebDriver?

My code: (Java bindings)

System.setProperty("webdriver.chrome.driver","/home/alex/Downloads/chromedriver_linux64/chromedriver");
WebDriver driver = new ChromeDriver();
driver.get("http://google.com");
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File(RESULT_FILENAME));

Any ideas on how to tackle this?

I have a Answer for you but I want to confirm if that works for you. So can you please consider detailing out what you mean by `full entire web page, not only partial from the top using selenium` ? Thanks — DebanjanB, May 20 '17 at 13:11

iamdanchiv · Accepted Answer · 2019-01-02T12:33:32.513

LE: I see quite a lot of people are interested in the full-page screenshot, so I thought I might update the answer with some positives (silver bullets).

There are quite a handful of web testing frameworks that can (with minimal setup & effort) produce a full-page screenshot. I come from a NodeJS testing environment, so I can only vouch the following: WebdriverIO & Google's Puppeteer.

If anyone is interested in an easy way to do it with WebdriverIO, check this answer.

Short answer is NO, YOU CANNOT, if you're only using Selenium (detailed reason bellow). But, what you can do is make the most out of your device's(monitor) viewport.

So, start your browser instance (driver) using ChromeOptions(), which is the method for setting ChromeDriver-specific capabilities. We can do the following:

maximize the window (using the --start-maximized switch);
go full-screen (F11-key on Windows, Control+Cmd+F on Mac, using the --start-fullscreen switch).
Note: complete list of Chrome command-line-switches can be found here.

Your code should look like this:

// Setting your Chrome options (Desired capabilities)
ChromeOptions options = new ChromeOptions();
options.add_argument('--start-maximized');
options.add_argument('--start-fullscreen');

// Creating a driver instance with the previous capabilities
WebDriver driver = new ChromeDriver(options);

// Load page & take screenshot of full-screen page
driver.get("http://google.com");
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

Now regarding the full page problem, all drivers (chromedriver, geckodriver, IEDriver, EdgeDriver, etc.) are implementing the WebDriver W3C standard. Thus, they are dependent on the way the WebDriver team wants to expose the functionality of different features, in our case, 'Take Screenshot'.

If you read the definition, it clearly states the following:

The Take Screenshot command takes a screenshot of the top-level browsing context’s VIEWPORT.

Legacy-wise, some drivers were able to produce a full-page screenshot (read more about it here), like the old FirefoxDriver, IEDriver, etc. That is no longer the case as they now all implement (to the letter) the WebDriver W3C standard.

score 6 · Answer 2 · answered Mar 20 '19 at 02:26

Looks like this article suggesting AShot works for me. Also, I successfully embeded the full page screenshot into Cucumber report with following code

    scenario.embed(takeScreenShotAsByte(getWebDriver()), "image/png");

    private static byte[] takeScreenShotAsByte(WebDriver webDriver) throws IOException {
        return takeFullPageScreenShotAsByte(webDriver);
    }

    private static byte[] takeFullPageScreenShotAsByte(WebDriver webDriver) throws IOException {
        Screenshot fpScreenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000))
                .takeScreenshot(webDriver);

        BufferedImage originalImage = fpScreenshot.getImage();

        try (ByteArrayOutputStream baos = new ByteArrayOutputStream()) {
            ImageIO.write(originalImage, "png", baos);
            baos.flush();
            return baos.toByteArray();
        }
    }

score 4 · Answer 3 · answered Oct 26 '17 at 05:51

4

I have found a tutorial http://www.softwaretestingmaterial.com/how-to-capture-full-page-screenshot-using-selenium-webdriver/ For maven users: remember about adding dependendency from https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot When I testing this script, I've got large pictures, which can't be open in browser (too large or broken).

So maybe someone know any script, which focus page on last used locator?

answered Oct 26 '17 at 05:51

Krzysztof Walczewski

620
7
14

This code is not working properly in Angujar js application – Rajesh Om Jul 23 '19 at 09:31

score 2 · Answer 4 · edited May 22 '21 at 08:19

Here is my sample of get Full Screen ScreenShot using C#, but just change:

string _currentPath = Path.GetDirectoryName(Assembly.GetAssembly(typeof(One of your objects)).Location) + @"\Attachs\";
var filePath = _currentPath + sSName;

if (!Directory.Exists(_currentPath))
    Directory.CreateDirectory(_currentPath);

Dictionary<string, Object> metrics = new Dictionary<string, Object>();
metrics["width"] = _driver.ExecuteScript("return Math.max(window.innerWidth,document.body.scrollWidth,document.documentElement.scrollWidth)");
metrics["height"] = _driver.ExecuteScript("return Math.max(window.innerHeight,document.body.scrollHeight,document.documentElement.scrollHeight)");
metrics["deviceScaleFactor"] = (double)_driver.ExecuteScript("return window.devicePixelRatio");
metrics["mobile"] = _driver.ExecuteScript("return typeof window.orientation !== 'undefined'");
_driver.ExecuteChromeCommand("Emulation.setDeviceMetricsOverride", metrics);

_driver.GetScreenshot().SaveAsFile(filePath, ScreenshotImageFormat.Png);

_driver.ExecuteChromeCommand("Emulation.clearDeviceMetricsOverride", new Dictionary<string, Object>());
_driver.Close();

score 2 · Answer 5 · answered Jan 22 '20 at 16:50

It is possible to start Chrome in headless mode and then set the window size to the same height of the page body.

Since the height of your headless browser is not dependent on your monitor size you can use this headless mode to get full length screenshots as they are rendered in the Chrome browser.

The top answer for Headless Chrome run with selenium seems to show the right way to start Chrome in headless mode with java. I work with python bindings but the answer looks pretty similar to what I do.

This is the relevant part. This code should go before you start an instance of ChromeDriver.

ChromeOptions chromeOptions = new ChromeOptions();
chromeOptions.addArguments("--headless");

ChromeDriver driver = new ChromeDriver(chromeOptions);

If running chrome in a headless browser is not a viable option then you'll have to use Firefox or IE. Both of these browsers will give you a full length screenshot

score 1 · Answer 6 · answered Nov 15 '17 at 14:31

For some pages I neeed to take screenshot of begin and end of page. So I use to take 2 screenshots:

public static String javaIoTmpDir = System.getProperty("java.io.tmpdir"); //tmp dir
//create screenshot
    driver.manage().window().fullscreen();
    //For large pages - body over 850 px highh - take addition screenshot of the end of page
    if (driver.findElements(By.id("panel_body")).size()>0) {
        WebElement body = driver.findElement(By.id("panel_body"));
        int bodyHight = body.getSize().getHeight();
        if (bodyHight > 850) {
            Robot robot = new Robot();
            robot.keyPress(KeyEvent.VK_END);
            robot.keyRelease(KeyEvent.VK_END);
            Thread.sleep(1000);
            File scrFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
            String timePictureEnd = javaIoTmpDir+"\\scr_"+String.valueOf(System.currentTimeMillis())+getClass().toString().substring(getClass().toString().lastIndexOf(".qa.")+3)+".png";
            FileUtils.copyFile(scrFile, new File(timePictureEnd));
            robot.keyPress(KeyEvent.VK_HOME); //back to top page for next screen
            robot.keyRelease(KeyEvent.VK_HOME);
            Thread.sleep(1000);
        }
    }
    String timePicture = javaIoTmpDir+"\\scr_"+String.valueOf(System.currentTimeMillis())+getClass().toString().substring(getClass().toString().lastIndexOf(".qa.")+3)+".png";
    File scrFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
    FileUtils.copyFile(scrFile, new File(timePicture));

score 1 · Answer 7 · edited Sep 28 '18 at 11:16

1

You can use Phantomjs to achieve it.

Here is my java code:

public class PhantomjsTest {
    public static void main(String[] args) {
        try {

            long start=System.currentTimeMillis();
            //The page you want to screenshot
            String targetUrl="https://www.iqiyi.com/";
            //File path
            String targetImg="iqiyi.png";
            String command = "/Users/hetiantian/SoftWares/phantomjs/bin/phantomjs /Users/hetiantian/SoftWares/phantomjs/examples/rasterize.js "+targetUrl + " " +targetImg;
            Process p = Runtime.getRuntime().exec(command);
            p.waitFor();
            System.out.println((System.currentTimeMillis()-start));
        } catch (Exception e) {
            e.printStackTrace();
        }


    }
}

So you can get a screenshot of full webpage by Phantomjs. When you use Phantomjs to get a full screenshot, you need to download Phantomjs first. Then run Phantomjs script to screenshot. More about it you can reference phantomjs.org.

edited Sep 28 '18 at 11:16

Pierre.Vriens

2,049
60
24
39

answered Sep 28 '18 at 06:05

H.Dayday

46
1
5

@Pierre.Vriens Sorry, my English is not good. What I want to express is you can get screenshot of full webpage by Phantomjs. When you use Phantomjs to get a full screenshot, you need to download Phantomjs first.Then run Phantomjs script to screenshot. More about it you can reference http://phantomjs.org/ – H.Dayday Sep 28 '18 at 06:50
1

PhantomJS has been abandoned for [at least two years](https://github.com/ariya/phantomjs/issues/15105), and officially archived [since early 2018](https://github.com/ariya/phantomjs/issues/15344). Stop using software that is _end-of-life, or which lacks proper support_. Also, since `--headless` switch for Chrome & the extensive Chromium efforts put into headless browsers, third-party projects like PhantomJS have become obsolete, thus the project being abandoned... – iamdanchiv Jan 28 '19 at 09:36

score 1 · Answer 8 · answered Mar 29 '21 at 17:48

1

Now there's an easy way to do it with Selenium 4 and Firefox.

byte[] imageBytes = ((FirefoxDriver)driver).getFullPageScreenshotAs(OutputType.BYTES);
Files.write(Paths.get(RESULT_FILENAME), imageBytes);

Other browsers don't support getFullPageScreenshotAs() yet.

answered Mar 29 '21 at 17:48

John29

2,830
2
27
48

Does this work for a full-page screenshot of "https://acrobat.adobe.com"? For me I only get a small viewport, not a full page. – JohnP2 Mar 31 '21 at 17:07
Yes, a full-page screenshot of "acrobat.adobe.com" works fine for me with Selenium 4 beta 2. – John29 Mar 31 '21 at 17:16
Ah, I had to use Thread.sleep(5000) for the page to load, and this is working now. – JohnP2 Mar 31 '21 at 20:34

score 0 · Answer 9 · answered Dec 06 '20 at 20:17

Java code without using third party library:

int bodyHeight = webDriver.findElement(By.tagName("body")).getSize().getHeight();
int windowChromeHeight = (int) (long) webDriver.executeScript("return window.outerHeight - window.innerHeight");
Dimension size = new Dimension(webDriver.manage().window().getSize().getWidth(), bodyHeight + windowChromeHeight);
webDriver.executeScript("window.scrollTo(0, 0);");
webDriver.manage().window().setSize(size);
            
File screenshotFile = new File("screenshot.png");
Files.write(screenshotFile.toPath(), webDriver.getScreenshotAs(OutputType.BYTES));

score -11 · Answer 10 · edited May 20 '17 at 14:37

-11

File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File("c:\\RESULT_FILENAME.png"));

Try this

edited May 20 '17 at 14:37

Alexan

6,893
13
69
89

answered May 20 '17 at 14:19

padmini

3
2

4

Did you take the time to at least read the question, or the snipped he provided? – iamdanchiv May 20 '17 at 14:38
4

This answer is completely off topic – robertspierre Jul 19 '17 at 12:23

How to get screenshot of full webpage using Selenium and Java?

10 Answers10

Linked