How to get HTML5 validation message with selenium?

Question

Please see this website.

After click log in i have this User credentials form and after try to login with missing Email Address or Password i got this message:

So i try to find this element by print all the page HTML ( driver.getPageSource() ) but this text is missing.

Any idea how to verify that i have this error message ?

Answer 1

Attribute validationMessage will return the message, that will be showing if validation fails:

WebElement username = driver.findElement(By.name("uname"));    
String validationMessage = username.getAttribute("validationMessage");

If element has required attribute, browser will show the message after submitting the form:

boolean required = Boolean.parseBoolean(username.getAttribute("required"));

You can check whether entered value is valid:

boolean valid = (Boolean)((JavascriptExecutor)driver).executeScript("return arguments[0].validity.valid;", username);

---

Not : message text and validation is customizable. If you want to test customized validation and message.

Here test code for custom validation(Java, TestNG):

 Assert.assertTrue(Boolean.parseBoolean(username.getAttribute("required")), "Username is required and message should be showin"); Assert.assertEquals(username.getAttribute("validationMessage"), "My custom message", "Message text control"); username.sendKeys("@vasya "); Assert.assertTrue((Boolean)((JavascriptExecutor)driver).executeScript("return arguments[0].validity.valid;", username), "Username has special characters");

Answer 2

The validation messages are not the part of your DOM. They are generated because your input fileds have required attribute. If you see the HTML of your fields -

<input type="text" placeholder="Enter Username" name="uname" required="">

You can see it has required attribute turned on. Check this out. You can verify that your fields have this required attribute or not, like this-

WebElement inputElement = driver.findElement(By.name("uname"));
JavascriptExecutor js = (JavascriptExecutor) driver;  
boolean isRequired = (Boolean) js.executeScript("return arguments[0].required;",inputElement)
if(isRequired )
{
   //element is required and validation error will popup if the field is empty.
}

There is no need to care about whether the message appears or not because that will handled by the browser.

Answer 3

I found a way to do this by calling the element's reportValidity() method within the Selenium test. In C# we can use driver.executeScript(). For Java I'm sure it's something similar. If you don't execute the script then you have to look for the generic message, which is "Please fill out this field". Here's the code sample:

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