Tricky Challenges
Elements that are specifically hard to automate. Master these and you can handle anything.
Shadow DOM
Elements inside a Shadow DOM root. Standard selectors won't work — you need page.locator('div').first().shadowRoot()
Iframes
Elements inside iframes, including nested iframes. Use page.frameLocator('iframe')
Basic iframe
Nested iframe
Dynamic Content
Elements that appear after a delay. Practice using page.waitForSelector() or assertions with auto-retry.
Auto-appearing content (3 second delay)
Waiting...
Configurable delay
Alerts / Confirm / Prompt
Native browser dialogs. In Playwright, use page.on('dialog', dialog => dialog.accept())
Randomized IDs & Classes
These elements get random IDs and class names on every render. Use data-testid or text/role selectors instead.
Button A: id="0jwbwslo" class="widget-nafxf6fl"
Button B: id="xy8ry1ca" class="btn-689ozpra"
Button C: id="g9c2vdpd" class="comp-8y39j9vl"
Input Field: id="wcu7x3vp" class="el-ftdg0qis"
Hidden Elements
Elements hidden in different ways. Practice detecting visibility with expect(locator).toBeVisible() vs expect(locator).toBeHidden()
display: none
Element exists in DOM but not rendered
visibility: hidden
Element takes up space but is invisible
opacity: 0
Hidden with opacity:0
Element is transparent but still interactable
Off-screen (left: -9999px)
Hidden off-screen
Element is positioned far off the visible viewport
height: 0 with overflow: hidden
Container has no height, content clipped
Visible element (for comparison)
This element IS visible
Canvas
A drawable canvas element. Automate with page.mouse.move() and page.mouse.down()
Clipboard
Copy and paste interactions. In Playwright, grant clipboard permissions in the browser context.
Copy to clipboard
Paste from clipboard
Keyboard Navigation Trap
A focus trap that keeps Tab navigation within a container. Common in modals and dialogs.
AJAX / Fetch Content
Content loaded dynamically after a simulated API call. Practice waiting for network responses.
New Tabs & Windows
Links that open in new tabs or windows. In Playwright, use page.waitForEvent('popup')
Tip: In Playwright, listen for the popup event before triggering the action that opens the new page.
File Downloads
Trigger file downloads. In Playwright, use page.waitForEvent('download')
Tip: The first two buttons generate files dynamically. The third downloads an existing file via an anchor tag.