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="[email protected]" 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. Consider updating the Question with formatted text based relevant HTML, code trials and error stack trace. — undetected Selenium
– undetected Selenium, Commented Jul 11, 2020 at 22:19
Does this answer your question? How to handle HTML constraint validation pop-up using Selenium? — TylerH
– TylerH, Commented Nov 23, 2022 at 14:23

undetected Selenium · Accepted Answer · 2020-07-12 07:06:54Z

0

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:

answered Jul 12, 2020 at 7:06

undetected Selenium

194k44 gold badges304 silver badges387 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vin Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Solution

References

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution

References

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related