selenium - Check if "Please enter an email address" message appears

Question

Given a simple page:

<form>
  <input type="email">
  <button>click</button>
</form>

If I enter anything in text field that is not e-mail and click the button, Please enter an email address message appears.

Is there a way to to check if the message appears using Selenium or Watir? As far as I see, nothing new appears in browser DOM.

Since the page is using e-mail check that is built in feature of a browser, does it even make sense to check that error message appears? It is at the same level as checking if browser scroll bar works. We are no longer checking the web application, but the platform (browser).

An earlier related question here on SO is: How do I test error conditions in HTML5 pages with cucumber?

Answer 1

You could try like this

JavascriptExecutor js = (JavascriptExecutor) driver;
driver.findElement(By.cssSelector("input[type='email']")).sendKeys("asd");
Object s=js.executeScript("return document.getElementById("a").validity.valid");
System.out.println(s);
driver.findElement(By.cssSelector("input[type='email']")).sendKeys("asd@gmail.com");
s=js.executeScript("return document.getElementById("a").validity.valid");
System.out.println(s);

Output for above line is

false
true

So based on that you can conclude that whether the given value is valid or not.

Below javascript logic will return true/false based on the validity of the field

document.getElementById("a").validity.valid

P.s : I assume input tag has id "a"