Datepicker Page Object | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Page Objects
Instructor: Artem Bondar
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.
Video Transcript
In this lesson we will create a page object for the date picker and I will show you how can we use the logic responsible for selecting the date in the calendar to select the date in two different types of the calendar. And in this lesson we will implement this. So let's get into it. This calendar common date picker and date range selector, the calendar picker looks pretty much the same. The only difference that here we need to click just once in the calendar, but here we need to click two times in the calendar to select the range. But the rest of the code is the same. So we can reuse that code inside of the page object and create two methods. One will be responsible for selecting date in the common date picker and second one in date picker with range. So going back to our framework and I create a new page object for date picker page. Taking the import of the test fixture and create a new class, create a new field and constructor. Then I will create a method related to selection of the date in the common date picker calendar. Async and let's call it select common date picker date from today. Because I remind you we're gonna select the date based on the current day in the calendar and we will add plus some number of days to select the date in the future. And the parameter that we will use I will call let's say number of days from today and it will be a number type. All right that's it. Now let's go and find the code that we created in the previous lesson. So that's the entire code. This is navigation to date picker page. We can skip it and this is the actual implementation of the date selection. I literally copy the entire code and for now just paste the entire implementation inside of this method. So need to make a quick reformat. So we have some issues here. We need to put this dot page where else here this dot page okay also we have a complaint on expect we need to import it from the playwright library. Expect. Okay this issue is fixed and what is left we need to replace the hard-coded value of seven days from today. We will replace with a parameter from our method. So that's it and now let's call this method inside of the test and see if it is working or not. So we need to import the page object into the file. Import date picker page and create a constructor. Const on date picker page equals to new date picker page and pass the page fixture. All right and now let's just call our methods. Await on first navigate. Navigate to date picker page and then await on date picker page dot select common date from today. And let's pass let's say five days from today. All right looks good let's run this test. Yeah you can see July 8th would successfully select. So this method works successfully and page object work as design. So going back to this method and let's look into this. As I have mentioned before the main portion of this code is literally selecting the date inside of the calendar and this happens right here. So this section of the code is doing all the trick. The rest is just navigating to the right field of the calendar which is form picker in this example and then at the end make assertion. So this is what the different because here as you can see assertion is different. It shows the range while here is just a single date. So that's pretty much two difference between those two calendars and instead of copy pasting the entire thing to the different page object method we will create a reusable function for this code and we'll call this function inside of the page object method. So I will create a new private method inside of this page object. Private async and just call it select date in the calendar and just take the entire code and paste it right here. Now we are missing here is this parameter of the method which type of number. Alright looks good and now we need to call this method inside of the method of the page object. Await this select date in the calendar and we need to pass this parameter inside of this method. Looks good and we have one more issue here that date to assert is no longer available. Date to assert constant was part of the code before right here. Right now it's in different method so that's why it is not visible. So we can make a return of date to assert from this method to use this value of later on. I will put here return date to assert and then can create a new constant as part of the page object method and assign this result to this constant. Const date to assert equals to wait this select date in the calendar. That's it and everything is fixed at this moment. We made the refactoring now let's try to run this code and see is it working or not. Alright our test is still working as expected July 8th was selected and let's say we change 10 days from today and run it again. And July 13th was selected so everything is working. Now let's make one more refactoring and create a second method that will select the date from the second calendar and we will reuse this select date in the calendar in this method. Async select date picker with range from today and this method will expect two parameters because we need to select two days start date and end date. So let's create those start day from today which will be a number and the second and day from today which will be a number as well. Okay the next step we need to select the input field of the date calendar with range. So I'll take these two lines and just replace instead of form picker I need to choose let's see I need to select range picker this one. Range picker will be locator for this input field and then just simply call the method two times to select the range one and two and we're replacing the parameters start day from today and end day from today. The constants that we returned we also need to rename day to assert start and day to assert end and then we need to create a new type of the constant that we are going to assert. So if I select for example this range we expecting date number one space dash and date number two as our expected string in the input field. So let's create that one. Date to assert equal date to assert start and the second one date to assert end and I take the assertion in this test one more time. All right and let's check one more thing. So if I will inspect the element inspect right here in the calendar the locator will be date cell and G star inserted but if I click right here and inspect the calendar the locator for the date cell will be range cell day cell and G star inserted. So it's a little bit different locator for the day cell so we need to update this portion of the locator because it will not work. The locator for the day cells in the range picker is a little bit different so I will remove this thing and we'll search just by two class values which exist in both of the calendars. So day cell and in G star inserted class values exist in the both calendars. So let me show you it one more time. This is the calendar with a range you can see it has range cell day cell and in G star inserted and this one has inspect only day cell and G star inserted. So for the both calendars this locator will work if we will use just day cell and in G star inserted. So this locator for us will work as well and I guess that's it let's call this method inside of the test. I wait on date picker page select date picker with range and we provide two values let's say six days from today and 15 days from today and let's run this test and it worked perfectly fine test passed successfully we were able to select date in one calendar and date in the second calendar so it worked as designed. Alright guys so let me quickly summarize what we did in this lesson. We created a new date picker object and we reused a previously created code in the class for date picker to select a date in two different calendars. This is very powerful technique how can you remove duplication of your code. You create a private function inside of your page object and then reuse this private function for the different methods as a part of your page object following the principle don't repeat yourself. We nicely organized the code and right now you can call the reusable methods inside of your test to dynamically select the date inside of the calendar or inside of the calendar with range. Alright that's it guys and see you in the next lesson.