How To Check If An HTML5 Validation Was Triggered Using Selenium?

January 30, 2023 Post a Comment

If testing my webapp using Selenium. All the form validation in the webapp is done using HTML5 form validations. Is there any way to assert if a form/input validation was triggered

Solution 1:

A search like this does the trick in HTML5-aware browsers (using Java and WebDriver, but should be usable anywhere else, too):

// looks for an element that has been marked as required on a submit attempt
WebElement elem1 = driver.findElement(By.cssSelector("input:required"));
// looks for an element that has been marked as invalid on a submit attempt
WebElement elem2 = driver.findElement(By.cssSelector("input:invalid"));

The CSS pseudo classes available are:

Solution 2:

Attribute validationMessage will return the message, that will be showing if validation fails:

WebElement username = driver.findElement(By.id("username"));    
String validationMessage = username.getAttribute("validationMessage");

If element has required attribute, browser will show the message after submitting the form:

boolean required = Boolean.parseBoolean(username.getAttribute("required"));

You can check whether entered value is valid:

boolean valid = (Boolean)((JavascriptExecutor)driver).executeScript("return arguments[0].validity.valid;", username);

Not: message text and validation is customizable. If you want to test customized validation and message.

Here test code for custom validation(Java, TestNG):

Assert.assertTrue(Boolean.parseBoolean(username.getAttribute("required")), "Username is required and message should be showin");
Assert.assertEquals(username.getAttribute("validationMessage"), "My custom message", "Message text control");

username.sendKeys("@vasy a^");
Assert.assertTrue((Boolean)((JavascriptExecutor)driver).executeScript("return arguments[0].validity.valid;", username), "Username should not contain not special characters");

Solution 3:

Testing for the presence of the HTML5 attributes that are responsible for the validation is adequate enough. Actually triggering the browser-implementation of the validation is not really testing your work (but instead testing the browser itself), which might be nice but in my opinion is unnecessary. How to do that is already covered in the top answer. My answer is just to expand with a defence-in-depth approach to form-field validation.

It is absolutely necessary that you have your own validation in addition to the HTML5 rules, for when HTML5 validation is not supported (or is bypassed).

The first problem is that the HTML5 validation takes precedence and prevents you from testing your own validation. So how to approach this?

Test HTML5 validation attributes are present

To test it has been used, use assertAttribute:

<tr>
    <td>assertAttribute</td>
    <td>id=myFieldId@required</td>
    <td></td>
</tr>

If for some reason you're using the XML syntax required="required", you will need to assert the value is "required".

Testing fallback validation

JavaScript

If your HTML5 validation prevents your JavaScript validation from returning errors, after you have asserted that the HMTL5 validation attributes were present, you can remove the HTML5 validation attributes to test the fallback JavaScript validation:

<tr>
    <td>runScript</td>
    <td>document.getElementById('myFieldId').removeAttribute('required')</td>
    <td></td>
</tr>

Now you can test your JavaScript validation. To remove email validation, you will need to set the field's type attribute to text:

<tr>
    <td>runScript</td>
    <td>document.getElementById('myFieldId').setAttribute('type','text')</td>
    <td></td>
</tr>

Test server-side validation

Even when you use HTML5 validation and JavaScript validation, if you are submitting to a server, you will need to test your server validates these fields, too.

Calling a form's submit() function will submit the form without calling any validation. Selenium's submit command does the same thing:

<tr>
    <td>submit</td>
    <td>name=myFormName</td>
    <td></td>
</tr>

After waiting for the next page to load, you can check the expected errors are present.

Solution 4:

In addition to the answer from @Slanec: add also the following row (using C#, but it should be the same in Java or other languages):

Assert.IsTrue(true,"<The error message which appears>",elem1);

This is in case you want to check if the message is visible.

Build Html5