CODEWITHSUNDEEP
seleniumxpath
Fractal
Fractal

Reputation: 1917

Selenium XPath find element where second text child element contains certain text (use contains on array item)

The page contains a multi-select dropdown (similar to the one below)

multi select dropdown

The html code looks like the below:

<div class="button-and-dropdown-div>
<button class="Multi-Select-Button">multi-select button</button>
<div class="dropdown-containing-options>
    <label class="dropdown-item">
        <input class="checkbox">
        "  
                   Name
              "
    </label>
    <label class="dropdown-item">
        <input class="checkbox">
        "  
                   Address
              "
    </label>
</div>

After testing in firefox developer tools, I was finally able to figure out the xPath needed in order to get the text for a certain label ...

The below XPath statement will return the the text "Phone"

$x("(//label[@class='dropdown-item'])[4]/text()[2]")

The label contains multiple text items (although it looks like there is just one text object when looking at the UI) in the label element. There are actually two text elements within each label element. The first is always empty, the second contains the actual text (as shown in the below image when observing the element through the Firefox developer tool's console window):

enter image description here

Question:

How do I modify the XPath shown above in order to use in Selenium's FindElement?

Driver.FindElement(By.XPath("?"));

I know how to use the contains tool, but apparently not with more complex XPath statements. I was pretty sure one of the below would work but they did not (develop tool complain of a syntax error):

$x("(//label[@class='dropdown-item' and text()[2][contains(., 'Name')]]")
$x("(//label[@class='dropdown-item' and contains(text()[2], 'Name')]")

I am using the 'contains' in order to avoid white-space conflicts.

Additional for learning purposes (good for XPath debugging):

just in case anyone comes across this who is new to XPath, I wanted to show what the data structure of these label objects looked like. You can explore the data structure of objects within your webpage by using the Firefox Console window within the developer tools (F12). As you can see, the label element contains three sub-items; text which is empty, then the inpput checkbox, then some more text which has the actual text in it (not ideal). In the picture below, you can see the part of the webpage that corresponds to the label data structure.

enter image description here

Upvotes: 0

Views: 1516

Answers (2)

JeffC
JeffC

Reputation: 25644

If you are looking to find the element that contains "Name" given the HTML above, you can use

//label[@class='dropdown-item'][contains(.,'Name')]

Upvotes: 1

Fractal
Fractal

Reputation: 1917

So finally got it to work. The Firefox developer environment was correct when it stated there was a syntax problem with the XPath strings.

The following XPath string finally returned the desired result:

$x("//label[@class='dropdown-item' and contains(text()[2], 'Name')]")

Upvotes: 0

Related Questions