Как читать сообщение об ошибке проверки HTML5 ограничений, используя javascript в Selenium

Question

У меня есть форма с обязательными полями, когда я пытаюсь отправить форму с пустыми обязательными полями, отображается сообщение об ошибке, как показано ниже на снимке экрана. с Selenium в Java невозможно определить, отображается ли сообщение об ошибке, поскольку это ошибки HTML5, и они не существуют в Dom. Я погуглил и обнаружил, что мы можем использовать Javascript. Но когда я использовал это, я получаю ложь каждый раз, даже если сообщение отображается. Мы будем очень благодарны за вашу помощь.

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)) как строка)

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>

Скриншот формы введите описание изображения здесь

Answer 1

Сообщение об ошибке, на которое вы ссылаетесь, т.е. Пожалуйста, заполните это поле является результатом метода API ограничений element.setCustomValidity().

Примечание. : HTML5 Проверка ограничений не устраняет необходимость проверки на стороне сервера. Несмотря на то, что ожидается гораздо меньше недействительных запросов формы, недействительные запросы все же могут быть отправлены несовместимыми браузерами (например, браузерами без HTML5 и без JavaScript) или злоумышленниками, пытающимися обмануть ваше веб-приложение. Следовательно, как и в случае с 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"));
  

Ссылки

Вы можете найти пару соответствующих обсуждений в:

• Как обрабатывать всплывающее окно проверки ограничений html5 с помощью Selenium?
• селен в python: NoSuchElementException: Сообщение: такого элемента нет: невозможно найти элемент