Special Input Elements - Instructions

Event enabled examples of some complex ui input elements.

The page shows a color, file, various date/time controls.

These all have a set of list items that show the events that are triggered.

It is important to note that while these seem complex, the browser has implement them.

Unless we have customised them for the application, we don’t really need to test the UI, mainly the result of using the UI to set a value for the input field.

The date/time inputs can have min and max values set for validation, as you’ll see in the form section.

One of the date controls has a min and max set.

Explore the Events on the Controls

For each of the controls you are encouraged to interact with them using they keyboard and the mouse to see what events fire for each control.

Try tabbing between the controls and using keyboard.

Explore Min Max

For the date control with min and max set, you can see that the min and max has an effect on the calendar range shown, but you can still amend the date to be outwith the range.

Validation will only occur when in the context of a form. Or if we add additional JavaScript validation triggered by events.

Automating

For each of the controls.

  • Try to automate them with your tool of choice.
  • You can use the event listing to assert on, or assert on the value and state from the control itself.

You can learn more about Testing Input Elements in our reference section.