Dynamic elements are web elements which are dynamically generated during runtime . Dynamic identifiers can be for any web elements of the web page but normally used for buttons , text fields etc.
e.g.
<button id=”Submit-901″/>
<button id=”Submit-902″/>
<button id= “Submit-903″/>
Handling dynamic ekements in Selenium involves using flexible locators and synchronization strategies to manage web elements that change attributes.
- Use Dynamic Locators :
When attributes like class or id change on every page load , avoid hardcoded values . Instead of that use partial matching functions in XPath or CSS .
- XPath Functions :
- contains() : In some scenario where the dynamic element is surrounded by static value, one can use contains() function .
For e.g., One have following element locator ,
<input class = “New-userfield-901″/>
<input class=”Old-userfield-902″/>
Here, userfield part of the element is static ,So one can apply contains function to access this element locator as follows :
Xpath : //input[contains(@class,’userfield’)] ;
2. starts-with () : If the dynamic element starts with a definite pattern, then one can use starts-with() function.
For e.g.,
<button id=”Submit-901″>
<button id= “Submit-902”>
<button id=”Submit-903″>
Here, one can use starts-with() function to access the element as follows :
Xpath: //button[starts-with(@id, ‘Submit’)];
3. text() : This function locates elements by their visible text , which often are more stable than technical attributes.
//a[text()=’Login’].
- CSS Selector Pattern Matching :
- ^= : It indicates attribute starts with a value .
input[id^=’user_’].
2. *=: Attribute contains a value.
button[class * =btn_logout’].
3. $=: Attribute ends with a value .
input[id$=’_login’].
- XPath Axes (Relational Locators ) : If element has no unique attributes, locate it relative to a stable nearby element using axes like following-sibling , preceding-sibling , parent or ancestor .
Example :
//label[text()=’gmail’]/following-sibling:: input.
2. Synchronization with Explicit Waits :
Dynamic elements often load asynchronously via AJAX or JavaScript. To wait for specific conditions use Explicit Waits instead of fixed Thread.sleep()
- WebDriver Wait : WebDriverWait is a class used to implement Explicit Waits . It allows automation script to pause until a specific condition is met.
Unlike implicit waits which is applied globally to all elements, WebDriverWait is used for individual elements and specific states.
WebDriverWait polls the DOM until a condition is met( e.g. , elementToBeClickable() or visibilityOfElementLocated()
- Fluent Wait : Fluent Wait is highly flexible synchronization mechanism in Selenium WebDriver which is used to handle dynamic web elements that load at unpredictable intervals.
This fluent wait allows you to define exactly how long to wait, how often to check for the element , and which specific exceptions to ignore during that period.
3. Handling Specific Dynamic Scenarios :
- Stale Element Reference : If the DOM refreshes after you have found an element , your reference becomes “stale ” . Handle this by catching the StaleElementReferenceException and re-locating the element before trying again.
- Multiple Similar Elements : Use findElements () to retrieve a list and access the desired one by its index .
- iFrames and Windows : For elements inside dynamic pop-ups or frames , one must use driver.switchTo().window() or driver.switchTo().frame() before locating them.
- JavaScript Executor : Use JavaScript to interact elements that Selenium standard methods cannot reach.