How To Capture Element Screenshot Using Selenium WebDriver

I have received many requests from blog readers to share example on how to capture specific element screenshot In selenium webdriver. As you know, Capturing entire page screenshot Is very easy task as described In THIS POST. But If you wants to capture screenshot of specific web

element then you will feel that It Is little challenging task. Let me try to make It easy for you.

We need to use many different classes and methods of java and selenium webdriver to capture web element screenshot. Test execution sequence to capture screenshot of element Is as bellow.

1. Locate Image element and call captureElementScreenshot function to capture Its screenshot.
2. Capture full screenshot as buffered Image
3. Get element's height and width using getSize() method as described In THIS POST.
4. Get element's X Y coordinates using Point class as described In THIS POST.
5. Read buffered Image.
6. Crop buffered Image using element's x y coordinate position and height width parameters.
7. Save cropped Image at destination location physically.

Bellow given example will be executed as execution sequence described above. Detailed description Is provided with each syntax.

Example to capture screenshot of Image element.

package Testing_Pack;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
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.firefox.FirefoxDriver;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;

public class elementScreenshot {
 WebDriver driver;
 @BeforeTest
 public void setup() throws Exception {
  driver =new FirefoxDriver();     
  driver.manage().window().maximize();
  driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
  driver.get("http://only-testing-blog.blogspot.com/2014/09/selectable.html");
 }
 
 @Test
 public void captureScreenshot() throws Exception {
  //Locate Image element to capture screenshot.
        WebElement Image = driver.findElement(By.xpath("//img[@border='0']"));
        //Call captureElementScreenshot function to capture screenshot of element.
        captureElementScreenshot(Image);
 }
 
 public void captureElementScreenshot(WebElement element) throws IOException{
  //Capture entire page screenshot as buffer.
  //Used TakesScreenshot, OutputType Interface of selenium and File class of java to capture screenshot of entire page.
  File screen = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
  
  //Used selenium getSize() method to get height and width of element.
  //Retrieve width of element.
  int ImageWidth = element.getSize().getWidth();
  //Retrieve height of element.
  int ImageHeight = element.getSize().getHeight();  
  
  //Used selenium Point class to get x y coordinates of Image element.
  //get location(x y coordinates) of the element.
  Point point = element.getLocation();
  int xcord = point.getX();
  int ycord = point.getY();
  
  //Reading full image screenshot.
  BufferedImage img = ImageIO.read(screen);
  
  //cut Image using height, width and x y coordinates parameters.
  BufferedImage dest = img.getSubimage(xcord, ycord, ImageWidth, ImageHeight);
  ImageIO.write(dest, "png", screen);
  
  //Used FileUtils class of apache.commons.io.
  //save Image screenshot In D: drive.
  FileUtils.copyFile(screen, new File("D:\\screenshot.png"));
 }
}

Run above example In eclipse and open D: drive at the end of test execution. There will be created new file with name "screenshot.png". Open It to verify screenshot Is proper. This way, You can capture screenshot of any web element.

<< PREVIOUS || NEXT >>