How to handle advanced functionality using JavaScriptExecutor?

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