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.