How Do I Test Error Conditions In HTML5 Pages With Cucumber?

I am testing web application behavior with Cucumber (using Selenium and Watir under the hood). My web app has HTML5 pages and makes use of the new 'required' attribute. If I have a

Solution 1:

I haven't worked with the HTML5 required attribute before. But from the looks of it, that required attribute just alerts the browser that that form field must be filled out (i.e. the DOM doesn't change).

It seems to me that it would be reasonable to just assert that that required attribute is present in the HTML of the appropriate form fields. That test should pass for BOTH HTML5 browsers and non-HTML5 browsers.

Trying to assert anything more than that seems to me like you'd be testing the functionality of the browser.

Solution 2:

Other than validating that the HTML created is correct to enable the browser validation, I'm not sure how much you can do that doesn't amount to testing the browser and not your code.

Using watir or watir-webdriver you could use .type to validate that the input has the proper type (e.g. email) set, which is one thing that controls the browser validation. The other is the presence of the required attribute which is a little tricker Potentially .attribute_value("required") might work, but normally that returns the value of an attribute, so not sure how that method would respond to a boolean attribute. Other alternatives might be to look at .attribute_list and

Seems also like a good reason here for Watir to add a .required? method to input elements that would allow you to easily check if that attribute has been set. So I asked for that feature https://github.com/watir/watir-webdriver/issues/189

Solution 3:

You should have CSS selectors in place to target the particular field and look for an error identifier. If it is visible or not. A detailed step definition needs to be there.

Solution 4:

One solution would be to not use Cucumber to test the error behaviour but instead test that you have configured the fields.

So in Cuke terms you might have something like

Given I am filling in my form
Then I should see that my name is required

and then write something that looks for the required option on the html tag for the name field.

Anymore than that is testing the browser not your application.