Getting child elements using cssSelector - xpath

I have a code segment that looks like this
<div class="class1">
<div class="ng-scope"> apple </div>
<div class="ng-scope"> butter </div>
I want to get the text of the children. I do not want to use ng-scope since that is not a unique identifiter, but class1 is. How can I do something like identifying the parent, so ('.class1') or using xpath, and then getting the text from all its children. so the print out would look something like
" [ apple, butter ]; "

$$('.class1 div').getText().then(function(values) {
// This is an array containing ['apple', 'butter']
});

Related

xPath how to access input text file with generic name

Is there any option to access input in code like this:
(...)
<div class="dialogProp">
<div class="gwt-Label">Name</div>
<div class="floatLeft">
<div>
<input type="text" class="textBox">
</div>
<div class="notVisible"></div>
</div>
<div class="dialogProp">
<div class="gwt-Label">Surname</div>
<div class="floatLeft">
<div>
<input type="text" class="textBox">
</div>
<div class="notVisible"></div>
</div>
(...)
As you can see I got two inputs and only difference between them is label inside of div with different text inside. This kind of pattern can be found all around of website and I cannot change this. I can not add id's as well.
Do you know if there is possibility to add to the xPath this different text inside of div's?
Let's say I would like to access first input.
Of course I could use some ass long xPath, but I would like to reuse this with text inside of gwt-Label as variable.
Use below to locate input by label text:
//div[#class="gwt-Label" and .="Name"]/following-sibling::div//input
In Python you can pass label from variable:
label = "Name"
xpath = '//div[#class="gwt-Label" and .="%s"]/following-sibling::div//input' % label
To access the input with respect to the label text you can use the following solution:
labelText = "Name"
#or labelText = "Surname"
xpath = "//div[#class='gwt-Label' and contains(.,'" +labelText+ "')]//following::div[1]//input"

The Intern - functional tests Finding Element with A Descendant that matches

I am writing a functional test script to find a parent element that HAS a child that can be found, and if a descendant is found, return the parent. For example:
<div class="contentPane">
<h2>Heading 1</h2>
<p id="first">FIRST TEXT</p>
</div>
<div class="contentPane">
<h2>Heading 2</h2>
<p id="second">SECOND TEXT</p>
</div>
<div class="contentPane">
<h2>Heading 2</h2>
<p id="third"></p>
</div>
I want to find the contentPane that can find the paragraph with the id="second". My test case to find the parent is similar to this:
...
findAllCssSelector(".contentPane")
.then(function(array, setContext){
//for every element i in array
//I want to call its findByCssSelector(".second")
//and check if it is found. If it is
//I want to return the ith element in array
// to the command.
})
.findByTagName("h2")
.getVisibleText()
.then(function(text){
assert.strictEqual(text, "Heading 2");
})
....
...
How do I iterate through each array element and return the array element to the context stack?
For complex queries, Xpath is generally much more efficient than manually searching through elements. You could query with something like:
.findByXpath('//div[#class="contentPane" and p[#id="second"]]')
This will find the first DIV with class "contentPane" that contains a P with id "second".

Check <div> at the same level

I have at the same level, and I want the check the value of one div, and retrieve the value of another using local-name() where possible.
<div class="x-extension-property">
<div class="x-extension-property-id">I own a house</div>
<div class="x-extension-key"></div>
<div class="x-extension-value">This is the value I want </div>
<div class="x-extension-data-type"></div>
</div>
In a single Xpath statement I would like to detect that x-extension-property-id = "I own a house" and when that matches retrieve the value of x-extension-value which is "This is the value I want"
I have not tested it, but something like this should work:
/div/div[#class='x-extension-property-id' and text() = 'I own a house']/../div[#class='x-extension-value']

Watir: How to retrieve all HTML elements that match an attribute? (class, id, title, etc)

I have a page that is dynamically created and displays a list of products with their prices. Since it's dynamic, the same code is reused to create each product's information, so they share the tags and same classes. For instance:
<div class="product">
<div class="name">Product A</div>
<div class="details">
<span class="description">Description A goes here...</span>
<span class="price">$ 180.00</span>
</div>
</div>
<div class="product">
<div class="name">Product B</div>
<div class="details">
<span class="description">Description B goes here...</span>
<span class="price">$ 43.50</span>
</div>
</div>`
<div class="product">
<div class="name">Product C</div>
<div class="details">
<span class="description">Description C goes here...</span>
<span class="price">$ 51.85</span>
</div>
</div>
And so on.
What I need to do with Watir is recover all the texts inside the spans with class="price", in this example: $ 180.00, $43.50 and $51.85.
I've been playing around with something like this:
#browser.span(:class, 'price').each do |row| but is not working.
I'm just starting to use loops in Watir. Your help is appreciated. Thank you!
You can use pluralized methods for retrieving collections - use spans instead of span:
#browser.spans(:class => "price")
This retrieves a span collection object which behaves in similar to the Ruby arrays so you can use Ruby #each like you tried, but i would use #map instead for this situation:
texts = #browser.spans(:class => "price").map do |span|
span.text
end
puts texts
I would use the Symbol#to_proc trick to shorten that code even more:
texts = #browser.spans(:class => "price").map &:text
puts texts

xPath strange behaviour - selecting ALL elements even if [1] set

today I stumbled upon a very interesting case (at least for me). I am messing around with Selenium and xPath and tried to get some elements, but got a strange behaviour:
<div class="resultcontainer">
<div class="info">
<div class="title">
<a>
some text
</a>
</div>
</div>
</div>
<div class="resultcontainer">
<div class="info">
<div class="title">
<a>
some other text
</a>
</div>
</div>
</div>
<div class="resultcontainer">
<div class="info">
<div class="title">
<a>
some even unrelated text
</a>
</div>
</div>
</div>
This is my data.
When i run the following xPath query:
//div[#class="title"][1]/a
I get as a result ALL instead of only the first one. But if I query:
//div[#class="resultcontainer"][1]/div[#class="info"]/div[#class="title"]/a
I get only the first , not all.
Is there some divine reason behind that?
Best regards,
bisko
I think you want
(//div[#class="title"])[1]/a
This:
//div[#class="title"][1]/a
selects all (<a> elements that are children of) <div> elements that have a #class of 'title', that are the first children of their parents (in this context). Which means: it selects all of them.
The working XPath selects all <div> elements that have a #class of 'title' - and of those it takes the first one.
The predicates (the expressions in square brackets []) are applied to each element that matched the preceding location step (i.e. "//div") individually. To apply a predicate to a filtered set of nodes, you need to make the grouping clear with parentheses.
Consequently, this:
//div[1][#class="title"]/a
would select all <div> elements, take the first one, and then filter it down futher by checking the #class value. Also not what you want. ;-)

Resources