Modern web applications are heavily dependent on JavaScript to create dynamic, interactive, and responsive user interfaces. Applications built with JavaScript frameworks such as React, Angular, Vue.js, and other client-side technologies frequently update page content without performing a complete browser refresh. Handling such JavaScript-based applications effectively is an important skill for Selenium WebDriver automation.
In Selenium automation, JavaScript can control page elements, load dynamic content, modify the DOM, trigger browser events, display or hide elements, handle asynchronous operations, and communicate with backend services through AJAX or Fetch APIs. Because of this dynamic behavior, Selenium tests must be designed carefully to locate elements at the correct time, wait for required conditions, handle DOM changes, and interact with elements reliably.
This topic explains how Selenium WebDriver works with JavaScript-based applications, including dynamic elements, AJAX requests, JavaScriptExecutor, waits, asynchronous content, DOM updates, React and Angular applications, event handling, stale elements, scrolling, hidden elements, overlays, and practical automation techniques.
Selenium Training Course | Register for Course Demo
A JavaScript-based application is a web application that uses JavaScript extensively to control the user interface, perform calculations, communicate with servers, update page content, and respond to user actions.
Unlike traditional websites where clicking a link may reload the entire page, JavaScript applications can update only a specific section of the page while the rest of the application remains unchanged.
User Action
|
v
JavaScript Event
|
v
API / Server Request
|
v
Response Received
|
v
DOM Updated
|
v
User Interface Changes
JavaScript applications continuously modify the DOM. An element that exists when the page initially loads may be replaced, removed, or recreated later. Selenium therefore needs to synchronize with the application state rather than simply waiting for the page to load.
| Traditional Website | JavaScript-Based Application |
|---|---|
| Frequent full-page refreshes | Partial DOM updates |
| Content often available after page load | Content may load asynchronously |
| Simple page navigation | Client-side routing |
| Static elements are common | Dynamic elements are common |
| Synchronization is relatively simple | Synchronization requires careful waits |
| Server generates much of the HTML | JavaScript may generate or modify HTML |
The Document Object Model (DOM) represents the structure of an HTML document as objects that JavaScript can access and modify.
<html>
<body>
<div id="app">
<button id="login">Login</button>
</div>
</body>
</html>
JavaScript can modify this DOM by changing attributes, text, styles, classes, values, or by creating and removing elements.
Selenium WebDriver communicates with the browser and allows automation scripts to locate and interact with DOM elements.
Test Script
|
v
Selenium WebDriver
|
v
Browser Driver
|
v
Browser
|
v
DOM / Web Application
import java.time.Duration;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("https://example.com");
Locators are especially important when automating dynamic applications. Whenever possible, use stable attributes such as IDs, names, accessible attributes, or application-specific test attributes.
WebElement username =
driver.findElement(By.id("username"));
WebElement login =
driver.findElement(By.id("login"));
| Locator | Example | Usage |
|---|---|---|
| ID | By.id("username") | Stable unique element ID |
| Name | By.name("email") | Name attribute |
| Class Name | By.className("login") | CSS class |
| Tag Name | By.tagName("button") | HTML tag |
| Link Text | By.linkText("Login") | Exact link text |
| CSS Selector | By.cssSelector("#login") | CSS-based selection |
| XPath | By.xpath("//button[@id='login']") | Flexible element selection |
A dynamic element is an element whose presence, attributes, location, text, or state changes during application execution.
Page Load
|
v
Loading...
|
v
JavaScript Request
|
v
Data Received
|
v
Element Created
|
v
Element Available
Using fixed delays can make tests slower and less reliable because the required element may become available before or after the specified delay.
Thread.sleep(5000);A better approach is to wait for a meaningful application condition.
Explicit waits allow Selenium to wait until a specific condition becomes true.
WebDriverWait wait =
new WebDriverWait(driver, Duration.ofSeconds(10));
WebElement login =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("login")
)
);
WebElement element =
wait.until(
ExpectedConditions.presenceOfElementLocated(
By.id("username")
)
);
WebElement element =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("username")
)
);
WebElement button =
wait.until(
ExpectedConditions.elementToBeClickable(
By.id("login")
)
);
button.click();
wait.until(
ExpectedConditions.textToBePresentInElementLocated(
By.id("message"),
"Login successful"
)
);
AJAX allows a web application to communicate with the server without refreshing the entire page. Selenium does not directly wait for an AJAX request itself. Instead, the test should wait for a visible application state that indicates that the request has completed.
Click Search
|
v
AJAX Request
|
v
Loading Indicator
|
v
Server Response
|
v
Results Rendered
|
v
Result Element Available
driver.findElement(By.id("search")).click();
WebElement result =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".search-result")
)
);
System.out.println(result.getText());
JavaScript applications often display a loading spinner while an operation is in progress.
wait.until(
ExpectedConditions.invisibilityOfElementLocated(
By.cssSelector(".loading-spinner")
)
);
A button may initially be disabled and become enabled after JavaScript validation.
WebElement submit =
wait.until(
ExpectedConditions.elementToBeClickable(
By.id("submit")
)
);
submit.click();
wait.until(
ExpectedConditions.textToBePresentInElementLocated(
By.id("status"),
"Completed"
)
);
JavaScriptExecutor is a Selenium interface that allows JavaScript code to be executed inside the browser.
import org.openqa.selenium.JavascriptExecutor;
JavascriptExecutor js =
(JavascriptExecutor) driver;
js.executeScript(
"alert('Hello Selenium');"
);
WebElement element =
driver.findElement(By.id("username"));
js.executeScript(
"arguments[0].style.outline='3px solid red';",
element
);
The arguments[0] expression represents the first object passed to the JavaScript execution method.
js.executeScript(
"arguments[0].click();",
button
);
Here, button becomes arguments[0] inside the JavaScript code.
WebElement button =
driver.findElement(By.id("submit"));
js.executeScript(
"arguments[0].click();",
button
);
JavaScript click should be used carefully because it can bypass some of the normal interaction behavior that a real user click would trigger.
| Normal Selenium | JavaScript |
|---|---|
| button.click() | arguments[0].click() |
| Uses WebDriver interaction | Executes directly in page JavaScript |
| Better for normal user behavior | Useful for specialized DOM-level operations |
| Can expose interactability problems | May bypass some UI restrictions |
JavaScript applications may create elements before displaying them. Selenium normally requires elements to be interactable for actions such as clicking.
WebElement element =
driver.findElement(By.id("hiddenElement"));
js.executeScript(
"arguments[0].style.display='block';",
element
);
Changing visibility should be used only for controlled testing or debugging. It should not be used to hide genuine application defects.
WebElement button =
driver.findElement(By.id("submit"));
js.executeScript(
"arguments[0].removeAttribute('disabled');",
button
);
Removing the disabled attribute may bypass application validation. Therefore, it should be used only when the test specifically needs to inspect that DOM state.
WebElement username =
driver.findElement(By.id("username"));
js.executeScript(
"arguments[0].value='admin';",
username
);
A direct JavaScript change to an input's value does not necessarily produce the same events as typing through Selenium. JavaScript frameworks may depend on input, change, keyboard, or other events to update application state.
js.executeScript(
"arguments[0].value='admin';" +
"arguments[0].dispatchEvent(" +
"new Event('input',{bubbles:true})" +
");",
username
);
js.executeScript(
"arguments[0].value='IN';" +
"arguments[0].dispatchEvent(" +
"new Event('change',{bubbles:true})" +
");",
country
);
Modern frameworks often listen for browser events to update their internal state. Changing the DOM alone may therefore not be enough.
User Action
|
v
Browser Event
|
v
Framework Event Handler
|
v
Application State
|
v
DOM Re-render
React applications commonly use component state and virtual DOM rendering. An element can be recreated after a state change, which means a previously stored WebElement reference may become stale.
For React applications, prefer normal Selenium interactions and explicit waits whenever possible. Use stable locators and re-locate elements after significant re-renders.
WebElement username =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector("input[name='username']")
)
);
username.clear();
username.sendKeys("admin");
If a React state change replaces an element, Selenium may report a StaleElementReferenceException.
WebElement button =
driver.findElement(By.id("submit"));
button.click();
// Application re-renders the button
button =
driver.findElement(By.id("submit"));
Angular applications can also dynamically render components and update elements based on application state, HTTP responses, form validation, and user events.
Use stable locators, explicit waits, and application-specific conditions rather than relying on arbitrary delays.
Vue.js applications dynamically update components and DOM elements based on reactive data. Selenium automation should wait for the required state rather than assuming that an element will remain unchanged after it is located.
A Single Page Application (SPA) can change views without performing a complete browser page refresh.
Login View
|
v
Dashboard View
|
v
Products View
|
v
Checkout View
The browser may remain on the same URL while the displayed DOM changes significantly.
Because the page may not reload, a Selenium script should wait for an element or state that identifies the new view.
driver.findElement(By.id("dashboardLink")).click();
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("dashboard")
)
);
SPA applications may change URL fragments or paths without a traditional page reload.
wait.until(
ExpectedConditions.urlContains("/dashboard")
);
JavaScript can add, remove, replace, or modify DOM elements during execution. Tests should therefore avoid assuming that a WebElement reference remains valid indefinitely.
StaleElementReferenceException occurs when Selenium has a reference to an element that is no longer attached to the current DOM.
WebElement element =
driver.findElement(By.id("username"));
driver.navigate().refresh();
element =
driver.findElement(By.id("username"));
WebElement element =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("username")
)
);
element.click();
Re-locating the element after a known DOM refresh or re-render is often simpler than retaining an outdated reference.
for (int i = 0; i < 3; i++) {
try {
WebElement button =
driver.findElement(By.id("submit"));
button.click();
break;
} catch (org.openqa.selenium.StaleElementReferenceException e) {
System.out.println("Element became stale. Retrying...");
}
}
JavaScript applications often update table rows dynamically after filtering, searching, pagination, or API responses.
WebElement row =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector("table tbody tr")
)
);
System.out.println(row.getText());
A dropdown may load options only after the user clicks it or enters text.
WebElement search =
driver.findElement(By.id("country"));
search.sendKeys("India");
WebElement option =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.xpath("//li[contains(.,'India')]")
)
);
option.click();
WebElement search =
driver.findElement(By.id("search"));
search.sendKeys("Mumbai");
WebElement suggestion =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".suggestion")
)
);
suggestion.click();
driver.findElement(By.id("search"))
.sendKeys("Selenium");
driver.findElement(By.id("searchButton"))
.click();
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".search-result")
)
);
JavaScript applications may display browser alerts, confirmations, or prompts.
driver.findElement(By.id("delete")).click();
wait.until(
ExpectedConditions.alertIsPresent()
);
driver.switchTo().alert().accept();
driver.switchTo().alert().dismiss();
driver.switchTo().alert().sendKeys("Test Data");
driver.switchTo().alert().accept();
JavaScript applications frequently display modal dialogs, cookie banners, loading overlays, or notification layers above the target element.
wait.until(
ExpectedConditions.invisibilityOfElementLocated(
By.cssSelector(".overlay")
)
);
driver.findElement(By.id("submit")).click();
WebElement modal =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".modal")
)
);
WebElement input =
modal.findElement(By.cssSelector("input"));
input.sendKeys("Test Data");
WebElement accept =
wait.until(
ExpectedConditions.elementToBeClickable(
By.id("acceptCookies")
)
);
accept.click();
Some modern web applications use Shadow DOM to encapsulate HTML, CSS, and JavaScript behavior. Standard locators may not always be able to access elements inside a shadow root directly.
WebElement host =
driver.findElement(By.cssSelector("my-component"));
WebElement shadowElement =
(WebElement) js.executeScript(
"return arguments[0].shadowRoot.querySelector('button');",
host
);
shadowElement.click();
Some JavaScript applications load payment forms, authentication widgets, advertisements, or external components inside iframes.
WebElement frame =
wait.until(
ExpectedConditions.presenceOfElementLocated(
By.id("paymentFrame")
)
);
driver.switchTo().frame(frame);
WebElement card =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("cardNumber")
)
);
card.sendKeys("4111111111111111");
driver.switchTo().defaultContent();
JavaScript applications can open new tabs or windows through user actions.
String originalWindow =
driver.getWindowHandle();
driver.findElement(By.id("openWindow")).click();
wait.until(
d -> d.getWindowHandles().size() > 1
);
for (String windowHandle : driver.getWindowHandles()) {
if (!windowHandle.equals(originalWindow)) {
driver.switchTo().window(windowHandle);
break;
}
}
WebElement element =
driver.findElement(By.id("footer"));
js.executeScript(
"arguments[0].scrollIntoView({block:'center'});",
element
);
js.executeScript(
"window.scrollTo(0, document.body.scrollHeight);"
);
js.executeScript(
"window.scrollBy(0,500);"
);
Lazy loading means content is loaded only when it becomes necessary, often when the user scrolls toward it.
WebElement product =
driver.findElement(
By.cssSelector(".lazy-product")
);
js.executeScript(
"arguments[0].scrollIntoView({block:'center'});",
product
);
wait.until(
ExpectedConditions.visibilityOf(product)
);
long previousHeight = 0;
while (true) {
long currentHeight =
((Number) js.executeScript(
"return document.body.scrollHeight;"
)).longValue();
if (currentHeight == previousHeight) {
break;
}
previousHeight = currentHeight;
js.executeScript(
"window.scrollTo(0, document.body.scrollHeight);"
);
Thread.sleep(1000);
}
For production automation, condition-based synchronization is generally preferable to relying on a fixed sleep.
JavaScript applications frequently enable, disable, add, or remove fields depending on previous selections.
driver.findElement(By.id("accountType"))
.click();
WebElement companyName =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("companyName")
)
);
companyName.sendKeys("ABC Technologies");
driver.findElement(By.id("country"))
.sendKeys("India");
WebElement state =
wait.until(
ExpectedConditions.elementToBeClickable(
By.id("state")
)
);
state.sendKeys("Maharashtra");
WebElement checkbox =
wait.until(
ExpectedConditions.elementToBeClickable(
By.id("terms")
)
);
if (!checkbox.isSelected()) {
checkbox.click();
}
WebElement radio =
wait.until(
ExpectedConditions.elementToBeClickable(
By.id("male")
)
);
if (!radio.isSelected()) {
radio.click();
}
JavaScript frameworks can dynamically generate attributes such as IDs, classes, ARIA attributes, and data attributes.
Prefer stable application-specific attributes whenever possible.
WebElement element =
driver.findElement(
By.cssSelector("[data-testid='login-button']")
);
A dedicated test attribute can make automation locators more stable.
WebElement login =
driver.findElement(
By.cssSelector("[data-testid='login']")
);
Some frameworks generate changing CSS class names. Avoid depending on an unstable generated class when a more stable attribute is available.
By locator =
By.xpath("//button[contains(.,'Login')]");
If an ID changes between sessions, use another stable locator.
By locator =
By.cssSelector("input[name='username']");
Modern JavaScript applications may use custom web components. These components can contain their own internal DOM or Shadow DOM.
JavaScript applications frequently validate forms before sending data to the server.
WebElement email =
driver.findElement(By.id("email"));
email.clear();
email.sendKeys("invalid-email");
driver.findElement(By.id("submit"))
.click();
WebElement error =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".email-error")
)
);
System.out.println(error.getText());
Some applications validate fields immediately after input events.
email.sendKeys("[email protected]");
wait.until(
ExpectedConditions.invisibilityOfElementLocated(
By.cssSelector(".email-error")
)
);
When a UI depends on an API response, wait for a user-visible condition such as a result, status message, table row, or spinner disappearance.
driver.findElement(By.id("loadData")).click();
wait.until(
ExpectedConditions.invisibilityOfElementLocated(
By.cssSelector(".loading")
)
);
WebElement result =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("result")
)
);
driver.findElement(By.id("loadUsers")).click();
wait.until(
ExpectedConditions.numberOfElementsToBeMoreThan(
By.cssSelector("table tbody tr"),
0
)
);
driver.findElement(By.id("save")).click();
WebElement notification =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".notification")
)
);
System.out.println(notification.getText());
wait.until(
ExpectedConditions.textToBePresentInElementLocated(
By.cssSelector(".toast"),
"Saved successfully"
)
);
WebElement menu =
driver.findElement(By.id("menu"));
menu.click();
WebElement item =
wait.until(
ExpectedConditions.elementToBeClickable(
By.xpath("//a[contains(.,'Dashboard')]")
)
);
item.click();
import org.openqa.selenium.interactions.Actions;
Actions actions =
new Actions(driver);
WebElement menu =
driver.findElement(By.id("products"));
actions.moveToElement(menu).perform();
WebElement item =
wait.until(
ExpectedConditions.elementToBeClickable(
By.id("electronics")
)
);
item.click();
WebElement username =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("username")
)
);
WebElement password =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("password")
)
);
username.clear();
username.sendKeys("admin");
password.clear();
password.sendKeys("Password123");
WebElement login =
wait.until(
ExpectedConditions.elementToBeClickable(
By.id("login")
)
);
login.click();
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("dashboard")
)
);
System.out.println("Dashboard loaded successfully.");
WebElement logout =
wait.until(
ExpectedConditions.elementToBeClickable(
By.id("logout")
)
);
logout.click();
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("login")
)
);
E-commerce websites commonly use JavaScript for product filtering, cart updates, price calculations, stock information, coupons, checkout steps, and payment workflows.
Search Product
|
v
API Request
|
v
Product Results
|
v
Select Product
|
v
Add to Cart
|
v
Cart Updated
|
v
Checkout
WebElement product =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".product-card")
)
);
WebElement addToCart =
product.findElement(
By.cssSelector(".add-to-cart")
);
addToCart.click();
wait.until(
ExpectedConditions.textToBePresentInElementLocated(
By.id("cartCount"),
"1"
)
);
driver.findElement(By.id("quantity"))
.clear();
driver.findElement(By.id("quantity"))
.sendKeys("2");
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("totalPrice")
)
);
System.out.println(
driver.findElement(By.id("totalPrice")).getText()
);
WebElement search =
driver.findElement(By.id("search"));
search.sendKeys("Laptop");
WebElement suggestion =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.xpath("//li[contains(.,'Laptop')]")
)
);
suggestion.click();
WebElement next =
wait.until(
ExpectedConditions.elementToBeClickable(
By.id("nextPage")
)
);
next.click();
wait.until(
ExpectedConditions.stalenessOf(
driver.findElement(
By.cssSelector("table tbody tr")
)
)
);
driver.findElement(By.id("category"))
.click();
driver.findElement(
By.xpath("//option[contains(.,'Electronics')]")
).click();
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".product-card")
)
);
driver.findElement(By.id("openModal")).click();
WebElement modal =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".modal")
)
);
modal.findElement(
By.id("username")
).sendKeys("admin");
JavaScript applications may animate elements before making them available for interaction. If an animation blocks an interaction, wait for the appropriate state rather than assuming that visibility alone means the element is ready.
WebElement button =
wait.until(
ExpectedConditions.elementToBeClickable(
By.id("submit")
)
);
button.click();
ElementClickInterceptedException may occur when an overlay, animation, sticky header, or another element is positioned above the target.
wait.until(
ExpectedConditions.invisibilityOfElementLocated(
By.cssSelector(".overlay")
)
);
driver.findElement(By.id("submit")).click();
This exception can occur when an element exists in the DOM but cannot currently be interacted with.
NoSuchElementException usually means that Selenium could not locate the element at the time the locator was executed.
WebElement element =
wait.until(
ExpectedConditions.presenceOfElementLocated(
By.id("username")
)
);
TimeoutException means that the expected condition was not satisfied within the configured wait period.
For JavaScript-heavy applications, stale elements are common because frameworks can replace DOM nodes.
try {
WebElement element =
driver.findElement(By.id("submit"));
element.click();
} catch (org.openqa.selenium.StaleElementReferenceException e) {
WebElement element =
driver.findElement(By.id("submit"));
element.click();
}
JavascriptException can occur when JavaScript execution fails.
When a Selenium test fails against a JavaScript application, inspect the application in the browser first.
Browser developer tools are extremely useful when understanding JavaScript-based applications. The Elements panel shows the DOM, the Console shows JavaScript errors and messages, and the Network panel shows requests and responses.
Right Click
|
v
Inspect
|
v
Elements Panel
|
+---- Check ID
+---- Check Class
+---- Check Data Attributes
+---- Check DOM Position
+---- Check Shadow DOM
|
v
Create Stable Locator
If a JavaScript application itself has a runtime error, Selenium may report symptoms such as missing elements, incomplete rendering, or unexpected states. Browser console inspection can help distinguish an automation synchronization problem from an application problem.
Network delays can cause elements to appear later than expected. Tests should synchronize with application-visible conditions rather than using unnecessarily large fixed delays.
WebElement element =
driver.findElement(By.id("target"));
js.executeScript(
"arguments[0].scrollIntoView({block:'center'});",
element
);
js.executeScript(
"arguments[0].style.outline='3px solid red';",
element
);
String text =
(String) js.executeScript(
"return arguments[0].textContent;",
element
);
System.out.println(text);
String url =
(String) js.executeScript(
"return window.location.href;"
);
System.out.println(url);
String title =
(String) js.executeScript(
"return document.title;"
);
System.out.println(title);
String state =
(String) js.executeScript(
"return document.readyState;"
);
System.out.println(state);
The document ready state can indicate whether the initial document has been loaded, but it does not necessarily mean that a JavaScript application has finished rendering all dynamic content.
| State | Meaning |
|---|---|
| loading | Document is still loading |
| interactive | Initial document has been parsed |
| complete | Document and dependent resources have finished loading |
wait.until(
d -> ((JavascriptExecutor) d)
.executeScript(
"return document.readyState"
)
.equals("complete")
);
For JavaScript applications, this should generally be combined with waits for application-specific elements or states.
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("dashboard")
)
);
wait.until(
ExpectedConditions.urlContains("/dashboard")
);
File upload controls may be wrapped inside custom JavaScript components. Selenium should normally interact with the underlying file input using sendKeys() when possible.
WebElement upload =
driver.findElement(By.cssSelector(
"input[type='file']"
));
upload.sendKeys(
"C:\\\\Users\\\\Test\\\\Documents\\\\sample.pdf"
);
If the visible upload button is only a JavaScript wrapper around a hidden file input, locate the actual input element where possible rather than trying to automate the operating-system file chooser.
Modern date pickers frequently generate calendar elements dynamically.
driver.findElement(By.id("date"))
.click();
WebElement date =
wait.until(
ExpectedConditions.elementToBeClickable(
By.xpath("//button[contains(.,'25')]")
)
);
date.click();
driver.findElement(By.id("nextMonth"))
.click();
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".calendar")
)
);
WebElement icon =
driver.findElement(By.id("help"));
new Actions(driver)
.moveToElement(icon)
.perform();
WebElement tooltip =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".tooltip")
)
);
System.out.println(tooltip.getText());
driver.findElement(By.id("profileTab"))
.click();
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("profileContent")
)
);
driver.findElement(By.id("faq1"))
.click();
WebElement answer =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("answer1")
)
);
System.out.println(answer.getText());
WebElement source =
driver.findElement(By.id("source"));
WebElement target =
driver.findElement(By.id("target"));
Actions actions =
new Actions(driver);
actions.dragAndDrop(source, target)
.perform();
Actions actions =
new Actions(driver);
actions.moveToElement(
driver.findElement(By.id("menu"))
).click().perform();
Rich text editors may use contenteditable elements rather than standard input elements.
WebElement editor =
driver.findElement(
By.cssSelector("[contenteditable='true']")
);
editor.click();
editor.sendKeys("Hello Selenium");
js.executeScript(
"arguments[0].innerHTML='Hello Selenium';",
editor
);
When using JavaScript to modify contenteditable elements, consider whether the application's event handlers also need to be triggered.
Chat applications frequently append new messages dynamically without refreshing the page.
driver.findElement(By.id("message"))
.sendKeys("Hello");
driver.findElement(By.id("send"))
.click();
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".message")
)
);
WebSocket or other real-time communication can update the UI without a page refresh. Selenium should wait for the resulting visible UI state.
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".notification")
)
);
Selenium does not directly control the WebSocket protocol. Instead, it interacts with the UI state produced by the application's real-time communication.
Dashboards often contain charts, cards, tables, and statistics that are loaded asynchronously.
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("dashboard")
)
);
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".dashboard-card")
)
);
Charts may be rendered using SVG, Canvas, or JavaScript chart libraries. Selenium can validate the surrounding DOM, labels, legends, and displayed values. Canvas graphics may require additional application-specific strategies because the visual content may not exist as ordinary DOM text.
WebElement svgElement =
driver.findElement(
By.cssSelector("svg")
);
System.out.println(
svgElement.getAttribute("outerHTML")
);
Canvas content is drawn programmatically and may not expose individual graphical objects as normal HTML elements. Validation may therefore require accessible labels, underlying data, application APIs, or screenshot-based techniques depending on the test objective.
Start
|
v
Open Application
|
v
Identify Dynamic Behavior
|
v
Locate Stable Element
|
v
Wait for Required State
|
v
Perform Selenium Action
|
v
Wait for Application Update
|
v
Verify Result
|
v
Handle DOM Changes
|
v
Continue Test
|
v
End
| Situation | Recommended Approach |
|---|---|
| Element appears later | Explicit wait |
| Button becomes enabled | elementToBeClickable or enabled-state condition |
| Loading spinner disappears | invisibilityOfElementLocated |
| Text changes | textToBePresentInElementLocated |
| URL changes | urlContains or urlToBe |
| DOM element is replaced | Re-locate element |
| Iframe content | switchTo().frame() |
| Special DOM operation | JavaScriptExecutor when appropriate |
Large fixed sleeps make tests slow and may still fail when application behavior takes longer than expected.
Prefer condition-based explicit waits.
JavaScriptExecutor is powerful, but it should not automatically replace normal Selenium commands.
// Prefer this for normal interaction
element.click();
// Use JavaScript when a DOM-level operation is specifically required
js.executeScript(
"arguments[0].click();",
element
);
JavaScript frameworks can replace DOM nodes during re-rendering. Re-locate elements after known DOM changes.
Directly changing an input value through JavaScript may not update the application's internal state.
When required, trigger the relevant input or change event and verify the resulting application behavior.
A locator based on generated CSS classes or changing IDs can make tests fragile.
Prefer stable identifiers such as data-testid, name, accessible attributes, or other application-supported test hooks.
If the target element belongs to an iframe, Selenium must switch into the correct frame before interacting with it.
A loading overlay or modal can prevent interaction even when the target element is visible.
Presence does not always mean that the application is ready. A stronger test verifies the expected state, text, enabled state, or resulting UI change.
public class JavaScriptUtils {
public static void click(
WebDriver driver,
WebElement element) {
JavascriptExecutor js =
(JavascriptExecutor) driver;
js.executeScript(
"arguments[0].click();",
element
);
}
public static void scrollIntoView(
WebDriver driver,
WebElement element) {
JavascriptExecutor js =
(JavascriptExecutor) driver;
js.executeScript(
"arguments[0].scrollIntoView({block:'center'});",
element
);
}
public static void highlight(
WebDriver driver,
WebElement element) {
JavascriptExecutor js =
(JavascriptExecutor) driver;
js.executeScript(
"arguments[0].style.outline='3px solid red';",
element
);
}
}
WebElement login =
driver.findElement(By.id("login"));
JavaScriptUtils.scrollIntoView(
driver,
login
);
JavaScriptUtils.highlight(
driver,
login
);
login.click();
WebDriverWait wait =
new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
WebElement button =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("submit")
)
);
JavaScriptUtils.scrollIntoView(
driver,
button
);
JavaScriptUtils.highlight(
driver,
button
);
Page Object Model helps organize locators and interactions into reusable classes. This becomes particularly useful when working with complex JavaScript applications containing many dynamic components.
public class LoginPage {
private WebDriver driver;
private By username =
By.id("username");
private By password =
By.id("password");
private By login =
By.id("login");
public LoginPage(WebDriver driver) {
this.driver = driver;
}
public void login(
String user,
String pass) {
driver.findElement(username)
.clear();
driver.findElement(username)
.sendKeys(user);
driver.findElement(password)
.clear();
driver.findElement(password)
.sendKeys(pass);
driver.findElement(login)
.click();
}
}
public class LoginPage {
private WebDriver driver;
private WebDriverWait wait;
private By username =
By.id("username");
private By password =
By.id("password");
private By login =
By.id("login");
public LoginPage(WebDriver driver) {
this.driver = driver;
this.wait =
new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
}
public void login(
String user,
String pass) {
WebElement userElement =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
username
)
);
userElement.clear();
userElement.sendKeys(user);
WebElement passwordElement =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
password
)
);
passwordElement.clear();
passwordElement.sendKeys(pass);
WebElement loginButton =
wait.until(
ExpectedConditions.elementToBeClickable(
login
)
);
loginButton.click();
}
}
import org.testng.Assert;
import org.testng.annotations.Test;
public class LoginTest {
@Test
public void loginTest() {
WebDriver driver =
new ChromeDriver();
driver.get(
"https://example.com/login"
);
LoginPage loginPage =
new LoginPage(driver);
loginPage.login(
"admin",
"Password123"
);
WebElement dashboard =
new WebDriverWait(
driver,
Duration.ofSeconds(10)
).until(
ExpectedConditions.visibilityOfElementLocated(
By.id("dashboard")
)
);
Assert.assertTrue(
dashboard.isDisplayed()
);
driver.quit();
}
}
WebDriver driver =
new ChromeDriver();
driver.manage()
.window()
.maximize();
driver.get(
"https://example.com/login"
);
WebDriverWait wait =
new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
WebElement username =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("username")
)
);
WebElement password =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("password")
)
);
username.clear();
username.sendKeys("admin");
password.clear();
password.sendKeys("Password123");
WebElement login =
wait.until(
ExpectedConditions.elementToBeClickable(
By.id("login")
)
);
login.click();
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("dashboard")
)
);
System.out.println(
"Login successful"
);
driver.quit();
WebDriver driver =
new ChromeDriver();
WebDriverWait wait =
new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
driver.get(
"https://example.com"
);
WebElement search =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("search")
)
);
search.sendKeys("Selenium");
driver.findElement(
By.id("searchButton")
).click();
WebElement result =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".search-result")
)
);
System.out.println(
"Result: " + result.getText()
);
driver.quit();
WebDriverWait wait =
new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
WebElement product =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".product-card")
)
);
WebElement addToCart =
product.findElement(
By.cssSelector(".add-to-cart")
);
addToCart.click();
wait.until(
ExpectedConditions.textToBePresentInElementLocated(
By.id("cartCount"),
"1"
)
);
System.out.println(
"Product added to cart."
);
driver.get(
"https://example.com/dashboard"
);
WebDriverWait wait =
new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("dashboard")
)
);
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".dashboard-card")
)
);
System.out.println(
"Dashboard loaded."
);
JavascriptExecutor js =
(JavascriptExecutor) driver;
WebElement element =
driver.findElement(
By.id("username")
);
js.executeScript(
"arguments[0].style.outline='3px solid red';",
element
);
WebElement button =
driver.findElement(
By.id("submit")
);
js.executeScript(
"arguments[0].scrollIntoView({block:'center'});",
button
);
wait.until(
ExpectedConditions.elementToBeClickable(
button
)
);
button.click();
driver.findElement(
By.id("openModal")
).click();
WebElement modal =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".modal")
)
);
WebElement input =
modal.findElement(
By.cssSelector("input")
);
input.sendKeys("Test Data");
WebElement close =
modal.findElement(
By.cssSelector(".close")
);
close.click();
wait.until(
ExpectedConditions.invisibilityOf(modal)
);
driver.findElement(
By.id("loadUsers")
).click();
wait.until(
ExpectedConditions.numberOfElementsToBeMoreThan(
By.cssSelector("table tbody tr"),
0
)
);
List<WebElement> rows =
driver.findElements(
By.cssSelector("table tbody tr")
);
for (WebElement row : rows) {
System.out.println(
row.getText()
);
}
WebElement email =
driver.findElement(By.id("email"));
email.clear();
email.sendKeys("invalid");
driver.findElement(By.id("submit"))
.click();
WebElement error =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".error")
)
);
System.out.println(
"Validation: " + error.getText()
);
driver.findElement(
By.id("loadData")
).click();
wait.until(
ExpectedConditions.invisibilityOfElementLocated(
By.cssSelector(".spinner")
)
);
WebElement data =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("data")
)
);
System.out.println(
data.getText()
);
driver.findElement(
By.id("delete")
).click();
wait.until(
ExpectedConditions.alertIsPresent()
);
Alert alert =
driver.switchTo().alert();
System.out.println(
alert.getText()
);
alert.accept();
import java.time.Duration;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
public class JavaScriptApplicationTest {
public static void main(String[] args) {
WebDriver driver =
new ChromeDriver();
driver.manage()
.window()
.maximize();
driver.get(
"https://example.com"
);
WebDriverWait wait =
new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
JavascriptExecutor js =
(JavascriptExecutor) driver;
WebElement username =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("username")
)
);
username.clear();
username.sendKeys("admin");
WebElement password =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("password")
)
);
password.clear();
password.sendKeys("Password123");
WebElement login =
wait.until(
ExpectedConditions.elementToBeClickable(
By.id("login")
)
);
js.executeScript(
"arguments[0].scrollIntoView({block:'center'});",
login
);
login.click();
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("dashboard")
)
);
System.out.println(
"JavaScript application handled successfully."
);
driver.quit();
}
}
Start
|
v
Open Browser
|
v
Open JavaScript Application
|
v
Identify Dynamic Components
|
v
Locate Stable Element
|
v
Wait for Required Condition
|
v
Perform Selenium Action
|
v
Application Executes JavaScript
|
v
DOM / UI Changes
|
v
Wait for Updated State
|
v
Verify Result
|
+----> DOM Re-render?
| |
| v
| Re-locate Element
|
+----> AJAX/API Request?
| |
| v
| Wait for Result
|
+----> iframe?
| |
| v
| Switch Frame
|
+----> Shadow DOM?
|
v
Access Shadow Root
|
v
Continue Test
|
v
End
| Problem | Possible Approach |
|---|---|
| Element appears later | Explicit Wait |
| Element is replaced | Re-locate the element |
| Loading spinner visible | Wait for spinner to disappear |
| AJAX result not available | Wait for result element |
| Element is in iframe | Switch to iframe |
| Element is inside Shadow DOM | Access shadow root |
| Element is below viewport | Scroll into view |
| Normal click fails because of application-specific DOM behavior | Investigate cause before considering JavaScript click |
| Need DOM-level modification | JavaScriptExecutor |
| Dynamic text changes | Wait for expected text |
| SPA route changes | Wait for URL or view-specific element |
| Exception | Common Cause |
|---|---|
| NoSuchElementException | Element is not available when searched |
| StaleElementReferenceException | DOM element was replaced or removed |
| ElementNotInteractableException | Element exists but is not interactable |
| ElementClickInterceptedException | Another element blocks the click |
| TimeoutException | Expected condition was not satisfied |
| JavascriptException | JavaScript execution failed |
| NoSuchFrameException | Required iframe cannot be located |
A JavaScript-based application is a web application that uses JavaScript to dynamically control the user interface, process user interactions, communicate with APIs, and update DOM content without necessarily performing a full page refresh.
They frequently modify the DOM asynchronously. Elements can appear later, disappear, change state, or be replaced during execution. Therefore, synchronization and stable element identification are important.
AJAX is a technique that allows web applications to exchange data with a server asynchronously and update parts of the page without requiring a complete page reload.
Use explicit waits for application-visible conditions such as result elements, loading indicators, text changes, or enabled controls rather than relying on arbitrary fixed delays.
JavaScriptExecutor is a Selenium interface that allows JavaScript code to be executed in the browser context.
It can be useful for specialized DOM-level operations such as scrolling, inspecting or modifying DOM properties, highlighting elements, or handling certain browser-side behaviors when normal WebDriver APIs are not suitable for the specific task.
No. Normal Selenium WebDriver methods should generally be preferred for normal browser interactions. JavaScriptExecutor should be used when there is a specific reason to perform a DOM-level JavaScript operation.
A WebElement becomes stale when the DOM node represented by the Selenium reference is removed or replaced, which is common after JavaScript framework re-rendering.
Re-locate the element after the DOM change and use appropriate waits. In some situations, a controlled retry can also be used.
No. document.readyState describes document loading, but a JavaScript application may continue making API calls and rendering dynamic components after the document becomes complete. Application-specific waits are therefore often required.
Use stable locators and explicit waits for conditions such as presence, visibility, clickability, text changes, URL changes, or application-specific states.
First determine why the element is hidden and whether the test should interact with it. For specialized debugging or DOM-state testing, JavaScript can change visibility, but doing so may bypass intended application behavior.
driver.switchTo().frame(
driver.findElement(By.id("frame"))
);
driver.findElement(
By.id("username")
).sendKeys("admin");
driver.switchTo().defaultContent();
Identify the shadow host and access its shadow root using supported Selenium Shadow DOM APIs or JavaScript when appropriate. Then locate the required element within the shadow root.
Because changing the DOM property directly does not necessarily trigger the events and framework state updates expected by the application. When required, the relevant input or change event must also be triggered and the resulting UI state should be verified.
| Concept | Key Point |
|---|---|
| JavaScript Application | Dynamic client-side application |
| DOM | Object representation of the page structure |
| AJAX | Asynchronous server communication |
| SPA | Application updates views without full page reloads |
| Explicit Wait | Wait for a specific condition |
| JavaScriptExecutor | Execute JavaScript in browser |
| Stale Element | Stored element reference is no longer attached to current DOM |
| Iframe | Separate browsing context |
| Shadow DOM | Encapsulated DOM structure |
| Dynamic Locator | Locator must account for changing attributes or structure |
| Loading Indicator | Signals asynchronous processing |
| Application State | Actual state that should be verified after actions |
A useful practice project is to automate a JavaScript-based e-commerce workflow.
Open Website
|
v
Login
|
v
Wait for Dashboard
|
v
Search Product
|
v
Wait for AJAX Suggestions
|
v
Select Product
|
v
Wait for Product Details
|
v
Add Product to Cart
|
v
Wait for Cart Update
|
v
Open Cart
|
v
Update Quantity
|
v
Wait for Price Update
|
v
Proceed to Checkout
|
v
Fill Dynamic Form
|
v
Verify Order
|
v
End Test
import java.time.Duration;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
public class DynamicJavaScriptAppTest {
public static void main(String[] args) {
WebDriver driver =
new ChromeDriver();
driver.manage()
.window()
.maximize();
driver.get(
"https://example.com"
);
WebDriverWait wait =
new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
JavascriptExecutor js =
(JavascriptExecutor) driver;
WebElement username =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("username")
)
);
username.clear();
username.sendKeys("admin");
WebElement password =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("password")
)
);
password.clear();
password.sendKeys("Password123");
WebElement login =
wait.until(
ExpectedConditions.elementToBeClickable(
By.id("login")
)
);
js.executeScript(
"arguments[0].scrollIntoView({block:'center'});",
login
);
login.click();
wait.until(
ExpectedConditions.invisibilityOfElementLocated(
By.cssSelector(".loading-spinner")
)
);
WebElement dashboard =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("dashboard")
)
);
js.executeScript(
"arguments[0].style.outline='3px solid green';",
dashboard
);
System.out.println(
"Dashboard loaded successfully."
);
driver.quit();
}
}
Handling JavaScript-based applications is an important part of modern Selenium WebDriver automation. Dynamic applications frequently update their DOM, communicate with APIs asynchronously, render components after page load, and change element states during execution.
Reliable automation therefore depends on stable locators, explicit waits, correct frame and Shadow DOM handling, proper synchronization with application states, and careful handling of dynamically replaced elements. JavaScriptExecutor can be useful for specialized browser-side operations, but normal Selenium WebDriver APIs should generally be preferred for standard user interactions.
The most important principle is to synchronize the test with the application's actual state rather than simply waiting for a fixed amount of time. Once testers understand DOM changes, AJAX behavior, SPA navigation, framework re-rendering, events, overlays, and asynchronous content, Selenium automation becomes more reliable and maintainable.
To learn Selenium WebDriver, Core Java, automation frameworks, dynamic elements, waits, TestNG, Maven, debugging, and practical automation projects, explore the following resources:
// Create WebDriver
WebDriver driver =
new ChromeDriver();
// Open Application
driver.get("https://example.com");
// Create Explicit Wait
WebDriverWait wait =
new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
// Create JavaScriptExecutor
JavascriptExecutor js =
(JavascriptExecutor) driver;
// Locate Dynamic Element
WebElement element =
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.id("username")
)
);
// Normal Selenium Interaction
element.clear();
element.sendKeys("Admin");
// Click Dynamic Button
WebElement button =
wait.until(
ExpectedConditions.elementToBeClickable(
By.id("submit")
)
);
button.click();
// Scroll Element
js.executeScript(
"arguments[0].scrollIntoView({block:'center'});",
element
);
// Highlight Element
js.executeScript(
"arguments[0].style.outline='3px solid red';",
element
);
// Read Text
String text =
element.getText();
// Read Attribute
String value =
element.getAttribute("value");
// Wait for Text
wait.until(
ExpectedConditions.textToBePresentInElementLocated(
By.id("status"),
"Completed"
)
);
// Wait for Loading Indicator to Disappear
wait.until(
ExpectedConditions.invisibilityOfElementLocated(
By.cssSelector(".loading")
)
);
// Switch to iframe
driver.switchTo().frame(
driver.findElement(By.id("frame"))
);
// Return to Main Document
driver.switchTo().defaultContent();
// JavaScript Value
js.executeScript(
"arguments[0].value='Test Data';",
element
);
// Dispatch Input Event
js.executeScript(
"arguments[0].dispatchEvent(" +
"new Event('input',{bubbles:true})" +
");",
element
);
// Re-locate After DOM Change
element =
driver.findElement(
By.id("username")
);
// Close Browser
driver.quit();
