How to check if an HTML5 validation was triggered using selenium?

Question

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 using Selenium?

Curcio

Answer 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:

• :required
• :optional
• :valid
• :invalid

Diocletian

Also, sorry for the late answer. I guess it's still better than nothing at all :). – Covetous

Answer 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");

Overburdensome

Answer 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.

Amoroso

While I agree that you should test the server-side validation, there's nothing more annoying than someone not answering the question asked. Of course it is desirable to test this client-side feature, so your customers don't find the bugs for you! – Osmanli

@AlexWorden The assertAttribute statement is enough to test HTML validation is in place. Because the implementation of the HTML validation is outside of the author's control, you probably shouldn't test the execution of it since it is very difficult given the moving platform that is the hostile environment of the modern web browser. I think I answered the question and then some more. – Amoroso

As an aside, HTML validation is probably not a mature enough product to solve a real-world problem with. Low-skilled users find it very disorienting and to be frank, the user experience is still a little poor. You really shouldn't use it, but if you do, then I think it is adequate to ensure the attributes are in place and trust it will do its job in the browsers that support it. – Amoroso

My whole answer also assumes all validation is in place, because I'm detailing how to unravel the testing problems that arise because HTML5 Validation makes the equivalent Javascript validation redundant which makes the equivalent Server-side validation redundant. So I'm describing how to disable each mechanism in turn so we can test all 3 validation layers thoroughly. - Otherwise your customers WILL find the bugs for you!!! – Amoroso

Answer 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.

Cusk