Test Case Categories
Date Picker Testing - Key Test Cases for Calendar UI and Date Selection Validation
Date pickers enhance user experience by simplifying date selection, but they need thorough testing to ensure intuitive behavior and functional accuracy. This guide outlines essential test cases for validating calendar display, correct date formatting, restricted date handling, keyboard accessibility, and proper event triggering. Use these test cases to ensure your date picker performs reliably across all usage scenarios.
| Nr | Test Idea | |
|---|---|---|
| 1 | Check the parent page testcases for general input field testing guidelines | |
| 2 | Check that date picker would open up when clicking at the field/calendar icon | |
| 3 | Check that currently saved date would be displayed at the date picker when opening it up | |
| 4 | Check that correct month and year would be displayed when opening the date picker for an empty field | |
| 5 | Check if the current date is visibly different at date picker | |
| 6 | Check if currently selected date is visibly different at date picker | |
| 7 | Check if the name of the days are displayed above the calendar and that they would be correct ones | |
| 8 | Check if months have the correct number of days in the calendar (especially February) | |
| 9 | Check if the correct number of days is displayed also for leap year | |
| 10 | Check if the date is saved in the correct format when selecting the date from the date picker | |
| 11 | Check if dates that are not allowed are disabled in the calendar (past dates for example) | |
| 12 | Check that restrictions to the date picker are same as for typing to the field | |
| 13 | Check if disabled dates are visibly different at date picker | |
| 14 | Check that date picker would not open up if the field is disabled | |
| 15 | It should be possible to easily change month and year from the date picker | |
| 16 | Check what is the minimum and maximum date that you can select with date picker | |
| 17 | Check how well can you use date picker with keyboard only | |
| 18 | If any event should be called on entering a date to the date field then check if it is also called when entering a date with date picker | |
| 19 | Check how date picker is positioned when opening it at the edge of the browser - it should be fully visible |