How to Handle Dynamic Web Elements in Selenium

In modern web applications, dynamic elements have become extremely common due to frameworks like React, Angular, and Vue. These elements often change their attributes—such as IDs, classes, or positions—every time the page loads. While this improves user experience, it creates challenges for automation testers using Selenium. If your script fails frequently because Selenium cannot locate elements, dynamic web elements are often the reason.

This guide explains what dynamic elements are, why they cause issues, and the best techniques to handle them effectively using Selenium WebDriver.

What Are Dynamic Web Elements?

Dynamic elements are UI components whose properties change during runtime. This includes:

• IDs or class names that change after each refresh

• Elements that appear based on user actions

• Elements created using AJAX or JavaScript

• Auto-generated elements like dropdown values, overlays, pop-ups, and search results

Since attributes are unpredictable, traditional locators like ID or name may not work. Therefore, testers must use smart strategies to locate these elements.

Why Dynamic Elements Cause Selenium Failures

Automation scripts may fail to find such elements due to:

1. Changing or Random IDs
   Many modern apps assign dynamic IDs like:
   id="user_12345_abc"
   On the next refresh, it becomes:
   id="user_98765_xyz"

2. Elements Not Loaded Yet
   AJAX calls or delayed rendering can cause NoSuchElementException.

3. Element State Changes
   The element may not be clickable or visible immediately.

4. Overlapping Elements or Pop-ups
   Modals may hide the element temporarily.

To solve these issues, Selenium provides multiple techniques.

✔ Effective Techniques to Handle Dynamic Web Elements in Selenium

Below are proven approaches used by QA professionals to reliably automate dynamic UI components.

1. Use XPath with Contains(), Starts-with(), and Ends-with()

When IDs or attributes change partially, XPath functions are extremely helpful.

Example: Using contains()

WebElement element = driver.findElement(By.xpath("//input[contains(@id,'user')]"));

Example: Using starts-with()

WebElement element = driver.findElement(By.xpath("//button[starts-with(@id,'submit_')]"));

Example: Using ends-with() (for Selenium 4)

WebElement element = driver.findElement(By.xpath("//*[ends-with(@class,'_active')]"));

These functions match stable portions of attributes, making scripts reliable.

2. Use CSS Selectors for Cleaner and Faster Locating

CSS selectors are faster than XPath and work well for dynamic classes or patterns.

Example: Contains

driver.findElement(By.cssSelector("input[id*='email']"));

Example: Starts-with

driver.findElement(By.cssSelector("button[id^='login']"));

Example: Ends-with

driver.findElement(By.cssSelector("div[class$='header']"));

3. Use WebDriverWait for AJAX and Dynamic Loading

Dynamic elements may take time to load. Instead of using Thread.sleep(), use WebDriverWait.

Example: Wait until element is visible

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
WebElement element = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("dynamicElement")));

Examples of useful waits

• elementToBeClickable()

• presenceOfElementLocated()

• invisibilityOfElement()

This reduces flaky failures significantly.

4. Identify Parent-Child Relationships

Sometimes the dynamic part is inside a static container.

Example

WebElement element = driver.findElement(By.xpath("//div[@class='user-section']//input[@type='text']"));

By locating a stable parent first, you can accurately locate dynamic child elements.

5. Use Indexing Carefully

When multiple elements share similar attributes, indexing may help.

Example

driver.findElement(By.xpath("(//button[contains(@class,'submit')])[2]"));

However, use this only when the page structure is stable.

6. Handle Shadow DOM Elements (Modern Web UIs)

Many modern apps use Shadow DOM, which Selenium cannot access directly.

Example

WebElement shadowRoot = driver.findElement(By.cssSelector("#shadow-host")).getShadowRoot();
WebElement button = shadowRoot.findElement(By.cssSelector("button#login"));

Shadow DOM handling is crucial for automation of Angular/React applications.

7. Use JavaScript Executor for Clicks and Inputs (Last Resort)

Sometimes elements are unclickable through Selenium due to overlays or animations.

Example

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].click();", element);

Use this method sparingly when traditional clicks fail.

8. Use Dynamic XPath Axes (Sibling, Parent, Preceding, Following)

When elements do not have reliable attributes, use relative positions.

Example

// Locate the input field based on its label
driver.findElement(By.xpath("//label[text()='Username']/following::input[1]"));

This technique is powerful for complex DOM structures.

Best Practices for Handling Dynamic Elements

• Avoid using absolute XPaths (they break easily)

• Prefer CSS selectors for faster execution

• Use explicit waits instead of implicit waits

• Automate shadow DOM elements only using supported methods

• Use Page Object Model (POM) for better maintainability

• Regularly inspect changing attributes in dev tools

Conclusion

Handling dynamic web elements is one of the biggest challenges in Selenium automation. However, with smart locator strategies—such as using XPath functions, CSS selectors, explicit waits, and shadow DOM handling—you can design test scripts that are stable, maintainable, and resistant to UI changes.

Mastering these techniques not only improves test reliability but also boosts your efficiency as a test automation engineer. As web applications continue to evolve, understanding how to automate dynamic elements is an essential skill for every QA professional.