Locate specific text inside an element XPATH C# SELENIUM

Question

I am trying to locate specific text inside some elements on a HTML page.

<a class="ProductCard-link ProductCard-content" target="_self" tabindex="0" href="/en/product/puma-future-rider-menshoes/314207160004.html">
  <span class="ProductName">
    <span class="ProductName-primary">
      Puma Future Rider
    </span>
    <span class="ProductName-alt">
      Men Shoes
        <span class="ProductName-separator">•</span>
      Black-White-Red
    </span>
  </span>
</a>

I am trying to locate this text inside the elements: "Black-White-Red" I can locate the name of the shoe with this XPath: //[@id='main']/div/div[2]/div/section/div/div[2]/ul[1]/li/div/a/span[1]/span[@class='ProductName-primary'][contains(text(), 'Puma Future Rider')]

However I just cant seem to find any valid XPath to locate the color of the shoe, I've tried this one:

//*[@id='main']/div/div[2]/div/section/div/div[2]/ul[1]/li/div/a/span[1]/span[@class='ProductName-alt'][contains(text(), 'Black-White-Red')]

Which I expected to work, it does NOT. It is weird because I can find the "Men Shoes" text, but not the color which is in the same tag:

//*[@id='main']/div/div[2]/div/section/div/div[2]/ul[1]/li/div/a/span[1]/span[@class='ProductName-alt'][contains(text(), 'Men Shoes')]

Thank you all in advance, hope you can help me solve this! :)

Apart from solving your problem, those selectors are way too long try to find a shorter version, this is hard to read and easy to break with a change to the DOM. — pavelsaman, Jan 17 '21 at 17:54
Appreciate that mate, I will definitely make it shorter. However I still need to locate the color, short or long xpath :S — Doctuh, Jan 17 '21 at 18:00

score 0 · Answer 1 · edited Jan 29 '21 at 00:29

0

Try this :

//*@id='main']/div/div[2]/div/section/div/div[2]/ul[1]/li/div/a/span[1]/span[@class='ProductName-alt'][contains(text()[2], 'Black-White-Red')]

It should work.

Since these are multiple texts in the same attribute, you need to provide the index.

edited Jan 29 '21 at 00:29

GAP2002

870
4
20

answered Jan 17 '21 at 18:01

Kumar Rishabh

292
1
9

PDHide · Answer 2 · 2021-01-17T22:52:35.813

the color and classification both are in the

so if you find this and prints it then you will get:

Men Shoes • Black-White-Red

But as there is an element in between the text , it will be retrieved as two text nodes for the text() xpath method.

You can verifies this by opening console in chrome devtool and

$x("//*[contains(text(), 'Men Shoes')]/text()") //this will print an array with two text node

$x("//*[contains(text(), 'Men Shoes')]/text()")[1].textContent // you can print content like this;

So you can do as the below answer mentions, get the second text and compare it

 //*[contains(text()[2], 'Black-White-Red')]

you can also use:

//*[text()[contains(.,"Black")]]

Here text() check first text node and returns the all texts inside that , and '.' will return everything means both the array element and verifies any of the text node as black in it.

https://stackoverflow.com/a/56971704/6793637

Locate specific text inside an element XPATH C# SELENIUM

2 Answers2