---
title: How to handle advanced functionality using JavaScriptExecutor?
description: "**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:…"
url: "https://vinothqaacademy.com/docs/how-to-handle-advanced-functionality-using-javascriptexecutor/"
updated: "2025-09-26"
category: Selenium Automation Testing
tags:
  - Selenium Automation Testing
---

# 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.

```javascript

                // 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.

```javascript

                // 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.

```javascript

                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***

```javascript

                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***

```javascript

                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:***

```javascript

                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 |