I'm trying to use the DOM to locate a form element in Selenium but I can't get it to work. Even if I use the example in the Selenium documentation it still fails, for example with this html...
<html>
<body>
<form id="loginForm">
<input name="username" type="text" />
<input name="password" type="password" />
<input name="continue" type="submit" value="Login" />
<input name="continue" type="button" value="Clear" />
</form>
</body>
<html>
and this command in the Selenium IDE...
verifyElementPresent
with target...
dom=document.forms['loginForm']
I get [error] false in the log.
The 'getElementById' example in the documentation does work, but none of the others.
Can someone explain what I'm doing wrong here?
Thanks.
Not sure why it's not working (I can replicate the problem), but perhaps there's a better way to locate your target element? I would recommend locating by ID/name, falling back to CSS or XPath.
The format to locate a element is-
i) document.forms[index of the form].elements[index of the element]
index of the form = the index number (starting at 0) of the form with respect to the whole page, index of the element = the index number (starting at 0) of the element with respect to the whole form that contains it.
ii) document.forms[“name of the form”].elements[“name of the element”]
name of the form = the value of the name attribute of the form tag that contains the element you want to access, name of the element = the value of the name attribute of the element you wish to access
iii) document.getElementById(“id of the element”)
id of the element = this is the value of the ID attribute of the element to be accessed. This value should always be enclosed in a pair of parentheses (“”).
iv)document.getElementsByName(“name”)[index]
name = name of the element as defined by its ‘name’ attribute, index = an integer that indicates which element within getElementsByName’s array will be used.
Related
I am writing a set of tag helpers that target, for example, <form> and <input> elements. I want to add a custom attribute to the <form> element, and retrieve the value of that attribute in the contained <input> element. So, if my HTML looks like this:
<form xx-value='123'>
<input asp-for='Something' />
</form>
then in my InputTagHelper I would want to retrieve the value 123 that was specified for the xx-value attribute.
Is there a designed-in way to pass data like this between tag helpers?
Consider the case where I have this markup:
<form xx-value='123'>
<input asp-for='Something' />
</form>
<form>
<input asp-for='SomethingElse' />
</form>
In this case, the first invocation of the InputTagHelper would get the value 123. But the second invocation of the InputTagHelper would get a value of 0 since its parent <form> tag didn't specify the magic xxx-value attribute.
The simple answer (which doesn't work for <form> and <input> tags - see blow) is for the "parent" tag helper to store the value in the context.Items dictionary and for the "child" tag helper(s) to retrieve the value from that same dictionary. A Google search for "child tag helper" yields many examples of this scheme.
The problem with this answer (in the context of the OP) is that, for some reason, the <form> tag helper executes after its child <input> tag helper. So, rather than receiving the value from the parent FormTagHelper, the InputTagHelper discovers that the context.Items dictionary is empty.
I created this SO post to ask about that weird behavior.
Looking for a generic way to find text before an input field to know what to fill in the field. Using xpath, css selector or any other way possible.
<div>
<span>Full Name</span>
<input name="xddadN">
</div>
<div>
<span>Email</span>
<input name="xedadN">
</div>
Or
<div>
<div><label>Full Name</label></div>
<div><input name="xddadN"></div>
<div><label>Email</label></div>
<div><input name="xedadN"></
</div>
Or
<div>
<label>Full Name<br>
<span><input name="xddadN"></span>
</label>
</div>
<div>
<label>Full Name<br>
<span><input name="xddadN"></span>
</label>
</div>
You can try below XPath expression to get preceding text node:
//input/preceding::*[1]
or more specific for Full Name
//input[#name="xddadN"]/preceding::*[1]
and Email:
//input[#name="xedadN"]/preceding::*[1]
For full name use this Xpath : //input[#name='xddadN']/preceding-sibling::span
code :
String fullName = driver.findElement(By.Xpath(//input[#name='xddadN']/preceding-sibling::span)).getText();
String Email = driver.findElement(By.Xpath(//input[#name='xedadN']/preceding-sibling::span)).getText();
You haven't mentioned any Selenium Language Binding Art so I will be using Java for the example.
First the Answer
Yes, you can use a generic way to find text before an input field as follows :
As per the HTML :
<div>
<span>Full Name</span>
<input name="xddadN">
</div>
<div>
<span>Email</span>
<input name="xedadN">
</div>
To retrieve the text Full Name from the <span> tag with respect to the <input> tag you can use :
String myText = driver.findElement(By.xpath("//input[#name='xddadN']//preceding::*[1]")).getAttribute("innerHTML");
Now the Pitfall
Without any visibility to your usecase in my opinion the generic way would be a pitfall which will induce much chaos and uncertanity for the following reasons :
As per the xpath we are straightway jumping into the previous element, a small change in the HTML DOM (e.g. inclusion of a <span> tag) will make your Testcases to Fail.
In general, while constructing a Locator Strategy through css-selectors or xpath it will be benificial to include the <tagName> to optimize the element search process. If <tagName> are not included your Tests will require more time to locate the elements and perform action on them. In this process you are compromising some of the advantages of Test Automation.
Conclusion
Hence as a conclusion as per the Best Practices always include the <tagName> while constructing a Locator Strategy through css-selectors or xpath.
I am trying to login to a site.
This is the problematic html part:
<input name="pass" id="vic_login_password" autocomplete="off" class="inpHM3_2" dir="ltr" type="password" value="" id="PasswprdH1" /><input type="text" value="Password" onfocus="this.style.display='none'; gid('vic_login_password').style.display='block'; gid('vic_login_password').focus();" class="inpHM3_3" />
My code:
driver.findElementById("vic_login_password").SendKeys "fakepass"
I get an error no -2146233088 saying that element is not visible.
For the user name everything works fine this way, but for the password I always get this error.
The key to solve the problem is inside that onfocus() event handler:
onfocus="this.style.display='none'; gid('vic_login_password').style.display='block'; gid('vic_login_password').focus();"
It is actually making one input invisible and the other one visible. The other one is the input with id="vic_login_password" which is initially invisible. This explains the error you've got.
In your code, you should first focus the visible input and only then send keys to the other one:
driver.findElementByCssSelector("input[value=Password][onfocus]").Click
driver.findElementById("vic_login_password").SendKeys "fakepass"
So as the title suggests. I am looking to confirm that the value of the Radio button is correct.
The HTML is as follows:
<input type="radio" value="Coach" name="servClass" checked="">
<font face="Arial, Helvetica, sans-serif">
Economy class
<br>
<input type="radio" value="Business" name="servClass">
Business class
<br>
<input type="radio" value="First" name="servClass">
First class
</font>
The selenium bit is as follows:
String expectedServiceClass = "First class";
String actualServiceClass = driver.findElement(By.cssSelector("input[value='First']")).getText();
if (actualserviceClass.equals(expectedServiceClass)){
System.out.println("Correct Wording");
}else{
System.out.println("Oops: somethings not right with the wording");
//close Firefox
driver.close();
// exit the program explicitly
System.exit(0);
}
But when this is executed, the actualServiceClass variable doesn't contain any values i.e. null therefore the "if statement" will always print "Oops: somethings not right with the wording"
Any help???
With the current HTML code, you won't be able to confirm the value of label of Radio button as Radio button is implemented as Input tag, that is a self-closing tag and hence getText() on input will always return null. You will need a container tag like div to include the Input tag(radio button) and the label. Refer: Self-closed versus Container Tags
The problem is not with the Selenium Code, its actually due to the improper HTML snippet. Changing the HTML as below can solve this:
<font face="Arial, Helvetica, sans-serif">
<div>
<input type="radio" value="Coach" name="servClass" checked="">
Economy class
<br>
</div>
<div>
<input type="radio" value="Business" name="servClass">
Business class
<br>
</div>
<div>
<input type="radio" value="First" name="servClass">
First class
</div>
After this, just changing the Css Selector or XPath to find the div will give you value of label of Radio Button. Css Selector can be div>input[value='First']. Let me know if you are able to solve the problem.
I agree with #Manu the HTML snippet is poor but you can use javascript childNodes to get the text from the nodes
The childNodes property returns a collection of a node's child nodes, as a NodeList object.
The nodes in the collection are sorted as they appear in the source code and can be accessed by index numbers. The index starts at 0.
Use executescript to execute JavaScript in the context of the currently selected frame or window
Below is an example in java
Don't forget to add return since you need to return the value to the caller
WebElement element = driver.findElement(By.xpath("//input[#value='Coach']/following-sibling::font"));
String node_text=(String)((JavascriptExecutor)driver).executeScript("return arguments[0].childNodes[0].nodeValue",element);
System.out.println(node_text.trim());
Try the above script it will return "Economy class"
In the above script we use childnode property to get all the childnodes of
font tag <font face="Arial, Helvetica, sans-serif">
similarly you can get the other text nodes by replacing childnode index
childNodes[4]----->"Business class"
childNodes[8]------>"First class"
I tried the above code it was working fine
Hope this helps you...kindly get back if you have any queries
I have a html markup like this:
<html>
...
<body>
....
<fieldset>
<legend>Other Details</legend>
<div>
<input type='text' id='txt1' title='Detail 01'/>
</div>
<div>
<input type='text' id='txt2' title=''/>
</div>
<div>
<input type='text' id='txt3' title=''/>
</div>
<div>
<input type='text' id='txt4' title='Detail 04'/>
</div>
</fieldset>
.....
<body>
</html>
This is what I want to do.
I need to rapidly traverse the screen, pick up all the textboxes and their titles. When I encounter a textbox that has no title (like two of them in my above example), I need to check if they occur under a fieldset, which they do. Now, for these textboxes without a title, all I have to do is to take the legend value of the fieldset and assign it to the textbox.
For example, the second and third textboxes in the above example do not have a title. In this case I want to do the following:
Take the legend value of the containig fieldset (in this case, "Other Details")
Derive the position of the textbox in the fieldset and append it to the fielset legend like Other Details 2
Do the same thing for the third textbox.
I achieved step 1. When I am in step 2, I need to find out the position of the textbox in the parent fieldset. I have my selenium webdriver code below:
WebElement textbox = driver.findElement(By.id("txt2"));
List<WebElement> precedingSiblings =
textbox.findElement(By.xpath("preceding-sibling::input[#type='text' or #type='Text' or #type='TEXT']"));
String myTitle =
fieldSetLegend + " " + Integer.toString(precedingSiblings.size()+1);
I expect this code to give me the value of myTitle to be Other Details 2 and Other Details 3 for my second and third textboxes.
But the problem is, everytime I hit precedingSiblings.size(), it always returns 0. That is because each input is contained within a div and hence has no siblings.
Now, I want to know of a way through which I can find at what position my current element is within the containing fieldset.
Please help.!!!
What about navigating to the parent div finding it's preceding sibling & then finding the relevant input from there.
Roughly:
parent::div/preceding-sibling::div/input[#type='text' or #type='Text' or #type='TEXT']