Selenium WebDriver (Java) : Handle Field Validation Message

Question

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.

Answer 1

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 iframe and 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.

Answer 2

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')"

Answer 3

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"));