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

问题

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.

回答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.

回答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?

回答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

回答4:

I had to uninstall chrome v84 and install v83 from a random source because I literally cannot do my work properly if I cannot identify unique selectors for elements.

Steps:

1. Uninstall chrome v84
2. Find a source for chrome v83 and install it
3. Go to C:\Program Files (x86)\Google and rename the folder Update to something like Update.old so chrome cannot update automatically

I really wish Google would stop trying to imitate Microsoft forcing updates on its users. At the very least they should give us a clear way to disable automatic updates if we know the risks.

回答5:

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

回答6:

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.

回答7:

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.

来源：https://stackoverflow.com/questions/62960908/chrome-84-inspect-element-find-results-not-highlighted-in-yellow-like-before