I have following html like:
<form name="form1">
<input name="a" ...>
<input name="b" ...>
...
<div><span><select name="c">...</select></span></div>
</form>
I would like to find out all elements within the form element. First I use findElement() to get the form element form1, then use form1.findElements(By.xpath(".//*[#name]")) to get all its children having attribute name. However, for the select element, since it's grand-grand child of form1, how can I get it as well?
Is there a way to find all elements containing attribute name (not only child elements, but also child's child's child...) within form1?
Thanks!
if you want to get an WebElement by xpath, and so get child of it... you may use webElement.findElement(By.xpath("./*")) ... this "." before the "/" makes the magic, you'll need it to get only the children of the webElement...
Do you have to find the form element? If not, then you can do it in one select statement using css or xpath.
The css would be 'form[name="form1"] [name]'
Note the space between the closing and opening brackets.
You would use this selector with FindElement on the driver object rather than finding the form first.
You should be able to use the descendant:: as described in this post.
http://hedleyproctor.com/2011/05/tutorial-writing-xpath-selectors-for-selenium-tests/
Here are a few examples from the article:
//div[h3/text()='Credit Card']/descendant::*
//div[h3/text()='Credit Card']/descendant::input[#id='cardNumber']
//div[*/text()='Credit Card']/descendant::input[#id='cardNumber']
webDriver.findElement(
By.xpath("//div[*/text()='Credit Card']/descendant::input[#id='cardNumber']")
).sendKeys("1234123412341234");
Related
Hi I have this element from a dropdown menu I try to select:
<div class="tt-suggestion tt-selectable">
<strong class="tt-highlight">Auto Customer</strong>
</div>
If I use element(by.xpath("//strong[contains(text(),'Auto Customer')]")).click(); I can select it no problem. But if I use element(by.xpath("//*[contains(text(),'Auto Customer')]")).click(); I get "Failed: element not visible"
Can someone explain this to me please?
Thank you
Because the * in //*[contains(text(),'Auto Customer')] means any tag, not only the strong Tag. But //strong[contains(text(),'Auto Customer')] must be strong Tag.
//*[contains(text(),'Auto Customer')] should find more then one elements on page, and the first one is not visible. You can try this xpath in Chrome DevTool's Element Tab to see how many elements it can find and the first one is visible or not.
This is my prototype code:
$$('coupon-value').findAll("price").innerHTML
<span class="coupon-value"><span class="price">66.67</span></span>
How do I get the value of .price in the prototype? In my html code there are multiple price classes. In jquery it would be simple:
$(".coupon-value").find(".price").text();
But in prototype I have no idea. Can you help me?
If you would like to get the contents of the <span> with the price class that is a child of a <span> with the coupon-value class you would do it like this
$$('.coupon-value .price').first().innerHTML
This will give you the first element that matches that CSS selector. You can also be very specific with your CSS selection as well.
$$('span.coupon-value span.price').first().innerHTML
you can also select that element and then traverse down the DOM like this
$$('.coupon-value').first().down('.price').innerHTML
Just be aware $$() returns an array of elements that match the CSS selector so you cannot just operate on them like a jQuery collection. However all of the elements in that array are already extended with the PrototypeJS extensions.
Try:
$$('coupon-value').getElementsByClassName("price").innerHTML;
You can change innerHTML for [0]
Like this:
$$('coupon-value .price')[0];
Or even this:
$$('span.price')[0];
I use Nokogiri for parse the html page with same content:
<p class="parent">
Useful text
<br>
<span class="child">Useless text</span>
</p>
When I call the method page.css('p.parent').text Nokogiri returns 'Useful text Useless text'. But I need only 'Useful text'.
How to get node text without children?
XPath includes the text() node test for selecting text nodes, so you could do:
page.xpath('//p[#class="parent"]/text()')
Using XPath to select HTML classes can become quite tricky if the element in question could belong to more than one class, so this might not be ideal.
Fortunately Nokogiri adds the text() selector to CSS, so you can use:
page.css('p.parent > text()')
to get the text nodes that are direct children of p.parent. This will also return some nodes that are whtespace only, so you may have to filter them out.
You should be able to use page.css('p.parent').children.remove.
Then your page.css('p.parent').text will return the text without the children nodes.
Note: the page will be modified by the remove
I have the following HTML:
<input type="submit" style="-webkit-user-select:none;line-height:100%;height:30px" value="Advanced Search" class="jfk-button jfk-button-action adv-button">
I have written xpath as: //input[#value='Advanced Search']
What is the CSS locator/path?
It's difficult to answer as optimum search selectors need the entire source code to be written, as several DOM Elements in the document could be returned for a generic selector.
In this case, a more detailed selector would be :
input.adv-button[value='Advanced Search']
You can convert your xpath into corresponding CSS Locator by using the following website:
http://cssify.appspot.com/
For example:
Go to site http://cssify.appspot.com/
Insert the XPath //input[#value='Advanced Search'] into text field
Click submit button and observe the result
You can see the corresponding CSS Locator as follows:
input[value="Advanced Search"]
On my webpage I have two buttons, how to identify which one is which?
<button onclick="addToSelected('newApplicationForm');">Add Strategy</button>
<button onclick="submitAddNewApplication('newApplicationForm');">Submit</button>
You say it's your webpage. Any chance you could put IDs to your elements? Would make it easier to identify them uniquely. If not, solution below.
You could use this XPath expression:
//button[contains(#onclick,"addToSelected('newApplicationForm');")]
Which will identify it by the javascript call, or you could try:
//button[.='Add Strategy']
^
|_ May need to be replaced by text()
Which will match the content.
For the submit-button, you could try the same principle with identifying by javascript:
//button[contains(#onclick,"submitAddNewApplication('newApplicationForm');")]
or by content:
//button[.='Submit']
Note: Some languages seem to use text() instead of the dot . to refer to the actual text in an element.