Question

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.

Answer 1

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.