Capture screen shot of Web Element using selenium webdriver

In my previous post , I have explained the scenario which captures the screen shot of a partial web page, Here I will gonna discuss about taking a screen shot of a specific web element using Selenium Web Driver. Just look at the scenario below :

Capture screen shot of a Web Element :

Scenario :

1) Launch URL : http://automate-apps.com/how-to-select-an-option-from-a-drop-down-using-selenium-web-driver/
2) Capture the screen shot of “Month” drop down.
3) Save it into system directory.
4) Close browser

Program

import java.awt.Rectangle;
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.junit.*;
import org.junit.Test;
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;

public class TakeScreenShotOfWebElement {
     WebDriver driver;
     WebElement element ;

     @Before
     public void setUp() {
         driver = new FirefoxDriver();
         driver.get("http://automate-apps.com/how-to-select-an-option-from-a-drop-down-using-selenium-web-driver/");
         driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
         driver.manage().window().maximize();
     }
    @Test
    public void testApp() throws InterruptedException, IOException {

        //Search for drop down
        element = driver.findElement(By.id("month"));

        // Take screen shot of whole web page
        File screenShot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);

        // Calculate the width and height of the drop down element
        Point p = element.getLocation();
        int width = element.getSize().getWidth();
        int height = element.getSize().getHeight();

        // Create Rectangle of same width as of drop down Web Element
        Rectangle rect = new Rectangle(width, height);

        BufferedImage img = null;
        img = ImageIO.read(screenShot);

        //Crop Image of drop down web element from the screen shot
        BufferedImage dest = img.getSubimage(p.getX(), p.getY(), rect.width, rect.height);

        // write cropped image into File Object
        ImageIO.write(dest, "png", screenShot);

        //Copy Image into particular directory
        FileUtils.copyFile(screenShot,
                new File("D:/Recordings/WebElementScreenShot.png"));
    }

    @After
    public void tearDown() {
        driver.quit();
    }


}

Screen shot would be look like :

If you really like the information provided above, please don’t forget to like us on Facebook, you can also leave the comment.