JavaScriptExecutor in Selenium

JavaScriptExecutor is an interface in Selenium WebDriver that exposes two methods: executeScript() for synchronous JavaScript and executeAsyncScript() for asynchronous JavaScript. Any WebDriver instance can be cast to JavascriptExecutor:

JavascriptExecutor js = (JavascriptExecutor) driver;

When to use it

JavaScriptExecutor is the escape hatch for situations where WebDriver's native API cannot interact with an element or perform an action:

• Hidden or non-interactable elements: WebDriver throws ElementNotInteractableException for elements with display:none or visibility:hidden. JS can still read or set their values.
• Custom web components and Shadow DOM: Native WebDriver locators cannot cross shadow roots. JS can query element.shadowRoot to reach elements inside shadow DOM.
• Scrolling: window.scrollTo() or element.scrollIntoView() for precise scroll control.
• Setting read-only field values: setAttribute('value', ...) bypasses read-only enforcement.
• Reading dynamic DOM values: Properties not exposed via getAttribute() can be read via JS property access.
• Performance metrics: window.performance.timing exposes page load timing data for performance assertions.
• Triggering custom events: Fire synthetic events (e.g., dispatchEvent) that WebDriver's click() does not trigger in some frameworks.

Common usage

// Scroll to bottom of page
js.executeScript("window.scrollTo(0, document.body.scrollHeight)");

// Click via JS (last resort — prefer WebDriver click)
js.executeScript("arguments[0].click()", element);

// Read a property
String value = (String) js.executeScript("return arguments[0].value", element);

Important caveat Using JS to click or type bypasses WebDriver's visibility and interactability checks. This can mask real user-facing bugs (an element that's actually blocked by an overlay). Prefer native WebDriver methods; fall back to JS only when genuinely necessary.

Selenium WebDriver provides a native Actions class method for scrolling in Selenium 4, but JavascriptExecutor remains a reliable fallback and the standard approach for fine-grained scroll control.

Scroll to the bottom of the page

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.scrollTo(0, document.body.scrollHeight)");

Scroll to a specific position (pixels from top)

js.executeScript("window.scrollTo(0, 500)");

Scroll an element into view

WebElement element = driver.findElement(By.id("targetSection"));
js.executeScript("arguments[0].scrollIntoView(true)", element);

true aligns the element to the top of the visible area; false aligns it to the bottom.

Scroll to the top of the page

js.executeScript("window.scrollTo(0, 0)");

Scroll inside a scrollable container (not the whole page)

WebElement container = driver.findElement(By.id("scrollableDiv"));
js.executeScript("arguments[0].scrollTop = arguments[0].scrollHeight", container);

Selenium 4 native alternative Selenium 4's Actions class added scroll support via the W3C WebDriver Actions API:

new Actions(driver)
    .scrollToElement(element)
    .perform();

Or scroll by a specific delta:

new Actions(driver)
    .scrollByAmount(0, 500)
    .perform();

The native Actions approach is preferred when available because it goes through the official WebDriver protocol and respects browser scroll behavior. JavaScript scrolling is the fallback when the native approach does not work (e.g., custom scroll containers or legacy browser configurations).

Handling pop-ups with JavascriptExecutor depends on the type of pop-up. The key distinction is between native browser dialogs and custom HTML-based modal dialogs.

Native browser alerts (alert, confirm, prompt) These are OS-level dialogs triggered by window.alert(), window.confirm(), and window.prompt(). They cannot be interacted with using JavaScript—the browser blocks JS execution while they are open. Use the WebDriver Alert interface instead:

Alert alert = driver.switchTo().alert();
String text = alert.getText();
alert.accept();    // click OK
// or alert.dismiss() for Cancel
// or alert.sendKeys("input") for prompt dialogs

Custom modal dialogs (HTML/CSS-based) Modern applications typically use div-based modals styled with CSS rather than native window.alert(). These are ordinary DOM elements and can be manipulated with JavaScript:

// Hide a modal overlay
WebElement modal = driver.findElement(By.id("modalDialog"));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].style.display='none'", modal);

// Or click a button inside the modal
WebElement closeBtn = modal.findElement(By.cssSelector(".close-btn"));
js.executeScript("arguments[0].click()", closeBtn);

However, prefer WebDriver's native click() for modal buttons when the button is visible and interactable—JS clicking bypasses visibility checks and can mask real issues.

Authentication pop-ups Browser-native HTTP authentication dialogs cannot be handled by either WebDriver Alert or JavaScript. Pass credentials in the URL (https://user:[email protected]) or use browser profile configuration or the DevTools Protocol (CDP) in Selenium 4 to pre-authorize.

The interview point: JavaScriptExecutor is not the right tool for native window.alert() pop-ups—the Alert interface is. JS is useful only for custom DOM-based modals.

JavascriptExecutor can change element attributes at runtime, which is useful for fields that WebDriver cannot interact with directly due to readonly or disabled attributes, or for triggering attribute-based behaviors.

Set an attribute value

WebElement element = driver.findElement(By.id("dateField"));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].setAttribute('value', '2026-01-15')", element);

Remove a restricting attribute (e.g., readonly)

js.executeScript("arguments[0].removeAttribute('readonly')", element);
// Now WebDriver can type into the field normally
element.sendKeys("new value");

Enable a disabled element

js.executeScript("arguments[0].removeAttribute('disabled')", element);

Set an input value directly via the DOM property

For input fields, setting the .value property is often more reliable than setAttribute('value', ...) because setAttribute changes the HTML attribute while .value sets the DOM property (which is what the page's JavaScript reads):

js.executeScript("arguments[0].value = arguments[1]", element, "new text");

Change style attributes

js.executeScript("arguments[0].style.display = 'block'", hiddenElement);
js.executeScript("arguments[0].style.border = '2px solid red'", element);

Important caveat Changing attributes via JavaScript bypasses the application's validation and UI controls. A field may be readonly or disabled for a business reason, and forcing a value in this way may not trigger the JavaScript event listeners (change, input) that the application expects. Where possible, test the real user flow. Use attribute manipulation only when the test genuinely needs to reach a state the UI does not normally allow (e.g., testing downstream behavior that depends on a pre-set field value).

Dynamic web elements—elements that appear, disappear, change attributes, or are generated at runtime—can sometimes resist WebDriver's standard locators. JavascriptExecutor provides several ways to handle them.

Query elements by non-standard attributes

WebElement el = (WebElement) js.executeScript(
    "return document.querySelector('[data-testid=\"submitBtn\"]')");

Useful when the element has a data-* attribute that XPath handles awkwardly.

Read a dynamically set property

String dynamicValue = (String) js.executeScript(
    "return arguments[0].getAttribute('data-status')", element);

Trigger events that activate dynamic content

Some SPAs render content only after a specific JavaScript event fires. Dispatch a synthetic event:

js.executeScript(
    "arguments[0].dispatchEvent(new Event('change', {bubbles: true}))", element);

Access Shadow DOM elements

Elements inside a shadow root are not reachable by standard driver.findElement(). JavaScript can cross shadow boundaries:

WebElement shadowHost = driver.findElement(By.cssSelector("my-component"));
WebElement shadowChild = (WebElement) js.executeScript(
    "return arguments[0].shadowRoot.querySelector('#innerBtn')", shadowHost);
shadowChild.click();

Note: Selenium 4.1+ added partial native Shadow DOM support via SearchContext on shadow roots. Prefer the native approach when it works.

Wait for dynamic content to stabilize

If the page modifies a value asynchronously, executeAsyncScript can wait for a mutation:

js.executeAsyncScript(
    "var callback = arguments[arguments.length - 1];" +
    "var el = document.getElementById('result');" +
    "var observer = new MutationObserver(function() { callback(el.textContent); observer.disconnect(); });" +
    "observer.observe(el, {childList: true, subtree: true});");

Use JS as a last resort Standard WebDriverWait with ExpectedConditions handles most dynamic element scenarios without JavaScript. Reach for JavascriptExecutor only when WebDriver's own mechanisms cannot locate or interact with the element.