Elements hunter: Freeze the DOM!

A few days ago, I was building up a test automation framework with cypress as a practice project. I decided to take Netflix desktop version to develop the tests. And something that itched me for some time was its search bar. If you have a Netflix account, you can notice  its search bar only displays after you click on the search button, thereby making it a temporary element. Once you click away (even on the developer tools panel), that element disappears. 

The search bar is one of Netflix core functionalities, so as an Automation Engineer I couldn’t just skip it even if it was in a practice project. After some investigation I found out that the solution was not to be quick enough to have a glance at the target element before it disappeared. 

It was rather to freeze it! If you’ve toyed with automation projects you have  most likely wished you could just freeze the page under test to inspect it calmly. Here is how – I will illustrate the case with Netflix search bar

Three simple steps to hunt your target element

1. Find the element which you suspect contains the target element

In my case, this was Netflix search button that you can find in the navigation bar at the top of the main page. This is a non-disappearing element, so it should be easy to spot. 

2. Trigger the event that makes your target element appear

Now, you just have to make that slippery element appear! With Netflix this is done by just clicking on the search button located before. 

As you can see here, we got a div which class is “searchBox”. At first glance it looks like we made it, but if you are automating tests, chances are you will want to take action on that search bar (typing in this case). As a rule of thumb we shall not take actions on div elements if possible – it is an input tag what we’re looking for.

The input tag is within the highlighted div but as soon as we click on it to see its structure the search bar will disappear and there will be nothing to spy on. How do we avoid this? Keep reading. 

3. Freeze your target

Now, instead of unfolding the div structure right away, we will right click on it and select Break on -> subtree modifications.

This will freeze the JavaScript logic that makes your target element disappear. The reason my desired search bar element will not go away is that we just used a front end developer debugging tool and placed a break point just before the logic that removes the element can be triggered by a click event. 

The result is that now you can click on the div and see its content. In the case of Chrome dev tools, it takes you to the Sources tab after you click on the containing element, just go back to the Elements, unfold the containing element and there it is, your target frozen for you to contemplate for as long as you wish. 

There you have it! Now I can use this information to make a locator that will make my tests shine! Next time it will save myself some time before I start chasing slippery elements with the mouse. I hope you found this technique useful too. Happy hunting!

Comments are closed.