Create a screenshot of WebElements with WebDriver

Problem

Sometimes we like to create a screenshot of specific elements. It’s unnecessary to take a screenshot of the entire website. We can implement the following class to achieve this.

Solution


import java.awt.Rectangle;
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.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.remote.Augmenter;

public class TakeElementScreenshot {
    private final String screenshotFolder = "target/screenshots/";
    protected WebDriver driver;

    public TakeElementScreenshot(WebDriver driver) {
        this.driver = driver;
    }

    public void shoot(WebElement element) throws IOException {
        try {
            driver = new Augmenter().augment(driver);
        } catch (Exception ignored) {
        }
        File screen = ((TakesScreenshot) driver)
                .getScreenshotAs(OutputType.FILE);

        Point p = element.getLocation();

        int width = element.getSize().getWidth();
        int height = element.getSize().getHeight();

        Rectangle rect = new Rectangle(width, height);

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

        BufferedImage dest = img.getSubimage(p.getX(), p.getY(), rect.width,
                rect.height);

        ImageIO.write(dest, "png", screen);
        FileUtils.copyFile(screen,
                new File(screenshotFolder + System.nanoTime() + ".png"));
    }

}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import java.awt.Rectangle;
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.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.remote.Augmenter;

public class TakeElementScreenshot {
    private final String screenshotFolder = "target/screenshots/";
    protected WebDriver driver;

    public TakeElementScreenshot(WebDriver driver) {
        this.driver = driver;
    }

    public void shoot(WebElement element) throws IOException {
        try {
            driver = new Augmenter().augment(driver);
        } catch (Exception ignored) {
        }
        File screen = ((TakesScreenshot) driver)
                .getScreenshotAs(OutputType.FILE);

        Point p = element.getLocation();

        int width = element.getSize().getWidth();
        int height = element.getSize().getHeight();

        Rectangle rect = new Rectangle(width, height);

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

        BufferedImage dest = img.getSubimage(p.getX(), p.getY(), rect.width,
                rect.height);

        ImageIO.write(dest, "png", screen);
        FileUtils.copyFile(screen,
                new File(screenshotFolder + System.nanoTime() + ".png"));
    }

}

How to use it


@Test
public void takeScreenshotOfElement() throws IOException {
   // Find the text input element by its name
   WebElement element = driver.findElement(By.name("q"));

   // Enter something to search for
   element.sendKeys("Cheese!");
        
   // takescreenshot of element
   TakeElementScreenshot screenshot = new TakeElementScreenshot(driver);
   screenshot.shoot(element);

   // Now submit the form. WebDriver will find the form for us from the element
   element.submit();

   // Check the title of the page
   System.out.println("Page title is: " + driver.getTitle());
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
@Test
public void takeScreenshotOfElement() throws IOException {
   // Find the text input element by its name
   WebElement element = driver.findElement(By.name("q"));

   // Enter something to search for
   element.sendKeys("Cheese!");
        
   // takescreenshot of element
   TakeElementScreenshot screenshot = new TakeElementScreenshot(driver);
   screenshot.shoot(element);

   // Now submit the form. WebDriver will find the form for us from the element
   element.submit();

   // Check the title of the page
   System.out.println("Page title is: " + driver.getTitle());
}

What has been done…

We have made a screenshot of a specific element.

Code on Github

The code is available on Github at the following location: http://github.com/roydekleijn/WebDriver-take-screenshot-of-element

Create a screenshot of WebElements with WebDriver
1 vote, 5.00 avg. rating (91% score)