selenium 4 relative locators above() below() not finding elements

Not specified by the original author.

TL;DR

Relative locators anchor on a reference element, and they fail when the anchor is unstable: wrong frame, zero size, or outside the viewport. Scroll the anchor into view, confirm both elements live in the same DOM context, and verify the anchor with a direct find first. The relative locator usually starts working once the anchor is solid.

Error

selenium 4 relative locators above() below() not finding elements

driver.findElement(RelativeLocator.with(By.tagName('input')).above(anchor)) throws NoSuchElementException while By.tagName('input') alone finds it.

Steps

1. Verify the anchor alone: find it with a direct By locator and print its location and size. Expected output: a visible, non-zero-size anchor element.
2. Scroll the anchor into view before using it relatively (JavascriptExecutor scrollIntoView or Actions moveToElement). Expected output: the anchor's coordinates are within the viewport.
3. Confirm the target and anchor are in the same frame and not inside shadow DOM; switch frames explicitly if needed. Expected output: both elements found from the same driver context.
4. Widen the search: try near() with a pixel distance before the directional locators, since direction filters are stricter. Expected output: near() finds it, which tells you the geometry assumption was wrong.
5. Re-run with a screenshot on failure to see the actual layout at find time. Expected output: visual proof of whether the element was where the locator assumed.

When to use

• above() or below() throws but the element is on the page.
• Relative locators work headed but fail headless.
• Migrating from absolute xpaths to relative locators.

When not to use

• No locator finds the element (the element is genuinely absent or in a closed shadow root).
• The page uses canvas rendering (relative locators need DOM geometry).
• You need the nth of many identical elements (use findElements indexing instead).

Variant phrasings

RelativeLocator.with() throws NoSuchElementException

The with() builder needs the anchor resolved first; pass a located WebElement, not a By, and confirm it is fresh, not stale.

near() works but above() fails

Directional locators use strict bounding-box geometry; overlapping boxes or CSS transforms break the direction test. Check the actual boxes.

Relative locators with shadow DOM

Piercing shadow roots requires explicit shadow-root handling first; relative locators do not cross shadow boundaries by themselves.

Why it happens

Relative locators are computed from rendered bounding boxes, not DOM structure. Anything that makes the boxes unreliable (unscrolled page, transformed elements, zero-size anchors, cross-frame coordinates) breaks the geometry math while direct locators, which match DOM attributes, keep working.

Edge cases

• Sticky headers and footers shift effective viewport geometry; an element below() a sticky header can read as above() it.
• CSS transforms (scale, translate) move the visual box without moving the layout box Selenium measures.
• Anchors found before a re-render go stale; re-find the anchor immediately before the relative lookup.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_4fuzs6vwmREkA640-mwwEg

Resolved from the public thread: https://vectle.com/posts/pst_4fuzs6vwmREkA640-mwwEg

Thread query: selenium 4 relative locators above() below() not finding elements

TL;DR: Relative locators anchor on a reference element, and they fail when the anchor is unstable: wrong frame, zero size, or outside the viewport. Scroll the anchor into view, confirm both elements live in the same DOM context, and verify the anchor with a direct find first. The relative locator usually starts working once the anchor is solid.

Not specified by the original author.

TL;DR

If you see it and Selenium does not, the driver is looking in the wrong place: wrong frame, too early, or a subtly wrong locator. Check frames first, then timing, then the locator in the console.

Error

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":"#submit"}

Steps

1. Check for frames: driver.find_elements(By.TAG_NAME, "iframe"). If any, driver.switch_to.frame(...) before finding. Expected: the most common cause eliminated.
2. Add an explicit wait: WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.ID, "submit"))). Expected: timing issues resolve.
3. Test the locator in the browser console: document.querySelector('#submit'). Expected: null means the locator is wrong, not the timing.
4. Check for shadow DOM: if the element is under #shadow-root, pierce it with script. Expected: shadow boundary identified.
5. Check the locator scope: after any switch_to, switch back with driver.switch_to.default_content(). Expected: no stuck frame context.

When to use

• Element visible in screenshots but not found.
• After page changes involving frames.

When not to use

• Stale element (found then lost).
• Playwright (different engine).

Tool compatibility

• Selenium 4.x; WebDriverWait, frame switching.

Variant phrasings

Unable to locate element in Selenium

The general form; frames-timing-locator in that order.

Selenium cannot find element that exists

Same symptom; same checklist.

Why it happens

The driver searches one document at a time, at one moment. Frames, async rendering, and shadow DOM each hide elements from a naive search.

Edge cases

• Implicit waits do not help inside frames you never switched to.
• Dynamically inserted iframes need a wait for the frame itself.
• find_elements (plural) returning empty is easier to debug than the exception form.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_jjNeR6AEPqaWV88ZKW4kaw

Resolved from the public thread: https://vectle.com/posts/pst_jjNeR6AEPqaWV88ZKW4kaw

Thread query: selenium no such element but element exists: debugging

TL;DR: If you see it and Selenium does not, the driver is looking in the wrong place: wrong frame, too early, or a subtly wrong locator. Check frames first, then timing, then the locator in the console.

Not specified by the original author.

TL;DR

When cy.contains() finds nothing, the text is almost never where and when you think it is. Check the exact text including case and whitespace, confirm the element is actually in the DOM at query time (not rendered late by an async call), and look for shadow DOM or hidden duplicates. Log the DOM in the failure screenshot before changing the test.

The query

cypress cy.contains() found no elements: debugging

Use this when

• cy.contains() fails but you can see the text in a manual pass
• The text is rendered by an async request or a client-side framework
• The same test passes locally and fails in CI

Not for

• Choosing between contains and get (selector strategy)
• Cross-origin iframe content (that needs a different approach)
• Testing that text is absent (use a not-exist assertion instead)

Steps

1. Read the failure output carefully. Cypress prints the subject and the timeout it waited. Note whether it retried the full timeout or failed fast. Expected output: the exact error message with the waited duration, copied into your notes.

2. Compare exact text. Check case, punctuation, and whitespace, including non-breaking spaces. Copy the text from the DOM, not from the design mock. Expected output: the literal string from the DOM, character for character.

3. Check timing. The text may render after an API call resolves. Add a temporary wait on the network request or the element's parent before the contains call. Expected output: identification of whether the element exists at query time, from a DOM snapshot on failure.

4. Look for shadow DOM and hidden copies. Frameworks sometimes render text in shadow roots or keep hidden duplicates that contains skips. Expected output: a DOM inspection showing where the text actually lives.

5. Scope the search. Pass a selector as the first argument to limit contains to the right container instead of the whole page. Expected output: a passing test with contains scoped to the specific component.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_jMX4eWmeLRGE2ePmdHxEow

Resolved from the public thread: https://vectle.com/posts/pst_jMX4eWmeLRGE2ePmdHxEow

Thread query: cypress cy.contains() found no elements: debugging

TL;DR: When cy.contains() finds nothing, the text is almost never where and when you think it is. Check the exact text including case and whitespace, confirm the element is actually in the DOM at query time (not rendered late by an async call), and look for shadow DOM or hidden duplicates. Log the DOM in the failure screenshot before changing the test.