How to check if HTML5 check has been checked for required field with Selenium?

Question

Let's say I have the following HTML5 snippet:

<form method="get" action="logginValidation.php"> <input type="text" required="" name="username"> <button class="btn" type="submit">Se connecter</button> </form> 

Using selenium, I leave the field blank and press the button. The form is not validated as I would expect, but how can I verify that the this field is invalid and that there is a related message to the this field.

Now one thing that I have not explored is that I use Twitter Bootstrap with JavaScript libraries loaded. I need to check if these librairies don't play tricks on me and that the check does come from the Firefox browser.

Answer 1

From Selenium documentation:

Currently the css selector supports all css1, css2 and css3 selectors, except for the 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 ,: undefined) and pseudo elements (:: first-line, :: first-letter, :: selection, :: before, :: after).

This means that: required ,: invalid and: valid are not a pseudo-element on which you can select an interaction.

I will get around this limitation by doing VerifyNotText for the text that is on the next page. Not perfect, but working.

Answer 2

I am currently covering the company's internal project (something like an employee management system) using selenium tests. Thus, there are many required contributions in the form. If any of them is empty, then the whole form is checked. And the text labels near the input become (become) red, and the corresponding validator message appears. So, my approach to validating the validator is pretty simple: - I wrote a colored text method to get the color of the labels near the input (if it is red, then the validator 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 have to add that if the validator is working, an error message appears. Thus, you can find the locator of this message and compare the corresponding text. In other cases, when the validator does not work, for example. when submitting a form, the validator message style will look like "display: none". Therefore, to understand that everything is in order, you can simply check if mesage is visible:

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

And the last one. If you want to check the validator 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!"); 

I hope now it will become more clear to you)

Answer 3

I think this can be tested by checking if the element has an “required” attribute in HTML. Sample code: usernameField.getAttribute ("required")

If it is not null, we can be sure that the check has been triggered.