如何在Selenium中使用javascript读取HTML5约束验证错误消息

Question

我有一个有必填字段的表单，当我尝试提交有空白必填字段的表单时，屏幕截图中会显示如下所示的错误消息。对于Java中的Selenium，它不可能识别是否显示了错误消息，因为这些错误是HTML5，并且它们不存在于DOM中。于是我谷歌了一下，发现我们可以使用JavaScript。但当我使用它时，我每次都得到假，即使消息显示。您的帮助将不胜感激。

WebElement字段=driver.findElement（By.xpath('//input[@id='frst nm']'))

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

registerbtn.click（）Boolean is_valid=（（js.executescript（“return arguments[0].checkvalidity（）；”,field））as Boolean）

字符串消息=((js.executescript('return arguments[0].validationmessage；‘,field))作为字符串）

打印n(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="[e-mail]" type="email" class="form-control" value="" maxlength="50">
</div>
</div>
<br>

</div>

Answer 1

您引用的错误消息（请填写此字段）是Constraint API的Element.SetCustomValidity()方法的结果。

注意:HTML5约束验证并不消除对服务器端验证的需求。即使预计无效表单请求要少得多，无效表单请求仍然可以由不兼容的浏览器发送（例如，没有HTML5和JavaScript的浏览器），或者由试图欺骗您的web应用程序的坏蛋发送。因此，与HTML4一样，您也需要验证服务器端的输入约束，其方式与客户端的操作一致。

要检索文本，请填写此字段，您必须将WebDriverWait引入ElementToBeclickable()，您可以使用以下任一java定位器策略：

>

使用css_selector:

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

使用XPath:

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

您可以在以下文件中找到一些相关的讨论：

• 如何使用Selenium处理html5约束验证弹出窗口？
• python中的Selenium：NosuChelementException：消息：没有这样的元素：无法定位元素