Locating a Web Element that disappears after Inspect

Two methods for inspecting disappearing dynamic elements

Dynamic elements are generated on the fly on a web page. This means they often do not exist in the static page source. This is a challenge for web test automation.

The only practical way (I am aware of) is to get it by Inspecting the dynamic element directly. However, some web elements disappear after you select the ‘Inspect’ menu item (via right-click), as their focus has been lost or the element has disappeared.

In this article, I will walkthrough two simple workarounds to inspect a dynamic web element. In both, we want to effectively “freeze” the page to prevent any changes.

1. Pause on element changes
   Open Developer Tools in Chrome and select the Elements tab, right-click the parent node of the element you want to inspect, and in the contextual menu select Break on > Subtree modifications.

If any part of this element (or its children) changes, the browser will pause the page and allow you to explore. You can think of this method as setting a conditional breakpoint.

This is not my preferred option, as it is slow (requires a set of steps) and requires some knowledge of the parent element.

2. Enter the browser’s debugger mode
One simple workaround (more like a hack, but it works) is, typing the below in the browser console:

setTimeout(() => { debugger; }, 5000)

This gives you 5 seconds to navigate the app to the element before the debugger starts.

When the debugger is on, the page elements “freeze”. We can then inspect any of the elements on the page with ease. Below is a video with the debugger for the previous ‘disappeared’ element.

You can see that the “Paused in debugger” message froze the page. This allowed us to inspect the autocomplete drop-down without it disappearing. This way, it is easier to come up with a better locator expression to create a more reliable test step.

Note that in this mode, you won’t be able to interact with any elements on the page anymore (click, send keys, etc). It is purely exploring the frozen page. To exit debugger mode, press the F8 key (or the blue Resume button at the top of the page).