Element screenshots in Selenium Java - Build an Automation Script

Capture screenshot of a specific web element

Preconditions (2)

Step 1: Open browser and navigate to 'https://example.com/login'

Step 2: Locate the username input field by its id 'username'

Step 3: Take a screenshot of the username input field element

Step 4: Save the screenshot as 'username_field.png' in the project directory

✅ Expected Result: Screenshot file 'username_field.png' is created and contains only the username input field image

Automation Requirements - Selenium WebDriver with Java

Assertions Needed:

Verify the screenshot file 'username_field.png' exists after test execution

Best Practices:

Use explicit waits to ensure element is visible before taking screenshot

Use By.id locator for element identification

Handle IOException when saving the screenshot

Use Page Object Model pattern for element locating if applicable

Automated Solution

Selenium Java

import org.openqa.selenium.By;
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.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.StandardCopyOption;
import java.time.Duration;

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/login");

            WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
            WebElement usernameField = wait.until(
                ExpectedConditions.visibilityOfElementLocated(By.id("username"))
            );

            File screenshot = usernameField.getScreenshotAs(OutputType.FILE);
            File destination = new File("username_field.png");
            Files.copy(screenshot.toPath(), destination.toPath(), StandardCopyOption.REPLACE_EXISTING);

            if (destination.exists()) {
                System.out.println("Screenshot saved successfully: " + destination.getAbsolutePath());
            } else {
                System.out.println("Failed to save screenshot.");
            }
        } catch (IOException e) {
            System.out.println("IOException occurred while saving screenshot: " + e.getMessage());
        } finally {
            driver.quit();
        }
    }
}

This code starts by setting up the ChromeDriver path and opening the browser to the login page.

It uses an explicit wait to ensure the username input field is visible before proceeding.

Then it captures a screenshot of only that element using getScreenshotAs(OutputType.FILE).

The screenshot file is saved as username_field.png in the project directory.

Finally, it checks if the file exists and prints a success message, handling any IO exceptions that might occur.

The driver quits at the end to close the browser.

Common Mistakes - 4 Pitfalls

Using Thread.sleep() instead of explicit waits before taking the screenshot

{'mistake': 'Taking screenshot of the whole page instead of the specific element', 'why_bad': 'The requirement is to capture only the element, not the entire page, which wastes resources and is less precise.', 'correct_approach': "Use the element's getScreenshotAs method to capture only that element."}

Not handling IOException when saving the screenshot file

Using brittle locators like absolute XPath for the element

Bonus Challenge

Now add data-driven testing to capture screenshots of three different input fields: username, password, and email.

Show Hint

Practice

1. What is the main purpose of taking an element screenshot in Selenium Java?

easy

A. To record user interactions on the webpage

B. To capture the entire webpage including all elements

C. To capture only a specific part of the webpage for focused testing

D. To speed up the browser loading time

Solution

1. Step 1: Understand element screenshot concept

   Element screenshots capture only the selected element, not the whole page.

2. Step 2: Compare with other screenshot types

   Full page screenshots capture everything, but element screenshots focus on one part.

3. Final Answer:

   To capture only a specific part of the webpage for focused testing -> Option C

4. Quick Check:

   Element screenshot = focused capture [OK]

Hint: Element screenshots capture one element, not whole page [OK]

Common Mistakes:

• Confusing element screenshot with full page screenshot
• Thinking it records user actions
• Assuming it improves browser speed

2. Which Selenium Java method is used to capture a screenshot of a specific WebElement?

easy

A. takeScreenshot()

B. getScreenshotAs(OutputType.FILE)

C. captureElement()

D. saveScreenshot()

Solution

1. Step 1: Identify the correct method for element screenshot

   The WebElement interface provides getScreenshotAs(OutputType.FILE) to capture its screenshot.

2. Step 2: Verify other options

   Methods like takeScreenshot(), captureElement(), saveScreenshot() do not exist in Selenium Java API.

3. Final Answer:

   getScreenshotAs(OutputType.FILE) -> Option B

4. Quick Check:

   WebElement.getScreenshotAs = correct method [OK]

Hint: Use getScreenshotAs on WebElement for element screenshot [OK]

Common Mistakes:

• Using driver.getScreenshotAs instead of element.getScreenshotAs
• Choosing non-existent method names
• Confusing with full page screenshot methods

3. What will happen if you run the following Selenium Java code snippet?

WebElement logo = driver.findElement(By.id("logo"));
File screenshot = logo.getScreenshotAs(OutputType.FILE);
System.out.println(screenshot.exists());

medium

A. Prints true if the screenshot file is saved successfully

B. Prints false because getScreenshotAs returns null

C. Throws NoSuchElementException at runtime

D. Prints the file path as a string

Solution

1. Step 1: Understand getScreenshotAs behavior

   getScreenshotAs(OutputType.FILE) saves the element screenshot as a temporary file and returns a File object.

2. Step 2: Check what screenshot.exists() returns

   exists() returns true if the file exists on disk, which it should after saving.

3. Final Answer:

   Prints true if the screenshot file is saved successfully -> Option A

4. Quick Check:

   File.exists() = true after screenshot saved [OK]

Hint: getScreenshotAs returns a File; check exists() to confirm [OK]

Common Mistakes:

• Assuming getScreenshotAs returns null
• Expecting file path string instead of File object
• Ignoring possibility of NoSuchElementException if element missing

4. Identify the error in this Selenium Java code snippet for taking an element screenshot:

WebElement button = driver.findElement(By.name("submit"));
File screenshot = button.getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(screenshot, new File("button.png"));

medium

A. Missing import for FileUtils causes compilation error

B. getScreenshotAs method is called on driver instead of element

C. By.name locator is invalid for buttons

D. FileUtils.copyFile requires IOException handling

Solution

1. Step 1: Check method calls and imports

   getScreenshotAs is correctly called on the element; By.name is valid; FileUtils is commonly used from Apache Commons IO.

2. Step 2: Identify exception handling issue

   FileUtils.copyFile throws IOException which must be handled or declared, missing here causes compile error.

3. Final Answer:

   FileUtils.copyFile requires IOException handling -> Option D

4. Quick Check:

   copyFile needs try/catch or throws [OK]

Hint: copyFile throws IOException; handle it with try/catch [OK]

Common Mistakes:

• Assuming missing import causes error without checking
• Confusing driver and element method calls
• Thinking By.name is invalid locator

5. You want to capture screenshots of multiple elements on a page and save them with unique names. Which approach correctly implements this in Selenium Java?

List<WebElement> items = driver.findElements(By.className("product"));
int count = 1;
for (WebElement item : items) {
    File src = item.getScreenshotAs(OutputType.FILE);
    File dest = new File("product_" + count + ".png");
    FileUtils.copyFile(src, dest);
    count++;
}

hard

A. This code works but needs exception handling for copyFile

B. getScreenshotAs cannot be used in a loop for multiple elements

C. File names must be generated before the loop to avoid overwriting

D. driver.findElements returns only one element, so loop is unnecessary

Solution

1. Step 1: Analyze the loop and screenshot logic

   The code loops over elements, takes screenshots, and saves with unique names using count variable.

2. Step 2: Identify missing exception handling

   FileUtils.copyFile throws IOException which must be handled; otherwise code is correct.

3. Final Answer:

   This code works but needs exception handling for copyFile -> Option A

4. Quick Check:

   Loop + getScreenshotAs + unique names = correct, handle exceptions [OK]

Hint: Use loop with count for unique names; handle IOException [OK]

Common Mistakes:

• Thinking getScreenshotAs can't be used multiple times
• Not incrementing count causing file overwrite
• Misunderstanding findElements returns multiple elements