Datepickers and Date Object | Bondar Academy

Lesson Summary

This lesson focuses on automating the DatePicker component, which presents challenges due to its design and the dynamic nature of time. Specifically, selecting dates can be problematic if hard-coded, as the date will change when the test is run on a different day. Key Concepts DatePicker Design: The DatePicker consists of individual cells organized in rows, with some cells displaying dates from the previous month, known as bounding month dates. Automation Strategy: To automate date selection, we can filter out bounding month cells and select only the active dates. Automation Steps Use a locator to access the DatePicker input field. Expand the DatePicker to reveal the calendar. Select all day cells while excluding those with the boundingMonth class. Use the contains method to select the desired date. Dynamic Date Selection To avoid hard-coded values, utilize the JavaScript Date object to dynamically select dates: let date = new Date(); date.setDate(date.getDate() + 5); // Example: Select a date 5 days from today Extract the necessary values using methods like getDate() and getFullYear() to construct dynamic assertions for your tests. Conclusion In summary, when automating DatePickers, ensure you handle the active month correctly, filter out bounding month dates, and leverage the JavaScript Date object for dynamic date selection. This approach will enhance the reliability of your automated tests.