CODEWITHSUNDEEP
htmlseleniumvalidation
Hugues
Hugues

Reputation: 171

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

Let say I have the following snippet of HTML5:

<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 empty and press the button. The form is not validated as I would expect, but how can I verify that this field is invalid and that there's an associated message with this field.

Now one thing I haven't investigated is that I'm using Twitter Bootstrap with the JavaScript libraries loaded. I have to double check if those librairies aren't playing tricks on me and that the validation is really coming from the Firefox browser.

Upvotes: 4

Views: 3168

Answers (3)

Anuja
Anuja

Reputation: 115

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.

Upvotes: 0

eugene.polschikov
eugene.polschikov

Reputation: 7339

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)

Upvotes: 0

Hugues
Hugues

Reputation: 171

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.

Upvotes: 1

Related Questions