Click object by using text of kid as reference but clicking on parent

Product Forums Katalon Studio
,
1

Hiya,

I need some help regarding an XPath and how to create the one I need for my test case.
This is the HTML

<li class="node depth0 active" id="filtertree_10651" data-open="false" data-json='{"max_depth":"2","bin_id":"5","id":"10651","leftv":"7505","rightv":"7510","depth":"1","name":"Preview 20.4 07-20 (geen vragen)","class":"","items":"0"}' data-node_id="10651"><div class="label" style="padding-left: 16px;"><span class="opencloseicon font-icon fas fa-caret-right" style="left: 0px; visibility: visible;" data-loader="kc07p3wv" data-loader-disabler="14334" data-load_count="0"></span><span class="name">Preview 20.4 07-20 (geen vragen)</span></div></li>

Screenshot: image

What I want is the following. I need Katalon to click on
<span class="opencloseicon font-icon fas fa-caret-right" style="left: 0px; visibility: visible;" data-loader="kc07p3wv" data-loader-disabler="14334" data-load_count="0"></span>
That is the arrow of the bottom Preview (I want to open it).

However, on the web page I will have multiple arrows (at the moment 2, but later will be more).
The arrows have the same elements apart from the data-loader-disabler. This one is different per “preview” however, for me it is not known what number will be generated when I create a new “preview”. So I can’t use it as reference.

So I have thinking. Can I make an object that looks at
</span><span class="name">Preview 20.4 07-20 (geen vragen)</span>

Specifically the text and then let it click on the parent above it
<span class="opencloseicon font-icon fas fa-caret-right" style="left: 0px; visibility: visible;" data-loader="kc07p3wv" data-loader-disabler="14334" data-load_count="0"></span>

I’m not that great in HTML and XPaths myself. I’ve tried it a bit by googling around but I get more quastions than answers when I try lol.

Thanks in advance. :slight_smile:

2

Shouldn’t be too hard. Give this one a try:

//span[contains(@class, 'opencloseicon') and ./following-sibling::span[@class='name' and text()='Preview 20.4 07-20 (geen vragen)']]

Since you said you are not too great at xpath yet, let’s break that down for learning purposes, as xpath is a very powerful tool if you learn to master it:

1.) //span[contains(@class, ‘opencloseicon’) <- this identifies all arrow elements
2.) and ./following-sibling::span <- this is to filter only the arrow elements that have a <span> sibling. The “::” syntax is called an axis. These are extremely useful, you should review them here: https://www.w3schools.com/xml/xpath_axes.asp.
3.) [@class=‘name’ and text()=‘Preview 20.4 07-20 (geen vragen)’]] <- this is to filter only the sibling <span> elements which have a class = name and finally the text you are expecting.

Let me know if that does/doesn’t make sense, I’d be happy to discuss.

3

Thank you for your reply.
I tested it and it works :slight_smile:

Thanks for explaining it as well. I think I understand the logic on how it works. I will keep this in mind when trying to do these things in the future.

1 Like