<div class="form-item">
<label class="form-item-label">Mailing Account:</label>
<div class="form-element">
<div class="form-field-wrap>
<input class="form-text x-form-field x-combo-noedit">
</input>
I am trying to locate the element <input class="form-text x-form-field x-combo-noedit"> comes under <label class="form-item-label">Mailing Account:</label>.
First element should be matched on text "Mailing Account:" and the second element on any of these classes "form-text x-form-field x-combo-noedit".
Can someone suggest a logic using using xpath or cssSelectorplease?
Let me see if I understand you correctly, you want to find the element with the classes 'form-text' 'x-form-field' and 'x-combo-noedit', only if the containing div is a sibling of the label with text "Mailing account"
Way to do this using just xpath:
WebElement firstElement = driver.findElement(By.xpath("//label[contains(text(), 'Mailing Account:')]"));
WebElement secondElement = firstElement.findElement(By.xpath("./following-sibling::div[1]//input[#class='form-text x-form-field x-combo-noedit']"));
OR as you wrote if you want to match ANY of the classes then the "input" part of your second xpath to this:
//input[contains(#class,'form-text') or contains(#class ,'x-form-field') or contains(#class ,'x-combo-noedit')]
If you want to combine everything into just one expression, you can use the following xpath:
String xpath = "//label[contains(text(), 'Mailing Account:')]/following-sibling::div[1]//input[contains(#class,'form-text') or contains(#class ,'x-form-field') or contains(#class ,'x-combo-noedit')]";
// and then just find the element
driver.findElement(By.xpath(xpath));
Related
When I was reading the documentation in Material Design Lite's official page, no class name is mentioned for the fixed label with a textbox. In case of textarea they have a solution. But same code like the following one is creating only placeholder instead of a label for input type = "text".
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample5">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
I haven't seen this documented anywhere but it was annoying me so I delved into the SCSS to see what I could do. No changes to CSS are required. I managed to solve it by doing the following:
Add the mdl-textfield--floating-label has-placeholder classes to the outer <div> element.
Add a placeholder attribute to the <input> element, it can contain a value or remain empty; either way it will still work.
This will force the label to float above the input, instead of acting as a placeholder.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
<input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
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
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.
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();
I would like to replace next element of a given element and add css class to the next element.
I tried like this but it didn't work.
$(".validate_txt_sContactFirstName")
.next()
.replaceWith('<div>2</div>')
.addClass("atleastTwoChars");
<div class="xqh_Field">
<nobr>
<input name="ctl00$objContentPageTag$spzContactInformation$txt_sContactFirstName$txt"
type="text" size="25"
id="ctl00_objContentPageTag_spzContactInformation_txt_sContactFirstName_txt"
class="xqh_TextBox_Edit validate_txt_sContactFirstName error"
style="width:150px;margin-right:1px;">
<div class="atleastTwoChars"></div>
</nobr>
</div>
$(".validate_txt_sContactFirstName")
.next()
.text(2);
This is what you could use here. That way only the content of the <div> is edited. If you need HTML replace text(2) with html('<strong>2</strong>')
if i am getting you correctly you can do it in a very simple way, because when you already have the class atleastTwoChars in the div what is meaning of replacing it adding text in it and then add same class. you can just replace inner value of div.
$('.atleastTwoChars').html(2);
fiddle : http://jsfiddle.net/qXydv/