Screenshots & JavaScript

Capturing visual evidence and using JavaScript for tricky interactions in Selenium.

Concept

You’ll work with two key Selenium interfaces: TakesScreenshot for saving images and JavascriptExecutor for running JS code directly in the browser.

TakesScreenshot

Full Page: Capture visible viewport. Great for failure evidence.
Element: element.getScreenshotAs(...). Great for visual regression.

JavascriptExecutor

executeScript("..."): Run custom JS.
Use Cases: Scroll into view, highlight elements, force clicks.

Use JS with Caution

JS interactions can hide real bugs because they bypass some user constraints (like visibility or overlays). Use standard WebDriver commands whenever possible.

Interactive Practice

Scroll down to find the target...

Screenshot Target

This IS the box that will be captured as an image.

Normal

Use scrollIntoView() to find the box, highlight it, and snap a picture!

Java Code Example

ScreenshotDemo.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
WebElement captureArea = driver.findElement(By.id("captureArea"));

// 1. Scroll into view and highlight using JavaScript
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].scrollIntoView(true);", captureArea);
js.executeScript("arguments[0].style.border='5px solid red';", captureArea);

// 2. Take full-page screenshot
TakesScreenshot camera = (TakesScreenshot) driver;
File fullPageSrc = camera.getScreenshotAs(OutputType.FILE);
Files.copy(fullPageSrc.toPath(), Path.of("screenshot-fullpage.png"));

// 3. Take element-only screenshot
File elementSrc = captureArea.getScreenshotAs(OutputType.FILE);
Files.copy(elementSrc.toPath(), Path.of("screenshot-element.png"));

driver.quit();

Code Breakdown

js.executeScript("arguments[0].scrollIntoView(true);", el): Scrolls the page until the element is brought into the viewport.
js.executeScript("arguments[0].style.border='5px solid red';", el): Dynamically adds a red border to the element for visual emphasis.
camera.getScreenshotAs(OutputType.FILE): Captures the entire visible page as an image file.
element.getScreenshotAs(OutputType.FILE): Captures only the specific element.

Pro Tip

Automate Evidence

Integrate screenshot logic into a test listener so that failures automatically produce screenshots for your reports.

Element Screenshots

For visual regression or component-based checks, element.getScreenshotAs() is usually more stable than full-page shots.

Naming

Use consistent naming: include test name and timestamp in filenames.