Introduction
Modern web applications frequently create, remove, or modify web elements dynamically during execution. Elements may be generated after user interactions, loaded asynchronously, or assigned dynamically changing attributes. Because of this, using static or position-based locators can make automation scripts fragile and difficult to maintain.
Dynamic Element Identification is the practice of using flexible and maintainable locator strategies to reliably identify such elements during runtime. Techniques such as partial attribute matching, stable CSS Selectors, XPath functions, and text-based locators significantly improve automation reliability when working with dynamic web content.
In this tutorial, you’ll learn what Dynamic Element Identification is, why it is important, practical examples, real-world use cases, common mistakes, and best practices followed in professional automation frameworks.
What is Dynamic Element Identification?
Dynamic Element Identification is the process of locating web elements whose attributes, positions, or existence may change during execution.
Instead of depending upon:
Dynamic IDs
Hard-coded element indices
Deep HTML hierarchies
Position-based locators
Selenium uses stable and maintainable locator strategies to identify elements reliably.
For example, consider the following HTML:
<button>
Add Element
</button>
<button class="added-manually">
Delete
</button>
The dynamically generated Delete button can be located using:
driver.find_element(
By.CSS_SELECTOR,
"button.added-manually"
)
This approach produces cleaner and more maintainable automation scripts.
Why is Dynamic Element Identification Important?
Dynamic Element Identification helps you:
Improve automation reliability.
Handle dynamically generated elements efficiently.
Reduce framework maintenance.
Avoid brittle locator strategies.
Improve framework scalability.
Reduce automation failures caused by UI changes.
Common Strategies for Dynamic Element Identification
1. Use Stable CSS Selectors
Preferred
button.added-manually
Stable class names often provide reliable element identification.
2. Use Partial Attribute Matching
Example
contains(@class,'value')
Partial matching is particularly useful when attribute values change partially during execution.
3. Use Text-Based Locators
Example
driver.find_element(
By.XPATH,
"//button[text()='Add Element']"
)
Text-based matching provides readable and maintainable locators when visible text remains stable.
4. Avoid Hard-Coded Indices
Avoid
(//button)[3]
Position-based locators are fragile and frequently break after UI changes.
Example
The Selenium practice website dynamically creates a Delete button whenever the Add Element button is clicked. Selenium uses a stable CSS Selector to identify the newly generated element reliably.
The Selenium code is:
from selenium import webdriver
from selenium.webdriver.common.by import By
# Topic: 15. Locator Best Practices - Dynamic Element Identification
# Practice site: https://the-internet.herokuapp.com/add_remove_elements/
# Run: pytest -s 15_examples/test_02_dynamic_element_identification.py
#
# For dynamically added elements, use partial attribute matching with contains()
# rather than hard-coded indices.
def test_dynamic_element_identification():
driver = webdriver.Chrome()
try:
driver.get(
"https://the-internet.herokuapp.com/add_remove_elements/"
)
driver.find_element(
By.XPATH,
"//button[text()='Add Element']"
).click()
delete_button = driver.find_element(
By.CSS_SELECTOR,
"button.added-manually",
)
assert delete_button.is_displayed()
finally:
driver.quit()
Output
The Delete button is
created dynamically after
clicking Add Element and is
located successfully using
a stable CSS Selector.
Understanding the Code
Import the By Class
from selenium.webdriver.common.by import By
Imports Selenium’s locator strategies.
Open the Practice Website
driver.get(
"https://the-internet.herokuapp.com/add_remove_elements/"
)
Launches the Selenium practice website.
Create the Dynamic Element
driver.find_element(
By.XPATH,
"//button[text()='Add Element']"
).click()
Creates the Delete button dynamically during execution.
Locate the Delete Button
driver.find_element(
By.CSS_SELECTOR,
"button.added-manually"
)
Uses a stable CSS Selector to identify the dynamically generated Delete button.
Validate the Element
assert delete_button.is_displayed()
Verifies that Selenium successfully located the newly created element.
How Dynamic Element Identification Works
Python Script
│
▼
Perform User Action
│
▼
Dynamically Generate Element
│
▼
Choose Locator Strategy
│
▼
Stable CSS Selector
│
▼
Locate Element
│
▼
Perform Validation
Practical Example
Suppose you’re automating an E-Commerce website.
Clicking the Add to Cart button dynamically generates a Checkout button. Instead of locating the Checkout button using its position on the webpage, Selenium uses a stable CSS Selector or partial attribute matching to identify it reliably.
This significantly improves framework maintainability across multiple releases.
Automation Testing Example
Consider an online banking application.
After successful authentication, the application dynamically generates account summaries, transaction buttons, and navigation menus. Professional automation frameworks use:
CSS Selectors
XPath Functions
Partial attribute matching
Text-based locators
to reliably identify dynamically generated elements during regression testing.
Real-World Example
Automation engineers frequently use Dynamic Element Identification techniques while working with:
Banking applications.
E-Commerce websites.
Healthcare portals.
CRM systems.
ERP applications.
SaaS products.
Enterprise web applications.
Dynamic dashboards.
Single Page Applications (SPAs).
These techniques significantly improve automation reliability across modern JavaScript-based applications.
Advantages of Dynamic Element Identification
Improves automation reliability.
Reduces framework maintenance.
Produces maintainable locator strategies.
Handles dynamically generated elements efficiently.
Improves framework scalability.
Reduces automation failures caused by UI changes.
Common Mistakes Beginners Make
Using Hard-Coded Indices
Avoid
(//button)[2]
Prefer
button.added-manually
Stable locators are significantly easier to maintain.
Depending Upon Dynamic IDs
Avoid using dynamically generated IDs whenever stable alternatives are available.
Writing Overly Complex Locators
Keep CSS Selectors and XPath expressions simple, readable, and maintainable whenever possible.
Best Practices
Prefer stable and unique attributes whenever possible.
Avoid hard-coded indices.
Use CSS Selectors for stable elements.
Use XPath functions when partial matching is required.
Verify locators using browser Developer Tools.
Keep locator expressions short and maintainable.
Use appropriate synchronization techniques when working with dynamically generated elements.
Conclusion
Dynamic Element Identification is an essential skill for Selenium automation engineers working with modern web applications. Choosing stable and maintainable locator strategies significantly improves framework reliability while reducing long-term maintenance effort.
Professional automation frameworks prioritize simplicity, readability, and stability when identifying dynamic elements. By following these best practices, you can build scalable automation solutions that remain reliable even as applications evolve over time.
Frequently Asked Questions (FAQs)
What is Dynamic Element Identification?
Dynamic Element Identification is the process of locating web elements whose attributes, positions, or existence change during execution.
Why is it important in Selenium automation?
It significantly improves automation reliability when working with modern and dynamic web applications.
Which locator strategies are commonly used?
Professional automation frameworks commonly use:
CSS Selectors
XPath Functions
Partial attribute matching
Text-based locators
Relative Locators (when necessary)
Should I use hard-coded indices?
No.
Hard-coded indices are fragile and frequently break after minor UI changes.
Are Dynamic Element Identification techniques useful for modern web applications?
Yes.
They are extensively used while automating Single Page Applications (SPAs), dynamic dashboards, and JavaScript-based web applications.
Key Takeaways
Dynamic Element Identification improves automation reliability and framework maintainability.
Prefer stable CSS Selectors and XPath expressions whenever possible.
Avoid hard-coded indices and dynamically changing attributes.
Use partial attribute matching when appropriate.
Keep locator strategies simple, readable, and reusable.
Professional automation frameworks rely heavily upon Dynamic Element Identification techniques when working with modern web applications.