XPATH required for an input text field? - xpath

i have a text box in my web application,Where i need to give input. I am trying to find the xpath of the text box. the following error is thrown.
Unable to locate element: {"method":"xpath","selector":"
HTML code:
<div class="input">
<input id="firstName" class="long" type="text" maxlength="50" value="" name="firstName
I want the xpath for firstName textbox.

//input[#type='text']
And this for generally targeting a text input (what I was after)

Try this one:
//input[#id='firstName']
Explanation:
// search on all levels
input for element nodes with the name of "input"
[#id='firstName'] having an attribute (#) with the name of "id" and a value of "firstName"

at least 3 simple ways to get this:
1)Driver.FindElement(By.XPath("//input[#id='firstName']"));
2)Driver.FindElement(By.Id("firstName"));
3)Driver.FindElement(By.CssSelector("#firstName"));

//*[text()[contains(.,'firstName')]]
finding by text would always work.

Related

Find text in xpath

How to access "Testing Field 1" from Label without using contains or adding span tag in Xpath
<label id="138:" for="136:" class="rcmFormFieldLabel">
<span class="requiredField" aria-hidden="true" role="presentation">*</span>
Testing Field 1
</label>
my xpath
//label[contains(text(),'Testing Field 1')]/ancestor::div[1]//select
but my xpath have contains which i dont want
You can use these XPath-1.0 expressions:
This
//label/*/following-sibling::text()[normalize-space()]
Or this
//label/text()[normalize-space()]
Result in both cases is
Testing Field 1

How to get descendants with a specific tag name and text in protractor?

I have the following structure (it's just for sample). In protractor, I am getting the top element by id. However, the other elements do not have id's. I need to get the "label" element that contains the text '20'. Is there an easy way in protractor to select the element with a specific tag that contains a specific text from all the descendants of a parent element?
<pc-selector _... id="Number1">
<div ...></div>
<div ...>
<div ...>
<check-box _...>
<div _ngcontent-c25="" ...>
<label _ngcontent-c25="">
<input _ngcontent-c25="" type="checkbox">
<span _ngcontent-c25="" class="m-checkbox__marker"></span>
20 More text to follow</label>
</div>
</check-box>
</div>
</div>
</pc-selector>
I could't find anythitng, so I have tried with xpath, but protractor complains that my xpath is invalid:
parentElement = element(by.id('Number1'));
return parentElement.element(by.xpath(".//label[contains(text(),'20'))]"));
Any ideas?
You have an additional bracket in your [contains(text(),'20'))] which is likely causing you issue but there are multiple other ways this can be achieved using a single XPath or chaining other locators.
The process is that you must find the div with the correct id first and then locate the label that is a child of it.
//Xpath
element(by.xpath("//pc-selector[#id='Number1']//label[contains(text(),'20')]"));
//Chained CSS
element(by.id('Number1')).element(by.cssContainingText('label','20'));
You also may be interested to learn about xpath axes which can allow us to do very dynamic selection.
You can use the direct xpath to access the label.
element(by.xpath("//*[#id='Number1']//label"));

XPath Without Selector

Suppose I have following code:
<div class="Class">
<h3>First Title H3</h3>
First Description <br />
Choose Option:
<select id="Id" name="Name">
<option value="Value1">Option1 $Price1</option>
<option value="Value2">Option2 $Price2</option>
<option value="Value3">Option3 $Price3</option>
</select>
<h3>Second Title H3</h3>
Second Description Link
</div>
What's the Xpath to print "First Description" only?
What's the XPath to print "$Price1" only (without/exclude "Option1")?
Thanks for your help.
I'm not sure what is your desired output, but here is what should help you.
following-sibling::text() would help you to check the First Description:
//div/h3[contains(following-sibling::text(), "First Description")]
For the first option of the select tag, I would rely on the select's id attribute and option's value attribute:
//select[#id="Id"]/option[#value="Value1"]/text()
Solved based on this answers: using XPath: how to exclude text in nested elements and XPath: select text node and Get second element text with XPath?
String value = driver.findElement(By.xpath("//*[#value ='Value1']").getText();
String strarr[] = value.split(" ");
System.out.println("Price1 :"+ strarr[1]);
I think this will work, we are finding the text and splitting with space.

XPath / Selenium can't locate an element using a partial id with contains / start-with

I have the following HTML generated with an AjaxFormLoop.
<div id="phones">
<div class="t-forminjector tapestry-forminjector" id="rowInjector_13b87fdd8b6">
<input id="number_13b87fdd8b6" name="number_13b87fdd8b7" type="text"/>
<a id="removerowlink_13b87fdd8b6" href="#" name="removerowlink_13b87fdd8b6">remove</a>
</div>
<div class="t-forminjector tapestry-forminjector" id="rowInjector_13b87fdda70" style="background-image: none; background-color: rgb(255, 255, 251);">
<input id="number_13b87fdda70" name="number_13b87fdda70" type="text" />
<a id="removerowlink_13b87fdda70" href="#" name="removerowlink_13b87fdda70">remove</a>
</div>
</div>
I'm trying to access the second input field in child 2 using a partial ID, however I have not been successful in getting this to work.
What I've tried thus far.
String path = "//input[contains(#id,'number_')][2]";
String path = "(//input[contains(#id,'number_')])[2]";
I can't even access input 1 using 1 instead of 2, however if I remove [2] and only use
String path = "//input[contains(#id,'number_')]";
I'm able to access the first field without issue.
If I use the exact id, I'm able to access either field without issue.
I do need to use the id if possible as there is many more fields in each t-forminjector row that are not present in this example.
Implementation with Selenium.
final String path = "(//input[starts-with(#id,'quantity_')])[2]";
new Wait() {
#Override
public boolean until() {
return isElementPresent(path);
}
}.wait("Element should be present", TIMEOUT);
Resolved
I'm noticing I can't seem to use the following starts-with / contains to locate any element within to dom, however if I use a complete id, it works.
//Partial ID - fails
//*[starts-with(#id,"quantity_")]
//Exact ID - works
//*[starts-with(#id,"quantity_-112409575185705")]
The generated output you pasted here simply does not contain the string number_ anywhere in it. It does contain Number_ -- note the capital N -- but it's not the first part of the string. Perhaps you meant something like this (which at least selects something):
(//input[contains(#id, 'Number_')])[2]
Or:
(//input[starts-with(#id,'catalogNumber_')])[2]
As Iwburk stated, this was a namespace issue. According to the Selenium API,
http://release.seleniumhq.org/selenium-remote-control/0.9.0/doc/java/com/thoughtworks/selenium/Selenium.html
while using an xpath expression, I needed to used xpath=xpathExpression changing my query string to:
String path = "xpath=(//input[starts-with(#id,'quantity_')])[2]";
I found a related post here,
Element is found in XPath Checker but not in Selenium
you can't access it because you are not locating the element as to be unique in the page.
use an xpath that makes it unique ,
- you're xpath look ok .
more info here
http://www.seleniumhq.org/docs/appendix_locating_techniques.jsp
Besides the selenium syntax problem there's an xpath issue related to markup structure.
xpath 1: //input[starts-with(#id,'number_')][1]
xpath 2: (//input[starts-with(#id,'number_')])[1]
In the sample below xpath 1 will return 2 nodes (incorrect) and xpath 2 will be correct because input nodes are not siblings so surrounding parenthesis are needed to refer to the resulting nodeset
<div id="phones">
<div>
<input id="number_1" name="number_1" type="text"/>
</div>
<div>
<input id="number_2" name="number_2" type="text" />
</div>
</div>
Result without parenthesis
/ > xpath //input[starts-with(#id,'number_')][1]
Object is a Node Set :
Set contains 2 nodes:
1 ELEMENT input
ATTRIBUTE id
TEXT
content=number_1
ATTRIBUTE name
TEXT
content=number_1
ATTRIBUTE type
TEXT
content=text
2 ELEMENT input
ATTRIBUTE id
TEXT
content=number_2
ATTRIBUTE name
TEXT
content=number_2
ATTRIBUTE type
TEXT
content=text
In this next sample, parenthesis will not make a difference because nodes are siblings
<div id="other">
<input id="pre_1" type="text"/>
<input id="pre_2" type="text" />
<div>a</div>
</div>
With parenthesis
/ > xpath (//input[starts-with(#id,'pre_')])[1]
Object is a Node Set :
Set contains 1 nodes:
1 ELEMENT input
ATTRIBUTE id
TEXT
content=pre_1
ATTRIBUTE type
TEXT
content=text
Without parenthesis
/ > xpath //input[starts-with(#id,'pre_')][1]
Object is a Node Set :
Set contains 1 nodes:
1 ELEMENT input
ATTRIBUTE id
TEXT
content=pre_1
ATTRIBUTE type
TEXT
content=text
Testing was done with xmllint shell
xmllint --html --shell test.html

Validating input type number in html5

I want to restrict entry of input onto a field of type number such that input cannot be outside range of min-max specified in the html.
input type = "number" min = "1" max = "5"
Is there a way of outputting the number field without the text box and i would rather not use
"input type = range"
as slider does not show value currently selected
Please help.
Thanks.
Based on what you said, I suggest using a simple input text field and check it's value validity on submission via JavaScript (as #Kush mentions above). You could also check it as the user types, or moves focus away from that field.
<form>
Only 1 to 100 <input type="text" name="number" pattern="\d{1,2}(?!\d)|100" title="one to hundreed only">
<input type="submit">
</form>

Resources