Element screenshots in Selenium Java

Introduction

Taking screenshots of specific elements helps you check if parts of a webpage look right. It is useful for finding visual bugs in that part only.

You want to verify a button looks correct after a style change.

You need to capture the state of a form field during a test.

You want to compare a product image on a page with a reference image.

You want to save a screenshot of an error message element for debugging.

You want to document the appearance of a menu or popup during testing.

Syntax

Selenium Java

WebElement element = driver.findElement(By.id("elementId"));
File screenshot = element.getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(screenshot, new File("path/to/save/image.png"));

Use getScreenshotAs on a WebElement to capture only that element.

Make sure to handle exceptions and import necessary classes like File and FileUtils.

Examples

This saves a screenshot of the logo image element to the screenshots folder.

Selenium Java

WebElement logo = driver.findElement(By.cssSelector("img.logo"));
File logoScreenshot = logo.getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(logoScreenshot, new File("screenshots/logo.png"));

This captures the Submit button's screenshot using an XPath locator.

Selenium Java

WebElement submitButton = driver.findElement(By.xpath("//button[text()='Submit']"));
File buttonScreenshot = submitButton.getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(buttonScreenshot, new File("screenshots/submit_button.png"));

Sample Program

This program opens a webpage, finds the first heading element, takes its screenshot, saves it as 'heading_screenshot.png', and prints a success message.

Selenium Java

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.OutputType;
import java.io.File;
import org.apache.commons.io.FileUtils;

public class ElementScreenshotTest {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        try {
            driver.get("https://example.com");
            WebElement heading = driver.findElement(By.tagName("h1"));
            File screenshot = heading.getScreenshotAs(OutputType.FILE);
            FileUtils.copyFile(screenshot, new File("heading_screenshot.png"));
            System.out.println("Screenshot saved successfully.");
        } catch (Exception e) {
            System.out.println("Error taking screenshot: " + e.getMessage());
        } finally {
            driver.quit();
        }
    }
}

Important Notes

Ensure the folder where you save screenshots exists or create it before saving.

Use meaningful file names to easily identify screenshots later.

Element screenshots capture only the visible part of the element on the screen.

Summary

Element screenshots help capture only a part of the webpage for focused visual testing.

Use getScreenshotAs on a WebElement to get its image.

Save the screenshot file to your desired location for review or comparison.