How do I test if HTML5 validation was triggered for a required field with Selenium? How do I test if HTML5 validation was triggered for a required field with Selenium? selenium selenium

How do I test if HTML5 validation was triggered for a required field with Selenium?


From Selenium documentation:

Currently the css selector locator supports all css1, css2 and css3 selectors except namespace in css3, some pseudo classes(:nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type, :only-of-type, :visited, :hover, :active, :focus, :indeterminate) and pseudo elements(::first-line, ::first-letter, ::selection, ::before, ::after).

That mean that the :required, :invalid and :valid are not pseudo element on which you can select of interact with.

I work around this limitation by doing a VerifyNotText for a text that is on the following page. Not ideal, but work.


Currently I'm covering internal company project(something like employee management system) with selenium tests. So there are a lot of mandatory inputs on the form. If any is empty- then the whole form gets validated. And text labels near input becomes(become) red and appropriate validator message appears.SO my approach to check validator's proper work is quite simle: - i wrote get color text method for getting the color of labels near input ( if it is red, then validator has worked on submitting the form)

public String jsGetColor(String css){        JavascriptExecutor js = (JavascriptExecutor) driver;        StringBuilder stringBuilder = new StringBuilder();        stringBuilder.append("var x=$(\'"+css+"\');");        stringBuilder.append("return x.css('color')");        String res= (String) js.executeScript(stringBuilder.toString());        return res;    }// the way i use this method:String defaultTimeOffLabelColor=(String)jsGetColor(propertyKeysLoader("rms.home.timeoffsportlet.addnewtimeoff.typetimeofflabel"));        driverClickByCssSelector("rms.home.timeoffsportlet.addnewtimeoff.submitbutton");        String validationTimeOffLabelColor=(String)jsGetColor(propertyKeysLoader("rms.home.timeoffsportlet.addnewtimeoff.typetimeofflabel"));        //verifying validation works properly using Assert mechanism Assert.assertFalse("validation is invalid", validationTimeOffLabelColor.equals(defaultTimeOffLabelColor));

Also i should add that if validator works then error message appears. So you can find locator of this message and compare appropriate text.In oher cases when validator hasn't work on e.g. submitting the form the style of validator's message will be something like "display:none". So to understand that everything is OK you can simply check wheter the mesage visible or not:

driver.findElement(By.cssSelector(...blabla...)).isDisplayed()

And the last point. If you would like to validate the validator's message.

public void addNewTimeOffValidatorsMessagesCheck(String expectedValidationMsg)  {        Assert.assertTrue(driver.findElement(By.cssSelector(propertyKeysLoader("rms.home.timeoffsportlet.addnewtimeoff.validationmessage"))).getText().trim().equals(expectedValidationMsg));    } addNewTimeOffValidatorsMessagesCheck("Timeoff type was not selected!");

Hope now it becomes a lil bit more clear to you)


I think that this could be tested by checking whether the element has an attribute 'required' in the HTML.Sample code would be:-usernameField.getAttribute("required")

If it is not null then we can be sure that the validation was triggred.