Taking Screen Shot Of A Particular WebElement

Here we try to take a screen shot of an particular web element within a webpage.Normally when we take a screen shot using WebDriver we take the screen shot of a full page.We cannot take the screen shot of a particular web element or area.

Here we can do the following step to get the screen shot of an particular web element:

1.We take the screen shot of the full screen
2.Store The taken screen shot file into the buffer.
3.Then crop the picture from buffer image and store it into the buffer.
4.Write buffer to a File.
5.Then Copy the File to the particular destination.


Now, We try to implement this step

1. Taking the screen shot of whole page.   

File screenShot=((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

2. Store the image into the buffer   

 BufferedImage buffImg=ImageIO.read(screenShot);

3. This is the step from where we can crop the picture.

For cropping a picture we need to know the X and Y coordinate of  the web element at any end point it maybe bottom left,bottom right,top right or top left corner of a web element .
We get the X and Y coordinate of an web element using element.getLocation().getX() and element.getLocation().getY(). It returns the top left corner x,y coordinate value.

Now we need to know the height and width of an web element. We can know this using  element.getSize().getWidth()  and element.getSize().getHeight() .

So this is the way we can crop the Image from buffer.
 
BufferedImage eleBuffImg=buffImg.getSubimage(element.getLocation().getX(), element.getLocation().getX()
                                ,element.getSize().getWidth() , element.getSize().getHeight());

4. We can write the buffer image to the file using this.

 ImageIO.write(eleBuffImg, "png",screenShot );

5. Now we can write this file to the particular location using this.

 FileUtils.copyFile(screenShot, new File("Your File Storing Location"));

Full Code is given below:





package WebElementScreenShot;

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.JavascriptExecutor;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeDriverService;

public class WebElementScreenShot {

    public static void main(String[] args) {

        //System.setProperty("webdriver.chrome.driver", "./chromedriver_win32_2.1/chromedriver.exe");
        ChromeDriverService service=new ChromeDriverService.Builder()
         .usingChromeDriverExecutable(new File("./chromedriver_win32_2.1/chromedriver.exe"))
         .usingAnyFreePort().build();
        WebDriver driver=new ChromeDriver(service);
       
        //Maximize Browser Window Because If It Is not Maximized
        //Then It May Take Screen Shot For Wrong Element.It may
        //Happen On Chrome Driver
       
         driver.manage().window().maximize();
       
        //Open The desired URL
        driver.get("http://www.google.com");

        try {
           
            //Call The Element Image Screen Shot Methiod
            elementScreenShot(driver, By.id("gbqfq"));
        } catch (IOException e) {
            e.printStackTrace();
        }
        finally{
            driver.quit();
        }
    }
   
    public static void elementScreenShot(WebDriver driver,By byElement) throws IOException{
        WebElement element=driver.findElement(byElement);
       
        //This Is For To Surround The WebElement Before Taken The Screen Shot
        ((JavascriptExecutor)driver).executeScript("arguments[0].setAttribute('style', arguments[1]);",element, "color: Red; border: 2px solid red;");
       
        //Take The Full Page Screen Shot
        File screenShot=((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
       
        //Transfer Full Image To Buffered Image
        BufferedImage buffImg=ImageIO.read(screenShot);
       
        //Crop The Picture According To the Element Size From Buffered Image 
        BufferedImage eleBuffImg=buffImg.getSubimage(
             element.getLocation().getX(), element.getLocation().getX(),
             element.getSize().getWidth() , element.getSize().getHeight());
       
        //Write The Buffered Image into Main Taken Screen Shot File
        ImageIO.write(eleBuffImg, "png",screenShot );
       
        //Copy The Crop Image Into The Machine Drive
        FileUtils.copyFile(screenShot, new File("D:/Test.jpeg"));
       
    }

}