Chrome 84 Inspect element, find results not highlighted in yellow like before

Question

As per usual when making automated tests I use "Inspect"(CTRL+SHIFT+I) in Chrome to find element by xpath, id, CSS selector etc. For example:

//li/a         


        

Answer 1

The major issue is with DevTools within Google Chrome 84.0 which doesn't highlights the first matched element.

Incase, the locator finds a single match, the search result does show 1 of 1 but the WebElement is not highlighted within the DOM Tree

As an example, the Search Box within the Google Home Page can be identified uniquely using the css-selector:

[name='q']

or using the xpath:

//*[@name='q']

But google-chrome-devtools within Google Chrome 84.0, does finds the element and shows 1 of 1 but the element is not highlighted.

However, if there are multiple element matching to the Locator Strategy, leaving out the first matched element, the other elements are highlighted.

---

Bug in Chrome 84

This issue was raised in the Platform>DevTools queue through Issue 1108311: The first matched element in the Elements panel is not getting highlighted as per the cssSelector and had been merged into Issue 1103316: Elements search does not resolveNode (highlight text, etc) on first search result where we are actively tracking the issue.

---

Solution

As per @bugdroid the main issue was caused because a check to ensure the search results were valid did not account for the case where the index was 0, so all highlight results of index 0 (index 1 to the user) were no longer highlighted.

The fix for this issue is Merge-Approved in:

• Chrome version 84.0 later then Version 84.0.4147.89.
• Chrome version 85.0.
• Chrome Canary version 86.0.4201.0.

---

Alternate Solution

For alternate solutions using the current google-chrome Version 84.0.4147.89 you can find a detailed discussion in Why XPath does not highlighted the yellow mark in Chrome84?