Date Selection by Text | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Mastering UI Elements
Instructor: Artem Bondar
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.
Video Transcript
In this lesson, we will talk about how to automate date pickers. So you will learn how to select the date in the date picker by text, and how to make a validation of the date value inside of the input field. So let's get into it. So let's go to the forms and date picker page of the test application. And here is our date picker. So we will work with this one. We will select different dates here and make the validation that this date is showed up in this input field. So let's start a new test. So the first thing that we need to do is, of course, navigate to date picker page. So let me take something from the previous test. I'll take this. And instead of the forms layout, we will navigate to a date picker page. So let's create a new date picker form. And let's call it date picker form. Okay, that is done. The next step, we need to find the locator for our date picker form. Let me clean this, right-click, inspect. And what we can do, we can take this placeholder form picker and select this input field by a placeholder. So let's say, calendarInputField equals to page.getByPlaceholder. And we'll use the form picker placeholder name. That's it. And then we need to click on this calendar input field just to open it. Click. All right, let's first verify that it is working. Open the playwright runner, date picker, run. It made a click, but we just don't see that it is open. So let me run this right here in the browser, just to view that it is opening the input. Yeah, so we see the calendar. Now, the next step, we want to select any date in this calendar. And let's inspect our application just to see what's the structure of the calendar right here. So let's say we want to select the June 14th, right? Right-click, inspect, and what do we see? So we see that we have nbCalendarDayCell, and each of this tag represents the cell inside of the calendar. So we can use this. So also we have rows, and we have the entire nbCalendarPicker. So you may think that the first approach would be is to choose this nbCalendarPicker and then select any date inside of it. But here is a little trap. As you can see, we also have dates in this calendar that belong to a different month. For example, 28, 29, 30, and 31st belong to the May. And if I select this one, the different month is selected. But we want to select only the dates within a June. A June is this section, 1st to 30th of June. Because if we try, for example, select the 30th of June, instead of selecting this date, it will select the 30th of May. And that's why we need to specify more detailed locator to select only the current dates of the month of June. How to do that? So let me inspect the first and the previous element to see what's the difference. And here we go. Look at the different class name. The class name for the 31st has the name BoundingMonthDayCellNGStarInserted, whereas the June 1st has DayCellNGStarInserted. And using the difference of the class name, we can specify that we want to select only the dates that belong to the current month of June. So let's start with the selecting the entire class value. I copy this class and create a new locator. WaitPageLocator, and I want to select by this class. So this locator will give me all the elements that related to current month of June. And then within this month, we want to select our date just by text. GetByText, and let's say we want to select 14, and then we make a click. And this should work. Let's try running the test. Yes, you can see the June 14th was selected in the calendar. So this works perfectly fine. But let's say if we try to select the June 1st, what happened? Let's run this one more time. And now we have a problem. Look at this. So Playwright found so many locators because 1 exists pretty much in 10, in 11, in 12, and so on. This happens because if you provide the value GetByText, it is looking at partial match, not the exact match. And to specify the exact match, we just need to provide the additional flag, which will be exact true. And in this case, Playwright will search exactly the number one value as a text. Running this again. And it works perfectly fine. June 1st was selected. And now let's make the assertion of our date. Await, expect our calendar input field to have value. And the value is June 1st of 2023. Running this one more time. Okay, and it's working assertion fast. All right, I guess that's it, so let me quickly summarize what we did in this lesson. The best way to select the dates in the date picker is first to identify a unique locator that represent the list of the date cells that you want to select for the current month. And then within this list, select the DateByText. And making sure you provide the flag exact true, so you will select the exact value in the calendar that you want to select. And to assert the result of the selection, we can use allocator assertion to make sure that the value is displayed correctly in the input field. And few words that this, of course, is not the desired way to select the dates, because we hard coding the dates in the calendar. And the dates in the calendar is always changing because the time is moving on. And in the next lesson, I will show you how to use a JavaScript date object to choose the date dynamically depends on the current date and time. All right, thank you guys and see you in the next lesson.