23

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.

DespotAuto
  • 239
  • 1
  • 2
  • 5
  • 6
    It's a bug that was already fixed so the next update of Chrome will have the fix. Meanwhile you can add `|*` to the search text and press `Enter` (or the prev/next buttons). – wOxxOm Jul 18 '20 at 04:25
  • 2
    @DespotAuto Editing your question and adding the answer into it, is not the way stackoverflow works. The answers posted to this question by community members has some research and effort behind it. You can accept the answer by clicking on hollow tick beside every answer. Accepting answer is a way of appreciating and directing the fellow community members to the right answer. Also read [What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers) and [What does it mean when an answer is "accepted"?](https://stackoverflow.com/help/accepted-answer) – Dev Aug 01 '20 at 06:56

7 Answers7

22

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.

Dev
  • 2,739
  • 2
  • 21
  • 34
5

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 :

[name='q']

or using the :

//*[@name='q']

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

devtools_issue

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:

Alternate Solution

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

undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
4

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

user8661258
  • 49
  • 2
0

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

Rupa
  • 11
  • 1
0

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.

Franco Rebuffi
  • 11
0

I had the same issue, but the thing is ..... you should after you position your cursor to a particular text or control or button(etc) that you wish to inspect, then right click and choose Inspect element, then in the area where you see the code...I mean in Element tab of the opened DevTools, keeping your cursor on the text of the code at any place, then click Ctrl+F and it will open a search field and then you type an absolute or relative xpath of your element that you would like to find and when the path is correct, your text will be highlighted with yellow. Surprisingly, if I just move my cursor out of element tab and still do Ctrl+F, the search field will open, but the element is not highlighted in yellow as before

OLGA VOYLOSHNIKOVA
  • 1
-1

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.

Amita
  • 17
  • 3