Capture Full Page Screenshot For Chrome Browser In Selenium Webdriver

Capture full page screenshot for Google Chrome browser in Selenium WebDriver using AShot

As a default feature Selenium Webdriver takes full page screenshot only for Firefox browser and for other browsers like Chrome, Safari, etc it takes screenshot only for single view port or say visible area. If we want to take full page screenshot for other browsers in Selenium Webdriver then we must have to use screenshot utility tool. AShot is one of the screenshot utility tool which can we use to fulfill our requirement while taking full page screenshot for Chrome browser in Selenium WebDriver.

What is AShot?

A WebDriver Screenshot utility which takes full page screenshot as well as takes screenshot of a particular WebElement on different platforms (i.e. desktop browsers Chrome & Firefox, iOS Simulator Mobile Safari, Android Emulator Browser).

AShot provides following features:

  • Capture entire webpage
  • Capture webelement from webpage

Maven dependency for AShot

<dependency>
    <groupId>ru.yandex.qatools.ashot</groupId>
    <artifactId>ashot</artifactId>
    <version>1.4.12</version>
</dependency>

Use above maven dependency to inherit all AShot features within a Maven project.

Capture entire webpage

Below Java example is to capture the entire webpage of sample website http://www.bbc.com using AShot:

package com.xebia.blog.automation;

import java.awt.image.BufferedImage;
import java.io.File;

import javax.imageio.ImageIO;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedCondition;
import org.openqa.selenium.support.ui.WebDriverWait;

import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.screentaker.ViewportPastingStrategy;

public class AShotTestEntirePage {

    public static void main(String[] args) throws Exception {

        System.setProperty("webdriver.chrome.driver",
                "write here path of chromedriver exe file");
        WebDriver driver = new ChromeDriver();
        driver.manage().window().maximize();

        driver.get("http://www.bbc.com");
        Thread.sleep(5000);
        (new WebDriverWait(driver, 60))
                .until(new ExpectedCondition<WebElement>() {
                    public WebElement apply(WebDriver newDriver) {
                        return newDriver.findElement(By.id("worldService"));
                    }
                });

        final Screenshot screenshot = new AShot().shootingStrategy(
                new ViewportPastingStrategy(500)).takeScreenshot(driver);
        final BufferedImage image = screenshot.getImage();
        ImageIO.write(image, "PNG", new File(
                "write here path of location to save image"
                        + "AShot_BBC_Entire.png"));

        driver.quit();
    }
}

In the Java example shown above, I used code System.setProperty("webdriver.chrome.driver","write here path of chromedriver exe file"); to set the path of chromedriver exe file as system property where we have to define the path of chromedriver exe file, WebDriver driver = new ChromeDriver() to initialize the Webdriver, driver.manage().window().maximize() method to maximize the browser window and driver.get("http://www.bbc.com") method to open the BBC home page.

Then we had used explicit wait to check availability of webelement "worldService" on the web page:

(new WebDriverWait(driver, 60))
                .until(new ExpectedCondition<WebElement>() {
                    public WebElement apply(WebDriver newDriver) {
                        return newDriver.findElement(By.id("worldService"));
                    }
                });

After that final Screenshot screenshot = new AShot().shootingStrategy(new ViewportPastingStrategy(500)).takeScreenshot(driver); code is initialization of AShot utility to capture entire webpage where new ViewportPastingStrategy(500) is for scrolling to next view port and takeScreenshot(driver) method is used to capture the screenshot for particular view port of page. In next steps BufferedImage image = screenshot.getImage(); code is used to get the merged image from all screenshots and ImageIO.write(image, "PNG", new File("write here path of location to save image" + "AShot_BBC_Entire.png")); code used to save the screenshot at defined location with provided name.

At last driver.quit() method to quit the Webdriver.

Output screenshot should be like below image:

alt text

Above Java program can also be used to capture entire page on other Selenium Webdriver supported browsers i.e. Safari. In that case we have to use driver initialization accordingly.

Capture webelement from webpage

Below Java example is to capture webelement from webpage of sample website http://www.indiatimes.com using AShot:

package com.xebia.blog.automation;

import java.awt.image.BufferedImage;
import java.io.File;

import javax.imageio.ImageIO;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedCondition;
import org.openqa.selenium.support.ui.WebDriverWait;

import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.screentaker.ViewportPastingStrategy;

public class AShotTestWebElement {

    public static void main(String[] args) throws Exception {

        System.setProperty("webdriver.chrome.driver",
                "write here path of chromedriver exe file");
        WebDriver driver = new ChromeDriver();
        driver.manage().window().maximize();

        driver.get("http://www.indiatimes.com");
        Thread.sleep(5000);
        (new WebDriverWait(driver, 60))
                .until(new ExpectedCondition<WebElement>() {
                    public WebElement apply(WebDriver newDriver) {
                        return newDriver.findElement(By.id("hp_block_2"));
                    }
                });
        Thread.sleep(5000);
        ((JavascriptExecutor) driver).executeScript("$('#wrap header').hide();");
        Thread.sleep(500);
        WebElement element = driver.findElement(By.cssSelector("#hp_block_2"));
        final Screenshot screenshot = new AShot()
                .shootingStrategy(new ViewportPastingStrategy(1500))
                .takeScreenshot(driver, element);
        final BufferedImage image = screenshot.getImage();
        ImageIO.write(image, "PNG", new File(
                "write here path of location to save image"
                        + "AShot_BBC_WebElement.png"));

        driver.quit();
    }
}

In the Java example shown above, I used code System.setProperty("webdriver.chrome.driver","write here path of chromedriver exe file"); to set the path of chromedriver exe file as system property where we have to define the path of chromedriver exe file, WebDriver driver = new ChromeDriver() to initialize the Webdriver, driver.manage().window().maximize() method to maximize the browser window, driver.get("http://www.indiatimes.com") method to open the BBC home page.

Then we had used explicit wait to check availability of webelement "worldService" on the web page:

(new WebDriverWait(driver, 60))
                .until(new ExpectedCondition<WebElement>() {
                    public WebElement apply(WebDriver newDriver) {
                        return newDriver.findElement(By.id("worldService"));
                    }
                });

WebElement element = driver.findElement(By.cssSelector("#hp_block_2")); is used to define a webelement from the webpage which we have to capture. ((JavascriptExecutor) driver).executeScript("$('#wrap header').hide();"); is used to hide the fixed header from webpage so it would not affect the view port while taking screenshot.

After that final Screenshot screenshot = new AShot().shootingStrategy(new ViewportPastingStrategy(1500)).takeScreenshot(driver, element); code is initialization of AShot utility to capture entire webpage where new ViewportPastingStrategy(1500) is for scrolling to next view port and takeScreenshot(driver, element) method is used to capture the screenshot for particular view port of webelement. In next steps BufferedImage image = screenshot.getImage(); code is used to get the merged image from all screenshots and ImageIO.write(image, "PNG", new File("write here path of location to save image" + "AShot_BBC_WebElement.png")); code used to save the screenshot at defined location with provided name.

At last driver.quit() method to quit the Webdriver.

Output screenshot should be like below image:

alt text

Above Java program can also be used to capture entire page on other Selenium Webdriver supported browsers i.e. Safari. In that case we have to use driver initialization accordingly.

Get more information about AShot from its GITHUB page.

Leave a Reply

Your email address will not be published. Required fields are marked *