Quality assurance Date pickers are a ubiquitous tool in forms and are used for a variety of data from birthdays to travel dates. This guide explains how you can find the most common errors in a date picker by exploratory testing. These tests give you a pretty good idea about the quality of a date picker implementation without the need for developer know-how.
Check the settings
We’re going to test the date picker of a multi-step web form. The expected input date is the first day of a continuous service delivery, think power supply or a similar service. The date picker is part of a multi-step service registration and is positioned in step 2. It’s possible to click on the buttons “Next” and “Previous” to navigate between the steps. The date picker input is required for registration and it’s not possible to proceed without a valid date.
What’s the correct input?
To test a date picker’s behaviour for mistakes it’s mandatory to define the validity of the input first. In our case we expect the user to give us a valid date in the near future:
The expected date format
We expect the user to give us a day, month and year separated by dots, a common way of displaying dates in Austria, Europe. The zero before a one-digit number is allowed but not necessary for a valid input.
This definition gives us four valid input possibilities:
Check the range of valid days
- The earliest possible day for delivery is today + 2 days, excluding Saturday and Sunday
- The latest possible day for delivery is today + 3 months and 2 days
Every other kind of input should produce a clear and informative error message for the user. The date picker disables days outside the valid date range.
How can the user interact with the date picker?
The date can be inserted manually into an input field or can be selected via a corresponding calendar. The user is not able to define a time range and there is no time input for the selected day. When the date picker calendar is used, the selected day is inserted in the format DD.MM.YYYY.
Be a demanding user
The developer will have done her best to implement a solid and robust date picker. But every user has a mind of his own so be demanding creative.
Check the basics first
Before going into details use your most trustworthy browser (sorry IE) and test the most basic requirements:
Give some valid input
First of all, we want to check if the date picker is working at all. For this case, we insert a day in every allowed format and check for expected behaviour. Insert days in every allowed format manually and via calendar selection. Don’t forget to try the first and last day of the date range, as they are prone to errors.
Answer the following questions for yourself while testing:
- Is the input field visibly marked as required?
- Is the expected date format communicated to the user?
- Are dates within the date range recognisable in the calendar?
- Is a selected day visually marked in the calendar?
- Is there a visual feedback for positive validation?
Give some invalid input
Next, try some invalid dates and date formats and check if each one gives a comprehensive error message. Check if proceeding to the next step is impossible. Try proceeding without any input.
- Does every error produce a correct and informative error message?
- Is the error message visibly connected to the input field?
- Is the moment of displaying the error message helpful? Consider the possible difference between empty and wrong input.
Test the date picker in its natural habitat
The date picker in question is probably not alone but placed inside a complex form, sometimes in direct connection to other input fields. For this reason, keep in mind to test the date picker not only by itself but always in the given setting.
- Move forward and backwards in the form using the “Back” and “Next” buttons of your form. Check if the input is visible when you get back to the date picker.
- Use the back and forward buttons of your browser to navigate between the steps. Check if the form and the date picker’s behaviour is correct.
- Check the expected behaviour of error messages when navigating between the steps. What happens when you have an error and move back? What happens when the input field is empty and you move back and forth?
- Try reloading the whole page. Is everything gone, and should it be?
Consider dependencies on other input fields. If your date picker input needs other information or settings beforehand, check what happens if those inputs are missing.
- Is the date picker disabled or invisible when it should be?
- If the date picker input is missing, should something else in your form be disabled or activated?
Test the flexibility of your date picker
You expect a website to run on all kind of screen sizes and devices and you expect it to do it well. Open your application on all supported devices and browsers and test for input, error messages and calendar usability.
Test if it runs on mobile devices
Always test with real mobile devices and not only on small desktop browsers. While some errors happen on both devices, some errors only happen with the real deal.
- Check if everything is visible and correctly aligned on the small screen.
- Test if the navigation with your fingers is possible and comfortable. Open the calendar view and select a date.
- Give it a try on different devices and mobile browsers, consider iPhones and Android Phones and use different screen sizes.
- Provoke the longest error message your date picker has to offer and test if the text breaks correctly.
- Change the screen orientation from landscape to portrait and the other way round.
Test your browsers and remember to give the Internet Explorer some special care
Test with all supported browsers and spend some extra time with the older versions of the Internet Explorer. Often special solutions are needed to display content and functionality on those browsers correctly, so they do need some extra care.
- Check navigation, validation and error handling on all supported Browsers
- Use the calendar date picker.
- Resize browsers on the desktop and check if the changes in screen size are handled correctly.
- The emulation of older versions is possible via the IE developer tools.
Evaluation of website accessibility is a comprehensive topic deserving a blog post or more on its own. Some simple tests can help to check if the basics are met.
- Let go of your mouse and try navigating the date picker with keyboard only.
- Check the contrast of the colours used in the date picker. Think a moment about the text size. Is everything clearly legible?
- Take a deeper look on your feedback and error messages and think about the people using the date picker. Are the messages clear and easy to understand for your target group?
High-quality exploratory testing takes some time, experience and creativity but it can take you a long way. Well defined requirements are the best foundation to build your test cases on and will give you a solid picture of the quality of your application. And last but not least, have fun exploring the limits of your date picker and do your best to break it 😉