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?

Answer 2

Another option is to go to console section and evaluate your xpath like this $x("yourXpath") and hit enter. In the case of google search button woulb be like this: $x("//*[@name='q']") then you hit enter and expand the structure that appears below and if you hover with the mouse, the element is going to be highlighted.

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

Answer 4

I have also faced a similar issue where first matched xpath is not visible in chrome ( mac os mojave).

As a workaround, I am using the chrome console for exactly locating the xpath element.

Steps :

1. Open developer tools
2. Click on Console tab
3. type command as : $x("xpath") and press enter.

Find the below image link for reference.

dev console

Answer 5

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 6

I had started using firefox! It is being fixed by chromium - https://bugs.chromium.org/p/chromium/issues/detail?id=1103316.

Should be out soon.