How to take screenshot with Selenium WebDriver?

Whenever we encounter a failure during testing, it is a common nature to capture the screenshots wherever there is a deviation from the expected result. Thus it is considered a mandatory step to attach a screenshot for creating a bug.

While automating a bunch of test cases of a considerable number, capturing screenshot is critical to infer why a test case has failed for both the development and testing team. As they debug the failures, going through the screenshot and conclude if the failure is due to script issue or defect in the application.

Let us discuss which part of the page may be captured as a screenshot. With the help of Selenium Webdriver the following sections of the webpage can be considered for capturing as an image:

• Full page screenshot.

• A particular element.

• Viewable part of page.

Screenshot of viewable part of page

This is the most common scenario with respect to capturing a screenshot. TakeScreenShot is an interface that captures screenshots of the visible portion of the page. getScreenshotAs is a method which comes with the TakeScreenShot interface.

Syntax −

File s = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
Then we need to hold the image in a file [for example, .jpeg, .png] format.
FileUtils.copyFile(s, new File("<<path of file>>"))

Example

Code Implementation.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;
import java.io.File;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
public class ScreenshotViewable{
   public static void main(String[] args) {
      System.setProperty("webdriver.chrome.driver",
      "C:\Users\ghs6kor\Desktop\Java\chromedriver.exe");
      WebDriver driver = new ChromeDriver();
      String url = "https://www.tutorialspoint.com/index.htm";
      driver.get(url);
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
      // capture screenshot and store the image
      File s = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
      FileUtils.copyFile(s, new File("tutorialpoint.png"));
      driver.quit();
   }
}

Screenshot of full page

Sometimes we may need to capture the screenshots of the full page and not only the viewable part of the screen. The latest versions of the common browsers mostly capture the area which is visible.

To solve this problem, we have to use AShot() method. It is a method provided by webdriver to get a full screen image and available from versions 3.x of Selenium. It comes with below usages −

• Full screen image capture.

• Enhance screenshot.

• Comparison between screenshots.

We have to download and add the following jar to our project before using AShot() −

https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot

Syntax −

Screenshot s=new
AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);
ImageIO.write(s.getImage(),"PNG",new File("<< file path>>"));

Example

Code Implementation.

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;
import java.io.File;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;
import javax.imageio.ImageIO;
public class ScreenshotFullpage{
   public static void main(String[] args) {
      System.setProperty("webdriver.chrome.driver",
      "C:\Users\ghs6kor\Desktop\Java\chromedriver.exe");
      WebDriver driver = new ChromeDriver();
      String url = "https://www.tutorialspoint.com/index.htm";
      driver.get(url);
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
      // capture screenshot and store the image
      Screenshot s=new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).take          Screenshot(driver);
      ImageIO.write(s.getImage(),"PNG",new File("tutorialspoint.png"));
      driver.quit();
   }
}

Screenshot of particular element

Sometimes we may need to capture the screenshot of a particular element. Here we have to capture the entire screen screenshot then crop that image as per the location and dimension of the element.

Example

Code Implementation.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;
import java.io.File;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.Point;
import java.awt.image.BufferedImage;
public class ScreenshotElement{
   public static void main(String[] args) {
      System.setProperty("webdriver.chrome.driver", "C:\Users\ghs6kor\Desktop\Java\chromedriver.exe");
      WebDriver driver = new ChromeDriver();
      String url ="https://www.tutorialspoint.com/about/about_careers.htm";
      driver.get(url);
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
      // identify logo
      WebElement l=driver.findElement(By.xpath( "//*[@class='top-logo']"));
      // capture screenshot and store the image
      File s = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
      BufferedImage f = ImageIO.read(s);
      //location of webelement
      Point location= l.getLocation();
      // Dimension of element
      int w= l.getSize().getWidth();
      int h=l.getSize().getHeight();
      // Image Crop
      BufferedImage cImage= f.getSubimage(location.getX(), location.getY(), w, h);
      ImageIO.write(cImage, "png", s);
      FileUtils.copyFile(s, new File("tutorialpointlogo.png"));
      driver.quit();
   }
}