UI ELEMENTS
Dynamic Elements
The elements that make locators flaky in real apps: a dynamic ID, content inside an iframe, a shadow DOM component, and an overlay that blocks clicks.
How to use this page
Goal: Locate and interact with each element without relying on a hardcoded ID.
Challenge: The button's ID changes on every render, the second panel lives inside an iframe, the third inside a shadow root, and the last one is briefly covered by an invisible overlay.
Dynamic ID Button
This button's id attribute changes every time the page re-renders. Locate it by role or text instead.
Current id: ...
Iframe Content
A form field rendered inside an iframe. Your test needs to switch context to interact with it.
Shadow DOM Element
A button rendered inside a shadow root, not directly queryable with a regular CSS selector from the light DOM.
Clicks: 0
Click-blocking Overlay
An invisible overlay covers this button for a couple of seconds after the page loads, then disappears. Clicking too early will fail.
Successful clicks: 0
Need expert QA help? We offer team training, automation consulting, and end-to-end QA services.
Need this tested professionally?
Chasing flaky selectors on a production product? AssertQA delivers test automation services, manual testing services, and API testing services for teams that need real-world quality.
Talk to our QA team