The TakesScreenshot interface captures the screenshot of the entire page, current window, visible portion of the page, or of the complete desktop window in their respective order as supported by the browser. It does not provide a way to capture an image of the specific element.
We can extend the screen capture functionality to capture images of WebElement using the Java Image API in addition to the TakesScreenshot interface.
In this recipe, we will implement a helper method to capture images of elements.
Let's implement the captureElementPicture() method to capture an image of WebElement. We will pass a WebElement instance to this method; the following code shows an example:
public static File captureElementPicture(WebElement element)
throws Exception {
// Get the WrapsDriver of the WebElement
WrapsDriver wrapsDriver = (WrapsDriver) element;
// Get the entire Screenshot from the driver of passed WebElement
File screen = ((TakesScreenshot) wrapsDriver.getWrappedDriver())
.getScreenshotAs(OutputType.FILE);
// Create an instance of Buffered Image from captured screenshot
BufferedImage img = ImageIO.read(screen);
// Get the Width and Height of the WebElement using getSize()
int width = element.getSize().getWidth();
int height = element.getSize().getHeight();
// Create a rectangle using Width and Height
Rectangle rect = new Rectangle(width, height);
// Get the Location of WebElement in a Point.
// This will provide X & Y co-ordinates of the WebElement
Point p = element.getLocation();
// Create image by for element using its location and size.
// This will give image data specific to the WebElement
BufferedImage dest = img.getSubimage(p.getX(), p.getY(), rect.width,
rect.height);
// Write back the image data for element in File object
ImageIO.write(dest, "png", screen);
// Return the File object containing image data
return screen;
}When the captureElementPicture() method is called with WebElement as an argument, it gets the underlying driver instance of the element using the WrapsDriver class. Then it captures the screenshot of the page displayed in the driver using the getScreenShotAs() method of the TakesScreenshot interface using the location and size of the element. We will crop the image of the element from the image of the entire page.
In the following example, the captureElementPicture() method is used to capture the image of a button element:
@Test
public void testElementScreenshot() {
WebElement searchButton = driver.findElement(By.name("btnK"));
try {
FileUtils.copyFile(
WebElementExtender.captureElementPicture(searchButton),
new File("target/searchButton.png"));
} catch (Exception e) {
e.printStackTrace();
}
}- The Capturing screenshots with Selenium WebDriver recipe in Chapter 4, Working with Selenium API