Can't find element using xpath - webdriver

So, here are two divs
<div class="th_pr"><input id="user_email" class="accounts_input" type="text" size="30" placeholder="Email" name="user[email]"></input><p class="accounts_error_text" style="display: block;">
email is invalid
</p></div>
<div class="th_pr"><input id="user_password" class="accounts_input" type="password" size="30" placeholder="Password" name="user[password]" autocomplete="off"></input><p class="accounts_error_text" style="display: block;">
password can't be blank
</p></div>
I need to get those elements with texts "email is invalid" and "password can't be blank" by text, cause it will differ depending on input.
I've been trying to complete this using xpath :
By.xpath("//p[contains(.,'email is invalid')]")
and
By.xpath("//p[contains(.,'password be blank')]")
but i get nothing.
resultEmail = ExpectedConditions.invisibilityOfElementLocated(By.xpath("//p[contains(.,'email is invalid')]")).apply(driver);
returns true, although the element is visible.
Please help.

Try xpath
//input[#id='user_email']/following-sibling::p
//input[#id='user_password']/following-sibling::p
Then you have
WebElement emailParagraph = driver.findElement(By.xpath("//input[#id='user_email']/following-sibling::p"));
System.out.println(emailParagraph.getText());

Did you try using the text() method within the xpath?
driver.findElement(By.xpath("//p[contains(text(), 'email is invalid')]"));
Rather than using the .?

Please try this:
WebElement userEmailErrorMessage = driver.findElement(By.cssSelector("div[class=\"th_pr\"]:nth-child(1) > p"));
WebElement userPasswordErrorMessage = driver.findElement(By.cssSelector("div[class=\"th_pr\"]:nth-child(2) > p"));
Using these elements you will be able to read the error messages for the respective input controls.

Related

How to select an element by refrencing the inside element of a nested class

For this html code, I want to select an element using CSS.
I need to select "Cvv2 required" by referencing validatedMessage. I was thinking of trying .validateMessage + .Cvv2.required .However, that didn't work. It seems "Cvv2 required" is after "CCNumber required". But I need to reference "validatedMessage" which is inside "CCNumber required". I don't even know thats the proper jargon to explain this relationship....
<div class="CCNumber required">
<label id="label">Credit Card Number:</label>
<input name="test" type="text" class="wrong">
<span class="validatedMessage">Required</span> <br>
</div>
<div class="Cvv2 required">
<a> What's this</a><br>
</div>
This is not currently possible with pure CSS.
You are looking for some kind of "contains" query, which is not available.
https://css-tricks.com/child-and-sibling-selectors/#article-header-id-4

Selenium how to access two controls of same css class

I am doing testing using selenium ide.
My objective is to verify the following
1) Max and Min length property of text boxes.
2) Verify the texts of the labels
My html code is as below:
<div class="control-group">
<label class="control-label" for="input01">Email</label>
<div class="controls">
<input name="data[Salon][username]" class="span4" id="username" placeholder="Username or Email" type="text"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Password</label>
<div class="controls">
<input name="data[Salon][password]" class="span4" id="password" placeholder="Required" type="password"/>
</div>
But in the above I am facing following problems:
a) I have problem in accessing the labels for assertText or assertElementPresent since they are having same class name.
b) I don't know how verify the Max and Min length property of the Text boxes.
And please note that when I am trying to use
document.getElementsByClassName("control-label")
I am getting the following error:
[error] locator not found: document.getElementsByClassName("control-lable"), error = TypeError: e.scrollIntoView is not a function
You can access first label via:
css=div[class='control-group'] label[class='control-label']:contains('Email')
You can access second lavel via:
css=div[class='control-group'] label[class='control-label']:contains('Password')
Use these with command assertElementPresent, "contains" in element locator allows you to verify text in it.
Also you can use xpath:
//div[#class='control-group']//label[#class='control-label'][text()='Email']
//div[#class='control-group']//label[#class='control-label'][text()='Password']
Usually maxlength property is set as attribute of the input, but i can't see it in your html code.. But you can try:
storeAttribute (Selenium IDE's command) and as target you can use xpath:
/div[#class='control-group']//label[#class='control-label'][text()='Email']/#maxlength save it to some var (eg set to the value field smthg like attLength) and then echo this var like: Selenium IDE's command echo and as put to the target field ${attLength}

Mac Address Input Box

I'm creating an input box that will only allow 17 characters and is formatted to display as a mac address.
I've added the first 11 characters, the rest the ( last 4 digits of mac) will be added by the user. Is there any way to stop them deleting the initial characters I've preset ?
<script>
function macAdd(val){
if (/[^\w-]|_/.test(val))
{alert("invalid form only alpanumeric and -")
return val}
val=val.replace(/[^\w-]|_/g,'')
val=val.replace(/(\w{2})([^-])/g,'$1'+'-'+'$2')
val=val.replace(/-$/,'')
return val
}
</script>
<input type="text" onkeypress="this.value=macAdd(this.value)" size="30" value="00-00-00-00" maxlength="17"> </p>
Thanks
This seems to achieve what I'm looking to do.
<form>
<input type="text" style="width:130px;" value="00-00-00-00-" readonly><input type="text" style="margin-left : -50px;width:50px;" maxlength="5" onkeypress="this.value=macAdd(this.value)">
</form>

How to get the title attribute of a input element? - webdriver

How to get the attribute of Title in the input element
<input type="image" title="Previous Page">
<input type="image" title="First Page">
<input type="image" title="Next Page">
<input type="image" title="Last Page">
What have you tried? Typically something like the following should work:
WebElement element = driver.findElement(By.tagName("input"));
String title = element.getAttribute("title");
The answer provided by Jim Evans is the correct one imo, but for a more specific one i'd advise something like below. Remeber that copy-pasta might not work and you need to change something to be able to work on your full HTML.
List<WebElement> elements = driver.findElements(By.tagName("input"));
for (WebElement element : elements) {
if (element.getAttribute("type").equals("image")) {
System.out.println(element.getAttribute("title"));
}
}
The above code will loop for all the in your webpage that are from type="image" and print on the console the "title" attribute of each one of those.
Still thing you should vote Jim's answer as the correct one though.
First, you need to identify the input element from which you want to get the value of the attribute title .
Then something like the following must work.
element.getAttribute("title");
Its very simple and work for as well.
String title = driver.getTitle();

limit of characters in html

I have set the limit of characters on textbox but while typing the input if it exceeds from 9 character it continues type it another field without use of tab
<input data-val="true" data-val-regex="Please enter valid SSN" data-val-regex-pattern="^\d{3}-\d{2}-\d{4}$" id="Ssn" name="Ssn" type="text" value="" class="valid">
I want it should stop to take input.
You should use jQuery for example
<input data-val="true" maxlength=9 data-val-regex="Please enter valid SSN" data-val-regex-pattern="^\d{3}-\d{2}-\d{4}$" id="Ssn" name="Ssn" type="text" value="" class="valid"><br>
<script lang="text/javascript">
$("#Ssn").keyup(function(e)
{
var str=$("#Ssn").val();
if(str.length==9)
{
$("#Ssn").blur();
}
});
</script>
at this code you must include jQuery before
** Edit Misunderstanding
Use the maxlength attribute
<input data-val="true" data-val-regex="Please enter valid SSN" data-val-regex-pattern="^\d{3}-\d{2}-\d{4}$" id="Ssn" name="Ssn" type="text" value="" class="valid" maxlength="9">
pattern attribute regular expressions aren't fully supported in all browsers--specifically, those that do support them don't always obey complex regular expressions. I've noticed this in Safari, at least.
The maxlength attribute SHOULD work. Not sure why it's not for you. Maybe post a JSBIN example for us to look at.
That said, for complex client-side form validation, you still need to rely on javascript to support a broader range of browsers.

Resources