查找具有特定类名的元素

Question

for chrome, I install ChroPath to find elements on the page.

I want to find XPath for like elements on Instagram Page, but seems that not work :

//span[contains(@class,'glyphsSpriteHeart__outline__24__grey_9 u-__7')] 

also, I try it :

/html[1]/body[1]/div[3]/div[1]/div[2]/div[1]/article[1]/div[2]/section[1]/span[1]/button[1]/span[1]

when selenium click :

elenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":"div._2dDPU.vCf6V div.zZYga div.PdwC2._6oveC article.M9sTE.L_LMM.JyscU div.eo2As section.ltpMr.Slqrh span.fr66n button.coreSpriteHeartOpen.oF4XW.dCJp8 > span.glyphsSpriteHeart__outline__24__grey_9.u-__7"}

how can I find XPath? any good extension or something?

Answer 1

This might help: https://selectorgadget.com/

This as well, to understand what you are manipulating: https://www.w3schools.com/xml/xpath_syntax.asp

As for your example where you go down the tree using index numbers (ie: /html[1]/body[1]), A slight change in the site will make your script to fail. Find a way to build something more robust! Also have a look at CSS selectors if you object's appearance is known in advance.

Answer 2

To get all like buttons on instagram use css selector below:

span[aria-label="Like"]

You can get some helpful details here: https://www.w3schools.com/cssref/css_selectors.asp

Answer 3

how can I find XPath? any good extension or something?

You cannot "find" the Xpath of an element. There are many, many XPath's that will find any element. Some will be stable, others will be unstable. The decision on which Xpath to use is based upon your understanding and experience of Selenium, and you understanding of how the Application Under Test is written and behaves.

If you are looking for a tool to experiment with different XPaths, then Chrome's built-in Developer Tools Console allows you to test both Xpath & CSS Selectors;

In your specific scenario about finding elements by class name, then CSS Selector is a much better choice than XPath as CSS selectors will treat multiple classes as an array where as XPath sees "class" as a literal string, hence why you needed to use "contains".