Stop 07 · Web Automation TestingTopics · 9/10

Handling Dynamic Web Elements

In short

Some pages change every time you load them: random ids, lists that reorder, content that appears late. Tests that rely on position or random ids break daily.

Automating pages where element IDs or structure change between loads, content loads asynchronously, or elements appear/disappear dynamically — requires more robust locator and waiting strategies than static pages.

The purple blob waves at a friend in a bright orange cap in a busy moving crowd.

Think of it like this

Spotting your friend at a mela

In a moving crowd, 'the fifth person from the left' changes every second. 'The one in the bright orange cap' still works. For dynamic pages, find elements by something that doesn't move: a test id, a label or stable text.

Watch it happen

Same button, three page loads

btn-8f2a

btn-c71d

btn-03e9

1/4These are the Save button's ids on three reloads. The framework generates a new one each time.

The big ideas

What you need to know

Ask for test ids

Request a data-testid attribute from developers. It's a tiny change that saves hours.

Match stable parts

Use contains() or starts-with() on the part of an attribute that never changes.

Find rows by content

In changing tables, find the row containing 'Order 1042', then the cell inside it.

Wait for change

When content reloads, wait for the new state instead of grabbing the old element.

See it in code

Walk through the code

python

1from selenium.webdriver.common.by import By2from selenium.webdriver.support.ui import WebDriverWait3from selenium.webdriver.support import expected_conditions as EC4 5# Bad: id changes on every load6# driver.find_element(By.ID, "btn-8f2a")7 8# Better: a stable attribute added for testing9save = (By.CSS_SELECTOR, "[data-testid='save-button']")10 11# Or: find a table row by text that doesn't change12row = (By.XPATH, "//tr[td[normalize-space()='Order 1042']]")13 14wait = WebDriverWait(driver, 10)15wait.until(EC.element_to_be_clickable(save)).click()16print(wait.until(EC.visibility_of_element_located(row)).text)

1/4Generated ids look stable in DevTools, but they change on the next load.

Stable locators plus explicit waits. Assumes driver is already open on the page.

Save yourself the pain

Common mistakes

Oops

Locating 'the third row' in a table that sorts by date.

Do this instead

Find the row by its content, like an order number, not by its position.

Oops

Storing an element, letting the page re-render, then clicking the stored one.

Do this instead

The old element is stale. Find it again after the page updates.

Your mission

Beat a changing page

~30 min

Quick check

A button's id is different on every page load. What's the best locator strategy?

Go deeper

1Practice automating interaction with a page that has dynamically loading content.
2Learn to use relative or attribute-based locators when IDs change between page loads.
3Understand why dynamic content is one of the most common real-world automation challenges.