Datepicker Page Object | Bondar Academy

Lesson Summary

In this lesson, we will create a page object for the date picker and demonstrate how to utilize the logic for selecting dates in two different calendar types: the common date picker and the date range selector . Key Concepts The common date picker requires a single click to select a date. The date range selector requires two clicks to select a start and end date. Code reuse is achieved by creating two methods within the page object. Implementation Steps Create a new page object for the date picker. Implement a method for selecting a date in the common date picker: async selectCommonDatePickerDateFromToday(numberOfDaysFromToday) Copy the existing date selection code and modify it to use the method parameter. Call the method in the test and verify the selection. Refactor the code by creating a private method: private async selectDateInCalendar() Implement a second method for the date range picker: async selectDatePickerWithRangeFromToday(startDayFromToday, endDayFromToday) Important Notes Use the same locator for both calendar types: day cell and ng-star-inserted . Follow the DRY principle (Don't Repeat Yourself) by reusing code. Ensure that the tests pass successfully for both calendar types. In summary, we created a new date picker object and reused previously created code to select dates in two different calendars, demonstrating effective code organization and reuse.