Date Selection using Date Object | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Mastering UI Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we enhance our date picker functionality by utilizing a JavaScript date object to create a more dynamic date selection process. This approach eliminates the need for hard-coded dates, allowing the code to automatically select dates based on the current date and time. Key Concepts Covered JavaScript Date Object: A built-in object that allows manipulation of dates and times. Dynamic Date Selection: Instead of manually updating dates, we will implement logic to select dates like tomorrow, next week, or next month. Methods of the Date Object: Common methods include: getDate() : Returns the day of the month. getFullYear() : Returns the full year. setDate() : Sets the day of the month for a specified date. Implementation Steps Create a new date object: let date = new Date(); Use methods to manipulate and retrieve date values. Replace hard-coded date values with dynamic values from the date object. Implement a while loop to handle month changes when selecting future dates. For example, to select a date seven days from today, we can use: date.setDate(date.getDate() + 7); Finally, we ensure that our script can dynamically select any future date without manual updates, making it efficient and adaptable for various scenarios. In summary, we learned to leverage the JavaScript date object for dynamic date selection and implemented logic to handle month transitions in our calendar picker.
Video Transcript
In this lesson, we continue working with the date picker and we will make our code smarter using a JavaScript date object. We will remove a hard-coded dependency of the date that we want to select in the calendar to a more dynamic value that will be dependent on the current date and time. So in this lesson, we will implement this logic. Let's get into it. So in the previous lesson, we were able to select the June 1st in the calendar. But imagine the situation in a real-world scenario when you want to select the date for, let's say, tomorrow or date for the next week or date for the next month according to business requirements. You definitely don't want to go and update manually the date selection in your test every time. You want it to be somehow automatically. So test will be smart enough and select the desired date, let's say for tomorrow, every time you run the test. So how to do this? In this example, we can use a JavaScript date object that will help us to manage the selection of the date. So let's continue improving this test and we'll introduce the date object. I create a new variable, let date equals to new date. So what is this? Date is a JavaScript object that can perform different operations with the date and time. New is the keyword that will create a new instance of this object and we assign this instance to the date variable. And then we can access this variable to perform in different operations. For example, date, I click dot and here we go. I have a different methods. Get time, get full year, get date, get hour, get minutes, get month, seconds and so on. How do I know which methods to use and how to use them? Usually you can use just Google the answers or you can go to the official documentation. I type JS date in the Google and first mozilla.org. You can find documentation about the date. And here is, for example, date, get date. You can find the description. What is it doing? For example, the get date method of the date instance returns the date of the month for this date, according to the local time. And you can always run any code snippets here and see what it's actually doing. So here you can see we provide the exact date as an argument to the date object. But if we remove the argument and just use a plain date object and run it again, it returned the current date. So today is June 20th and it returned that the date is 20. Or if we take, let's say, get full year and do the same thing. I remove the argument and try to run it. It will return 2023, the current year. So using these different methods that are represented in date object, we can perform a different operation with the date. And let's say we want to create the object that will return us a date, let's say, seven days from today. So let me show you right here in this JavaScript window example how we can play around with the date and let's say make it bigger. So I take the existing new date object. Then I type date, set date, and I update my current date, get date, plus seven. And I will need to add parentheses right here. So what I'm doing here, I'm getting my existing day for the current date, adding additional seven days to the current date. And then I set this date to the current date object. And let me print this out to the console, run it. And what we see, we have a June 27th, 2023. So the date object provide us all the details about the future date. And let's say if I will add, let's say, 20 days from today and run it again, it will be July 10. It will be Monday, July 10 of 2023. If I will add just a single day and run this again, we have Wednesday of June 21st. And now we can use this JavaScript code inside of our playwright code and pull whatever information from this date object we need. So I'm copying this and going back here. So date set date, get date plus one. So the next step, instead of hard coding the selection of the date right here, let's replace it with a dynamic value from this object. I will create first new constant and I call it expected date. Equals to call my date object. Then I do what, get date. Get date will return me a date of the month. And since this is a number, I need to convert it to string. To string, that's it. Then I take this expected date and replace my hard-coded value with a variable. And here our assertion would be if today is June 20th, so it will be June 21st. So let's run this test. Yeah, you can see it's working perfectly fine. It's selected a June 21st for us, which is the plus one day from the current date. But we also have this hard-coded value, right? So let's figure this out how to replace it dynamically as well. So we have here what? We have date is 21. We know this value. Now we need also value of the year and we need value of the month. And all those values we can pull out from the date object. Let's do this. First, let's create a constant for the month. And I will call it expected month short. I call it short because this version is a short version of the month. It's not June like this. It's June. This is how it is selected in our application. Let me go back. So for example, if I pick the 21st, it's displayed as June. If I will select, let's say, July, it's selected as June. So we want to get a string that have exactly the same format. For example, here inside of the entire calendar, we have a July, a full version of the month, while in the string of the assertion, we have a short version, which is June. So I want to get this value of the month, which is a short version. So equals, and I will use again my date object and two local string, two local string, this one. Date format for this test application is ENUS format, like in United States. So I put ENUS and provide another parameter that I want to get a short version of the month. That's it. So this variable will give me a short version of the month. And I need one more constant, which will be expected year. Expected year equals to, again, date.getFullYear. This will give me the full year for the date. And then we need to create a new date that will represent our assertion in this format. const dateToAssert equals to. And then I will use JavaScript interpolation to build a new string with this format. I use a backtick. I remind you, this is not a single quote. The symbol is located on your keyboard right under the escape button. And I build a new string. So first I need a short version of the month. Then space. Then I need expected date. Then comma, space. And the third value would be expected year. Okay, that's it. And then we can take this new constant that will represent a new value to assert and replace with a hard-coded value right here, dateToAssert. That's it. Let's run this test. Perfect. It's working fine. You see that June 21st was selected. So let's try to select, let's say, seven days from today, which will be a next week, and run this test one more time. It also worked perfectly fine. June 27th was selected this time. But look what happened if I will try to select, let's say, two weeks from now. And this test, of course, will fail because two weeks from now is another month. So let me run this. Our calendar is not smart enough to handle the month chain. So we expected July 4th, but actually selected a June 4th. So let's make this improvement and make our code even more smarter, so it will be able to change the month of the calendar if you want to select the date for the next month. So let's look into application and see what we need to do here. So if I click here on the month, let's say I select June 20th, and if I want to select the next month, I need to click on this little icon here to select the next month and then select the date. So here we need to create a condition that will look for the month that we expect. For example, our date object will expect a July, but this is show as June. We can write a condition like this. If this month displayed in the calendar is not July and not the year that we expect, we want to click on the next month and make validation again. Is this is a month that we are expecting? If yes, then select the date in the calendar. If not, click on the next month and look for the next date and so on and so on. So we will implement the logic right now that we're going to handle this month switching in the date calendar. So we begin with defining the locator for this particular element because we need to take this text from the calendar and compare it with the expected date that we want to select. Inspect, right-click, and locator could be this, and be calendar view mode. Sounds like legitimate locator. Going back and creating a new locator. Calendar month and year and await page.locator calendar, and we want to get a text content for this particular element. So this value will get the value of the calendar picker. And I created not constant, I created a variable with the let because later we will reuse this variable for our logic. Okay, the next step. We need to create a new constant that will represent the expected result in this format, July space 23. So inspect, look at this. Let's find how this text looks like. Here we go. So we have space, July, space, 23, space. We need to create the same format of the string from the expected date from the date object. Let's do this. Const expected month and year equals to what? So we need the month and we need a year, but we need a longer version of the month, not the one that we used before. So we need to create another constant that will give us the full value of July from the date object. I'll take this, rename it as long, and here provide long as well. That's it. And now we can combine the string that we want. So I take this variable, expected month long, space, and expected year we already have here. Done. Now we need to create a loop, and for that we will use a while loop. While condition and the code. So what kind of condition do we want? We want to compare the expected month and year and the current calendar month and year. And if calendar month and year that displayed on the page is not the same as we expect over here, then we want to click on the next month button and repeat the cycle again and again until the desired month will be selected. I will type my logic like that. Calendar month and year dot includes the expected month and year and I want to say that it's not. So if my calendar month and year does not include expected month and year, I want to click on the next page. So the next calendar page would be this icon. Let me inspect on this. What would be a locator for this? So we have a Chevron, right? Let's look up and the calendar pagination and sounds like we can use this combination. So we can find this tag name first and then select this data name Chevron, right? Let me do this. Await page dot locator. Finding this first and then child element will be Chevron, right? And make a click. And then after we made a click, we want to get the text of our month one more time and then we will repeat this cycle again and again. So one more time, look what about to happen here. First, we get a text that is displayed in the current date picker selector. Then from the date object, we are getting the expected month and year that we want to select. And then we start a while loop. If the displayed month and year does not include the expected month and year, we want to click on the Chevron, right? To flip them up. And then after we flipping the month to the right, we want to get the text one more time and we repeat the cycle again. Going to the while loop. And once the date will match, date which is displayed, match the date which is expected, this while loop will be stopped and we will select expected date and assert this date. So let's run this one more time. So I remind you, we should select the July for right now. So July 4 is actually 14 day from today. Now let me show you something more really fun. It's working fine. Let's say if I want to select 200 days from today and I run this test one more time in the browser view. Yep, you can see it's selected January 6th, 2024. And if I select, I don't know, 500 days from today, it's selected November 1st of 2024 and successfully made the assertion. So our logic working perfectly fine. And right now our script is smart enough to select any date for the future date in the calendar. And if we want to select the next week in our date calendar, we don't need to make it manually anymore. Script will handle this for us. All right, so let's quickly summarize what we did in this lesson. Using the JavaScript date object, you can get current date and time and then modify this date and time object with the values you need. You can extract date, you can extract month, year and format result as string to the value that you actually need. Then we created a while loop that can select the desired month in our calendar in order to select a correct date. And then we replaced the variable with expected date and dateToAssert in our assertion to make the assertion of date that we selected. All right, thank you guys and see you in the next lesson.