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[contains(text(), "Products")]

Above is an xpath from this page. In previous versions of Chrome in "DevTools"/"Elements" after pressing CTRL+F to open the "Find" option and pasting this xpath element is highlighted in DevTools window. In new version of chrome it is not highlighted, the usual "1/1" results is displayed in far right of the "Find" tab.

I've search the internet and Chrome Settings but to no avail.The yellow highlight is time saver and I know for certain that I am using the right element.

Edit: Fixed with Chrome version 84.0.4147.105

Thank you for updates, suggestions, workarounds etc.

Answer 1

Yes, In recent updates of Chrome 84, Find feature is buggy. 3 issues have been reported and those are in unconfirmed status as of now (while writing this answer). You can follow them on below links for more details -

1. An element in the elements tab is not highlighted if it is only one in the DOM

2. "Find" feature not working on "Elements" tab

3. Finding element/xpath wont direct to the object

---

Update

Elements search does not resolveNode (highlight text, etc) on first search result

Has been fixed and it is part of Version 84.0.4147.105 (Official Build) (64-bit). You just need to update and relaunch the chrome. The issues mentioned above are marked as duplicate to this issue.

Answer 2

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?

Answer 3

Also as a workaround you can try using chro path extension, where you can paste your written xpath in search box and see element getting highlighted in browser.

Additionally you will be able to get automatic locators formed by chropath itself