Date Selection by Text | Bondar Academy

Lesson Summary

Test Automation of Date Pickers is a straightforward process with some nuances. This lesson focuses on automating the selection of dates in a date picker component of an application. Key Concepts Selecting Dates: Use getByText to select dates based on visible text. Challenges: Different layouts may cause issues, such as selecting the wrong date due to non-unique text. Bounding Months: Dates from previous or next months may be included, complicating selection. Steps to Automate Date Selection Open the date picker by clicking on the input field. Create a locator for active day cells, excluding bounding months using: await page.locator('.dayCell:not(.BoundingMonth)'); Select the desired date using getByText with the exact flag to avoid partial matches. Example Code To select a date, you can use: await page.getByText('15', { exact: true }).click(); Assertions Validate the selected date by asserting the input field's value: await expect(calendarInputField).toHaveValue('July 15'); Summary In summary, when automating date selection: Use getByText with exact to avoid partial matches. Exclude bounding months in your locators. Use assertions to validate the selected date in the input field. In the next lesson, the focus will shift to using a JavaScript date object for dynamic date selection.