Date Selection by Text | Bondar Academy

Lesson Summary

This lesson focuses on automating date pickers in a test application. The key objectives include: Learning to select a date in the date picker by text. Validating the selected date in the input field. Steps to Automate Date Picker 1. **Navigate to the Date Picker Page**: Start by accessing the date picker page in the test application. 2. **Create a Date Picker Form**: Initialize a new form called date picker form . 3. **Locate the Date Picker Input Field**: Use the placeholder to identify the input field: calendarInputField = page.getByPlaceholder('form picker') 4. **Open the Date Picker**: Click on the calendar input field to display the date picker. Selecting a Date To select a date, inspect the calendar structure. For example, to select June 14th : Identify the class names for the current month’s dates. Use a locator to select only the dates in June: WaitPageLocator = page.locator('.DayCellNGStarInserted') Select the date by text: getByText('14') 5. **Handle Exact Matches**: To avoid partial matches, use the exact: true flag when selecting dates. Assertions To validate the selection, assert that the calendar input field displays the correct date: await expect(calendarInputField).toHaveValue('June 1st, 2023') Conclusion In summary, the process involves: Identifying a unique locator for the current month's dates. Selecting dates using GetByText with the exact flag. Validating the selection with assertions. Future lessons will cover using the JavaScript date object for dynamic date selection.