How to handle advanced functionality using
JavaScriptExecutor?
1. Advanced Examples for Custom UI Frameworks (React, Angular, etc.)
Modern frameworks often use custom controls that don’t behave like classic HTML elements. Here’s how you can use JavaScriptExecutor to handle tricky situations:
A. Custom Checkbox (React/Angular Material, etc.)
Challenge:
The actual <input type=”checkbox”> may be hidden and clicking it doesn’t work. The visible part is often a styled <div>.
Solution:
Trigger the React/Angular click event on the visible element.
// Locate the visible container or label of the custom checkbox
WebElement customCheckbox = driver.findElement(By.cssSelector(".custom-checkbox")); // adjust selector
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].click();", customCheckbox);This triggers the underlying event handler, updating the UI and state.
B. Custom Dropdown (React-Select, Angular Material, etc.)
Challenge:
No native <select>—options are rendered as a list on click.
Solution:
- Open the dropdown using JS.
- Click the desired option using JS.
// Open the dropdown
WebElement dropdown = driver.findElement(By.cssSelector(".custom-dropdown"));
js.executeScript("arguments[0].click();", dropdown);
// Wait for options to be visible (add an explicit wait if needed)
WebElement option = driver.findElement(By.xpath("//div[text()='Desired Option']"));
js.executeScript("arguments[0].click();", option);This selects the desired value even when keyboard or standard Selenium doesn’t work.
C. React/Angular Input Field with Two-way Binding
Challenge:
Typing directly may not update the framework’s model.
Solution:
Set value, then dispatch input and change events to trigger reactivity.
WebElement input = driver.findElement(By.id("react-input"));
String value = "Hello Framework!";
js.executeScript(
"arguments[0].value=arguments[1];" +
"arguments[0].dispatchEvent(new Event('input', { bubbles: true }));" +
"arguments[0].dispatchEvent(new Event('change', { bubbles: true }));",
input, value
);This ensures the framework recognizes the input change.
2. How to Read Values Using JavaScriptExecutor
To retrieve (return) values using JS:
A. Get Value of an Input or Text Box
WebElement textBox = driver.findElement(By.id("username"));
JavascriptExecutor js = (JavascriptExecutor) driver;
String value = (String) js.executeScript("return arguments[0].value;", textBox);
System.out.println("Text box value: " + value);B. Get Text Content of Any Element
WebElement element = driver.findElement(By.id("customLabel"));
String text = (String) js.executeScript("return arguments[0].textContent;", element);
System.out.println("Element text: " + text);3. Error Handling for JavaScript Execution
It’s good practice to catch exceptions and print meaningful messages, especially when working with dynamic UIs.
Example:
try {
WebElement element = driver.findElement(By.id("someElement"));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].click();", element);
System.out.println("Clicked element using JS.");
} catch (org.openqa.selenium.JavascriptException je) {
System.err.println("JavaScript execution failed: " + je.getMessage());
} catch (org.openqa.selenium.NoSuchElementException ne) {
System.err.println("Element not found: " + ne.getMessage());
} catch (Exception e) {
System.err.println("Other error: " + e.getMessage());
}- Use JavascriptException for JS-related issues.
- Always log the error or take a screenshot on failure for debugging.
Summary Table
| Scenario | Approach/Example |
| React/Angular Checkbox | js.executeScript(“arguments[0].click();”, customCheckbox); |
| Custom Dropdown | Open dropdown & select: js.executeScript(“arguments[0].click();”, dropdown/option); |
| Two-way Binding Input | Set value & fire events: js.executeScript(“arguments[0].value=…; arguments[0].dispatchEvent…”); |
| Read value with JS | js.executeScript(“return arguments[0].value;”, element); |
| Read text content | js.executeScript(“return arguments[0].textContent;”, element); |
| Error handling | Try-catch with JavascriptException and logging |
