How to read HTML5 Constraint validation error message using javascript in Selenium

Question

I have a form that has required fields when I try to submit the form with blank required fields an error message is displayed as shown below in the screenshot. with Selenium in Java its not possible to identify if the error message is displayed as these errors are HTML5 and they don't exist in Dom. So I googled and found that we can use Javascript. But when I used that I am getting false every time even though the message is displayed. Your help would be greatly appreciated.

WebElement field = driver.findElement(By.xpath('//input[@id=\'frstNm\']'))

WebElement registerBtn = driver.findElement(By.xpath('//div//button[text()=\'Register\']'))

registerBtn.click() Boolean is_valid = ((js.executeScript('return arguments[0].checkValidity();', field)) as Boolean)

String message = ((js.executeScript('return arguments[0].validationMessage;', field)) as String)

println(is_valid)

html:

<div class="row" style="border: solid 1px white">
<input id="prtyId" name="prtyId" type="hidden" value="">

<div class="col-xs-3 col-md-3" style="border: solid 1px white">
<div class="row">
<div class="col-xs-10 col-md-10 required">
<label for="frstNm" class="control-label">First Name</label>
<input id="frstNm" name="frstNm" onkeypress="return event.charCode < 48 || event.charCode > 57" type="text" class="form-control" required="required" value="" maxlength="50">
</div>
</div>
<br>

<div class="row">
<div class="col-xs-7 col-md-7 required">
<label for="mi">Middle Initial</label>
<input id="mi" name="mi" onkeypress="return event.charCode < 48 || event.charCode > 57" type="text" class="form-conrol" value="" maxlength="1">
</div></div>
<br>

<div class="row">
<div class="col-xs-10 col-md-10 required">
<label for="lstNm" class="control-label">Last Name</label>
<input id="lstNm" name="lstNm" onkeypress="return event.charCode < 48 || event.charCode > 57" type="text" class="form-control" required="required" value="" maxlength="50">
</div>
                                                    </div>
<br>


<div class="row">
<div class="col-xs-10 col-md-10 required">
<label for="suffix">Suffix</label><input id="suffix" name="suffix" onkeypress="return event.charCode < 48 || event.charCode > 57" type="text" class="form-control" value="" maxlength="5">
</div>
</div>
<br>

<div class="row">
<div class="col-xs-10 col-md-10 required">
<label for="socialSecurity" class="control-label">SSN</label>
<input id="socialSecurity" name="socialSecurity" onkeypress="return event.charCode >= 48 &amp;&amp; event.charCode <= 57" pattern="\d{3}-\d{2}-\d{4}" placeholder="XXX-XX-XXXX" type="text" class="form-control" required="required" value="" maxlength="11">
</div>

</div>
<br>

<div class="row">
<div class="col-xs-10 col-md-10 required">
<label for="dateOfBirth" class="control-label">Date of Birth</label>
 
 
 <input id="dateOfBirth" name="dateOfBirth" onkeypress="return event.charCode >= 48 &amp;&amp; event.charCode <= 57" pattern="\d{2}/\d{2}/\d{4}" placeholder="MM/DD/YYYY" type="text" class="form-control" required="required" value="" maxlength="10">
</div>

</div>
<br>

<div class="row">
<div class="col-xs-7 col-md-7 required">
<label for="gender" class="control-label">Gender</label>
<select id="gender" name="gender" class="form-control" required="required">
 <option value="">----Select----</option>
  <option class="form-control" value="M">Male</option><option class="form-control" value="F">Female</option><option class="form-control" value="O">Other</option>
  </select>
</div>

</div>
<br>

<div class="row">
<div class="col-xs-10 col-md-10">
<label for="emailAddress">Email Address</label>

 <input id="emailAddress" name="emailAddress" placeholder="mailbox@domain.tld" type="email" class="form-control" value="" maxlength="50">
</div>
</div>
<br>

</div>

Please read why a [screenshot of HTML or code or error is a bad idea](https://meta.stackoverflow.com/questions/303812/discourage-screenshots-of-code-and-or-errors). Consider updating the Question with formatted text based relevant HTML, code trials and error stack trace. — undetected Selenium, Jul 11 '20 at 22:19
Does this answer your question? [How to handle HTML constraint validation pop-up using Selenium?](https://stackoverflow.com/questions/55223934/how-to-handle-html-constraint-validation-pop-up-using-selenium) — TylerH, Nov 23 '22 at 14:23

score 0 · Answer 1 · answered Jul 12 '20 at 07:06

The error message you are referring i.e. Please fill out this field is the outcome of Constraint API's element.setCustomValidity() method.

Note: HTML5 Constraint validation doesn't remove the need for validation on the server side. Even though far fewer invalid form requests are to be expected, invalid ones can still be sent by non-compliant browsers (for instance, browsers without HTML5 and without JavaScript) or by bad guys trying to trick your web application. Therefore, like with HTML4, you need to also validate input constraints on the server side, in a way that is consistent with what is done on the client side.

Solution

To retrieve the text Please fill out this field you have to induce WebDriverWait for the elementToBeClickable() and you can use either of the following java Locator Strategies:

Using CSS_SELECTOR:

System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("input#lstNm"))).getAttribute("validationMessage"));

Using XPATH:

System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@id='lstNm']"))).getAttribute("validationMessage"));

References

You can find a couple of relevant discussions in:

Thanks for your comment. it is working fine. The mistake I did was without entering the data into the field I was trying to check the message and so its returning false everytime. I thought the check is done only when the popover message is displayed which is wrong. — Vin, Jul 13 '20 at 13:39

How to read HTML5 Constraint validation error message using javascript in Selenium

1 Answers1

Solution

References