xpath - pick based on another child of parent node - xpath

I have page that looks something like this:
<div>
<div>
<div>
<span class="span class one">
some text
</span>
</div>
</div>
<div>
<div>
<span class="span class two">
span i want to pick
</span>
</div>
</div>
</div>
I want to pick <span class="span class two"> by text thats in <span class="span class one">. I am not sure if it is even possible. Number of elements is not same in each tree part.

Following could be the alternative answer -
//span[normalize-space(text())='some text']/../../following-sibling::div//span
Explanation :-
//span[normalize-space(text())='some text'] is used to find the span tag with required details
/../.. will move to parent element of context node
/following-sibling::div//span will locate the span tag which in sibling element of parent div

You can select the element by the value of the class attribute with:
//span[#class='span class two']

//span[contains(., "some text")]/following::span
out:
Element='<span class="span class two">
span i want to pick
</span>'

I might've understood it differently but I'll try to give out a different answer:
//span[contains(text(),(//span[#class='span class one']/text())) and not(#class='span class one')]
which means:
//span[contains(text(), - you're looking for a span element that contains a certain text
(//span[#class='span class one']/text()))- that text is whatever is the text in span class one
and not(#class='span class one')] - but the span element should not be span class one
of course you can replace text() with a different property such as class or name or whatever... e.g. //span[contains(#class,(//span[#class='span class one']/text()))]

Try this way, as you were mentioned that you want to create xpath along with span class one
//span[text()= 'some text']/following::span[#class='span class two']
Explanation of xpath:- Use text method along with <span> tag and move ahead with another <span> tag using following keyword.

Related

Click on a element with specific text

Alright, I have a item which has this class class="country" and there are 12 elements with the same class. Now I want to get a element on its value. For example Italy. And now I want to click on a link in this item. The class of the link is class="link". So basically I want to click the link of the item with the name Italy
My code at the moment:
cy.get('.country').should('have.text', 'Italy').click();
HTML
<div class="countries">
<div class="text">
<h3></h3>
<div class="country">Italy</div>
<h4>Yala</h4>
<p>test</p>
<a class="link" href="/mysite">Show details</a>
</div>
</div>
Should() is an assertion and won't select the element you want.
you probably want the contains() function.
cy.get('.country').contains('Italy').click()
Best

Internationalize element with inner <span>

I'm working with Spring Boot + Thymeleaf. I want to internationalize something like this:
<p>Already registered? <span class="link">Log In</span></p>
If I add th:text="#{prompt}" to the <p> tag, the inner span will be replaced by the property value.
Is there any way to internationalize the whole text of <p> element with just one property in my resource bundle? (maybe with placeholders or I don't know)
You could add placeholders for the html tags inside the property value
Property:
prompt = Already registered? {0}Log In{1};
Html:
<p th:utext="#{prompt('<span class=link>', '</span>')}"></p>
Note: I am using th:utext instead of th:text because it doesn't escape html.
But it would be clearer if you would just have two different properties. E.g.:
<p>
<th:block th:text='#{prompt1}'></th:block>
<span class='link' th:text='#{prompt2}'></span>
</p>

xpath retrieving text inclusive of tag

I trying to parse a webpage and get all the content inside a div tag named div1. I tried ('div[#class="div1"]') which gives me the content below
<div class="div1">
<p>
something something <br>
abc<br>
def
</p>
</div>
However, I am trying to get everything that is inside the div tag, not including the div tag as shown below
<p>
something something <br>
abc<br>
def
</p>
Try changing your xpath to
div[#class="div1"]/child::*
Quote from https://www.w3.org/TR/xpath/#location-paths:
child::* selects all element children of the context node
For one thing, you're looking for #id when it's #class

How can I make custom class HTML divisions using AsciiDoctor?

I am beginning with AsciiDoctor and I want to output HTML. I've been trying to figure out how to create custom class in divisions, I searched google, manuals etc. and couldn't find a solution. What I want to do is simply write something like this:
Type the word [userinput]#asciidoc# into the search bar.
Which generates HTML
<span class="userinput">asciidoc</span>
but I want to have div tags instead of span. Is there any way to do it or should I just use something like
+++<div class="userinput">asciidoc</span>+++ ?
I think what you need is called "role" in Asciidoctor.
This example:
This is some text.
[.userinput]
Type the word asciidoc into the search bar.
This is some text.
Produces:
<div class="paragraph">
<p>This is some text.</p>
</div>
<div class="paragraph userinput">
<p>Type the word asciidoc into the search bar.</p>
</div>
<div class="paragraph">
<p>This is some text.</p>
</div>
You have now a css selector div.userinput for the concerned div.
See 13.5. Setting attributes on an element in the Asciidoctor User Manual (you can also search for "role").
You may want to use an open block for that purpose:
Type the following commands:
[.userinput]
--
command1
command1
--
Producing:
<div class="paragraph">
<p>Type the following commands:</p>
</div>
<div class="openblock userinput">
<div class="content">
<div class="paragraph">
<p>command1</p>
</div>
<div class="paragraph">
<p>command1</p>
</div>
</div>
</div>
The advantage is it can wrap any other block and is not limited to only one paragraph like the other answer.
For slightly different use cases, you may also consider defining a custom style.

Xpath: robust path for a locator of an element with 1 sibling and one...cousin?

This is the code:
<li>
<a>
<h1>Quorn StukĀ­jes</h1>
<p class="price">
</a>
<form>
<button type="submit">+</button>
</form>
</li>
I want to create a locator that finds the first <h1> that has an sibling element <p> with an attribute "price". Easy so far. But now I also want that <h1> to share its grandparent with a <button> class with the attribute type "submit".
What I created was the following:
//a/p[#class="price"]/preceding-sibling::p/preceding-sibling::h1
I'm wondering if this is the most sensible solution (it does work), or if there is something more elegant and robust.
(//*[form/button[#type = 'submit']]/*[p[#class = 'price']]/h1)[1] should do (assuming a submit button only makes sense in a form parent element).

Resources