How to inspect disappearing element in a browser

Elements can be a hassle to find when writing locators for test automation but thanks to Developers tool to make our life easier. Finding the right locators means winning half the battle in the journey of automating anything. however, it can be difficult to inspect an element if it only appears when you hover over it or disappears when it loses focus. Fortunately, there is a simple trick that helps to make inspecting such elements much easier.

To try this out you can open Amazon.com

1. In the search box enter “shoes”

2. Hover on “shoes nike” and click on inspect.

You will observe the element will disappear as soon as you click inspect element. We can solve this by using below techniques:

Method 1:

• Open devTools (F12)
• Select the “Sources” tab
• While the element you want is displayed, press F8 (or Ctrl+/). This will break script execution and “freeze” the DOM exactly as it is displayed

• Now click on Inspect element and click on the element you want to identify(Here I mouse hovered on shoes Nike).

• To exit, go to sources and press F8 again.

Method 2:

• Open console and type in below and click enter

• Now click on Inspect element and click on the element you want to identify(Here I mouse hovered on shoes Nike)

• To exit, go to sources and press F8 again.