Develop Reference

Selenium WebDriver (Java) : Handle Field Validation Message

How to handle this kind of pop-up. My goal is to get the message when Submit button clicked then validate it againts my own text (maybe using assert). I've tried to locate the element using firepath (xpath) but when i click locate Element button on firebug, the pop-up disappear.
Here is the screenshot of the pop-up.
popUp
Here is the code :
<p class="errors"></p>
<input id="email" class="form-control" type="email" value="" name="email" required="" oninput="setCustomValidity('')" oninvalid="this.setCustomValidity('Email Cannot Be Empty')" placeholder="Email *" data-placeholder="X" data-format="">
Thank you in advance.

From the scrrenshot it looks like a tooltip. Something like when we mouse over Google title in https://www.google.co.in/.
To verify tooltip we can get the attribute 'title' and verify.
Example : in https://www.google.co.in/. tooltip is placed in title attribute as below.
title="Google"
<div id="hplogo" style="background-size:272px 92px;height:92px;width:272px" title="Google" onload="window.lol&&lol()" align="left">
For your scenario, the displayed tip message is available in 'oninvalid' attribute as below. So get this attribute value and validate it.
oninvalid="this.setCustomValidity('Email Cannot Be Empty')"

If the element is not inside a iframe, then you can directly try as follows:
String emailId = driver.findElement(By.id("email")).getText()
// write string equals login here comparing emailId that is captured and the one you want to compare to.
if not, first find the iframeand switch to it and then use above code to find the element. More detailed answer related to switching b/w frame is here
Finding the elements in the Pop-up:
Instead of clicking on the Locate Element button (of Firebug) first, Right click on the element you want to find in the Pop-up, and select Inspect with Firebug, which gives the corresponding HTML code for the element.

This is a bit late in the game but the way you get the custom validity message and not the generic one you have to call the reportValidity() event within JavaScript in Selenium. You'll see a driver.executeScript() method and this is where you must call the reportValidity event on the element being validated. This is how I did it:
wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions
.ElementToBeClickable(By.CssSelector("input#NewPassword.form-control")));
IWebElement input = driver.FindElement(By.CssSelector("input#NewPassword.form-control"));
input.SendKeys(string.Empty);
IWebElement form = driver.FindElement(By.TagName("form"));
form.Submit();
driver.ExecuteScript("document.getElementById('NewPassword').reportValidity();");
Assert.AreEqual("New password required", input.GetAttribute("validationMessage"));

How to click on an element using its Id and Value attributes together?

I am trying to click on some button (which becomes enabled after all of the fields are fill in):
<div class="savCancelContainer">
<input type="button"
value="Save"
translatekey="ACTVITY_DETAILS_SAVE_BUTTON"
class="translate" id="submitActivityDetails"
style="background-color: rgb(0, 125, 195);">
The programmers of the web-page have changed it for some reason, and now my code is no longer working correctly (the button doesn't get clicked on):
driver.findElement(By.id("submitActivityDetails")).click();
I also tried finding it by xpath, with no success.
Is there any way to click the button using the Id and Value attributes together?
Any other ideas?
Similar pages and dialogs are still working fine...

You need to create a xpath which will contain both the attribute:
//input[#id='submitActivityDetails'][#value='Save']
And Click event can be triggered in the following way:
driver.findElement(By.xpath("//input[#id='submitActivityDetails'][#value='Save']")).click();
Lemme know if it helps!

Additionally you can use css seelctor to perform that action too.
[id='submitActivityDetails'][value='Save']

No able to select particular check box using Selenium (Java)

I want to click on Store Pickup Available checkbox on following page
http://www.target.com/c/pants-shorts-baby-toddler-boys-clothing/-/N-59yk1#navigation=true&viewType=medium&sortBy=newest&isleaf=true&navigationPath=59yk1&parentCategoryId=9976007&facetedValue=/-/N-59yk1&RatingFacet=0&categoryId=139007
And the particular HTML part has
<input type="checkbox" name="facetId" id="in store, onlineCheckbox3"
value="10058540" omniture="Store Pickup Eligible">
I tried many thing By.id() , By.cssSelector() and xpath also.
Can someone try and tell me the working code ... in-between I will continue trying.

The problem is the checkbox you want to click is hidden initially. You can click it with something like this:
driver.findElement(By.xpath("//a[contains(text(),'in store, online')]")).click();
driver.findElement(By.xpath("//span[contains(text(),'Store Pickup Eligible')]/../../input")).click();
This will expand the element "in store, online", then click the checkbox labelled "Store Pickup Eligible".

It will select By.id which you need to write
<input type="checkbox" name="facetId" id="facetId"
value="10058540" omniture="Store Pickup Eligible">

You can find this checkbox by CSS using: [id*='onlineCheckbox3']. As Richard stated, you must click the category to show the element first. Find this by: [id=dimensions]>ul>li:nth-child(9) a. Sometimes clicking an a doesn't work (depending on the html structure), and you must click an element inside the anchor, swap that out for span and it should work. I prefer all CSS selectors when locating elements, but you can use whichever method you prefer.

tapestry form type=image in input not working

I am trying to use an image for a submit buttin like this
<input t:id="submitButton" t:type="image" type="image" src="images/h_logon_button.png"/>
but when i render the page, i get this error
Unable to resolve 'image' to a component class name.
How do I use an image to create the submit button. if I use css, the image disappears after validation fails.
Any ideas?
Tx

CSS will work. It sounds like another CSS rule with higher specificity is applied to the button on failed validation. Just inspect the button and see which rule overwrites it.
The error you are seeing is due to the t:type="image". Here you are telling tapestry that your input should be of component type image. You can fix this in three ways:
Remove the t:id="submitButton" and t:type="image" so that your submit will just be a plain old html submit
change the t:type to submit like t:type="submit"
Remove the t:type="image" and add a component relating to your provided id like #Component(id="submitButton") private Submit submitButton;

Tapestry has a specific component, ImageSubmit, for your situation.

How to manipulate the history of the web page?

Here is my what I have
<div id=A></div>
<div id=B></div>
<input type="button" value="ChangeA" onClick="createTableA();">
<input type="button" value="ChangeB" onClick="createTableB();">
So in my jsp file, I use javascript and jQuery to manipulate the content of those two div dynamically. For example, if I click on changeA, the function createTableA() will dynamically manipulate <div id=A></div> and append a table to it. So my question is if I click on changeA, then click changeB, how can I manipulate the history so that if I click the back button, I go back to the content of Table A

I've been using the jQuery History plugin for just this sort of thing and it's been working pretty well for me.
Each "page" is referenced by a hash in your URL. That way "changing pages" doesn't refresh the page, but does store the page state in history and allow for bookmarking.
EDIT
I'll expand on the example given in the link to apply more for your situation.
function loadTable(hash)
{
if(hash == "ChangeA")
createTableA();
if(hash == "ChangeB")
createTableB();
}
$(document).ready(function() {
$.history.init(loadTable);
$("input[id^='Change']").click(function(){
$.history.load(this.attr('value'));
return false;
});
});
What the above code does is sets an event handler on all input tags whose id begins with 'Change' so that when those buttons are clicked, loadTable is called. If you change your buttons to look like this:
<input type="button" id="ChangeA" value="ChangeA">
<input type="button" id="ChangeB" value="ChangeB">
clicking button A will put this http://www.example.com/yourpage.html#ChangeA in the address bar and load table A, also adding that table change to the browser history.

The native 'location' object has a 'hash' property that you could use for navigation in AJAX/JS applications.
You could use History plugin or Address plugin.
Address plugin gives more flexibility and recommended for more complex apps.

You should check out Ben Alman's Back Button and Query Library Great api for mucking with the browser history and has some great examples to get you started.

YUI also has a browser history manager: YUI3: http://developer.yahoo.com/yui/3/history/ or YUI 2: http://developer.yahoo.com/yui/history/