How to take Full Page ScreenShot and ScreenShot of WebElement

In this post, we are going to learn, how we can capture Full Page ScreenShot and ScreenShot of a WebElement  using Third-party utility “Ashot” API.

We are going to cover the following points:
1. Full page screen shot using Ashot API.
2. ScreenShot of WebElement by Ashot API.
3. ScreenShot of WebElement by croping the image.

What is Ashot API?

Ashot is a third party utility by Yandex supported by Selenium WebDriver to capture the Screenshots. 

How to download and configure Ashot API in your project?
1.Using Maven: get the latest maven Dependency from https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
and Copy the Dependency code and add to your pom.xml file
Example:
<dependency>
  <groupId>ru.yandex.qatools.ashot</groupId>
  <artifactId>ashot</artifactId>
  <version>1.5.3</version>
</dependency>

2.Manually without using any tool:
Download jar file from below location:

https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
In Eclipse, right-click on the project -> go to properties -> Build Path -> Libraries -> Add External jars--> Select the jar file-->Apply and Close

1. Full page screen shot using Ashot API.
Step 1: Create an Ashot object. If you want a screenshot of the page bigger then the screen size, call the shootingStrategy() method before calling takeScreenshot() method to set up the policy. Then call a method takeScreenshot() passing the webdriver, for example,
Screenshot Screenshot = new AShot()
.shootingStrategy(ShootingStrategies.viewportPasting(500))
.takeScreenshot(driver);
Here 500 is scrolled out time in milliseconds, so for taking a screenshot, the program will scroll for each 500 msec.
Step 2: Now, get the image from the screenshot and write it to the file. You can provide the file type as jpg, png, etc.
ImageIO.write(Screenshot.getImage(), "png",
new File("D:\\Workspace_Eclipse\\WebDriverConcept3\\ScreenShot\\Ashot.png"));

Complete code given below:

import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;

public class AshotTest1 {
 WebDriver driver;

 @Test
 public void setup() throws InterruptedException {
  System.setProperty("webdriver.chrome.driver",
    "C:\\Users\\Hitendra\\Downloads\\chromedriver_win32\\chromedriver.exe");
  driver = new ChromeDriver();
  driver.manage().window().maximize();
  driver.get("https://www.automationtestinginsider.com/p/selenium-vi.html");

  //Create the object of AShot() class and set image strategy by shootingStrategy method
     //and viewportPasting method and take screenshot using takeScreenshot method
  Screenshot Screenshot = new AShot()
    .shootingStrategy(ShootingStrategies.viewportPasting(500))
    .takeScreenshot(driver);

  //Copy the element screenshot to desired location
  try {
   ImageIO.write(Screenshot.getImage(), "png",
     new File("D:\\Workspace_Eclipse\\WebDriverConcept3\\ScreenShot\\Ashot.png"));
  } catch (IOException e) {
   e.getMessage();
  }
  
  driver.close();
 }
}

Output: You will get full-page screenshot of a page which is bigger than screen size.

2. ScreenShot of WebElement by Ashot API:  Below code given to take the screen shot of a webelement (Login Button) from OrangeHRM application using Ashot API.

import java.io.File;
import java.io.IOException;
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.testng.annotations.Test;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.coordinates.WebDriverCoordsProvider;

public class AshotTest2 {
 WebDriver driver;

 @Test
 public void setup() throws InterruptedException {
  System.setProperty("webdriver.chrome.driver",
    "C:\\Users\\Hitendra\\Downloads\\chromedriver_win32\\chromedriver.exe");
  driver = new ChromeDriver();
  driver.manage().window().maximize();
  driver.get("https://opensource-demo.orangehrmlive.com/index.php/auth/validateCredentials");
  WebElement element = driver.findElement(By.id("btnLogin"));

  //Create the object of AShot() class and get the image co-ordinates 
  //by coordsProvider method and take screenshot using takeScreenshot method
  Screenshot screenshot = new AShot()
    .coordsProvider(new WebDriverCoordsProvider())
    .takeScreenshot(driver,element);

  //Copy the element screenshot to desired location
  try {
   ImageIO.write(screenshot.getImage(), "png",
     new File("D:\\Workspace_Eclipse\\WebDriverConcept3\\ScreenShot\\Ashot2.png"));
  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }

  driver.close();
 }
}

Output: Looks like below

3. ScreenShot of WebElement by croping the image: Below code given to take the screen shot of a webelement (Login Button) from WordPress application using Cropping technique.

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.Point;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class Test1 {

 WebDriver driver;

 @Test
 public void setup() throws IOException  {
  System.setProperty("webdriver.chrome.driver",
    "C:\\Users\\Hitendra\\Downloads\\chromedriver_win32\\chromedriver.exe");
  driver = new ChromeDriver();
  driver.manage().window().maximize();
  driver.get("https://s1.demo.opensourcecms.com/wordpress/wp-login.php?");
  WebElement element = driver.findElement(By.id("wp-submit"));

  // Get entire page screenshot
  File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
        BufferedImage  fullImg = ImageIO.read(screenshot);
  // Get the location,height,width of element on the page
  Point point = element.getLocation();
      int eleWidth = element.getSize().getWidth();
  int eleHeight = element.getSize().getHeight();
  // Crop the entire page screenshot to get only element screenshot
  try {
   BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(),
        eleWidth, eleHeight);
   ImageIO.write(eleScreenshot, "png", screenshot);
  } catch (Exception e) {
   // TODO Auto-generated catch block
   e.getMessage();
  }
  // Copy the element screenshot to desired location
  File screenshotLocation = new File("D:\\Workspace_Eclipse\\WebDriverConcept3\\ScreenShot\\Ashot3.png");
  FileUtils.copyFile(screenshot, screenshotLocation);
  // Close the browser
  driver.close();
 }
}

Output: Looks like below

Please refer below YouTube video for more details: