Datepicker Conditions | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Automation of User Interfaces
Instructor: Artem Bondar
Lesson Summary
In this lesson, we focused on enhancing the date picker functionality to allow for the selection of future months. The current implementation only allows for selecting dates within the current month, so we needed to create logic to handle future month selections. Key Concepts Covered Month Navigation: We can navigate through months using arrow buttons. The goal is to ensure the displayed month matches the desired future month. Locator Identification: We identified the button locator for month navigation and implemented logic to check if the displayed month matches the expected future month. Date Object Usage: We utilized the Date object to retrieve the current and future month values in both long and short formats. Conditional Logic: We created conditions to determine if the displayed month and year in the calendar match the expected values, triggering a click on the next month button if they do not. Recursive Function Implementation To handle scenarios where multiple months need to be navigated, we replaced a single execution logic with a recursive function . This function repeatedly checks the displayed month and navigates as necessary until the correct month is shown. function selectDateFromCurrentDay(day) { // Logic to select the desired date } We also parameterized the function to allow for dynamic date selection based on the number of days from the current date. In summary, we successfully implemented a solution that allows for selecting dates in future months by utilizing recursive functions and dynamic values. This enhances the usability of the date picker significantly.
Video Transcript
All right, we continue working with the date picker, and in this lesson, we will solve the problem of the future month's selection. So let's get into it. So this is our calendar, and when we select the date with current script, it's just selecting the date from the current dates. But if our date is a future date, let's say it is October, it's still picking the current month, but we want to pick the next month. How can we do this? So we can flip the months by clicking these arrows over here, back and forth. And we need to create the logic something like this. So if the month that it is played over here is not the month that we are expecting, then go ahead and click on this button and validate it. Hey, is this the month that we want to select? So let's look into this locator, into this button, and find the locator how we can select it. So this is a button and this is the value. So we will need to create a logic. Okay, if this guy, the text inside of this guy, is not the text that we are expecting for the month, then click on this button. So let's get into it. I'm copying this selector, going back to the code, and this is the code so far. And we need to implement this logic right here. So after we click and expand the selector, let's write this. So I get the selector, then we need to invoke and get the text, what is the current month is displayed. So text, then calendar, month, and year, like this. So there's gonna be a value. And then we will need to create a condition here. But before that, we need to add a few more values from the date object. So we will need a value of the current month, so it will be a future month. And I will call future month long, because we will need two values. Short value of the month for the assertion right here, so August. And we will need a long value for the month, which is August, which is a full value. You see, the August is a full month displayed right here, and August, just three letters displayed right here. There is a special method for that. So for the long month, I will call dateToLocaleString en US format. So in the US date and time, I will use this format. And the month I am looking for is in the long format like this. And then the same I will need for the short version of the month. So it will be a short version of the month. And here I will change arguments to a short. Okay, so this variable will give me a full month value, this one just a short month value. And we will need a full year as well. So future year equals to date, getFullYear. So this one is easier. All right, so now let's create the condition. And condition would be the following. If the calendar month and year includes the future month long. And we want to say if it does not include future month as long. So if the value in the calendar that currently is displayed does not include the value that we want to select, it means that we want to go to the next month. So you got the logic, right? But we also need to handle year as well. So two values. So if calendar month and year does not include future month long. Or, and I will use a double pipe, or calendar month and year does not include future year, then. Then I want to click on the next month. Let's find the locator for that one. So I want to click on this button, inspect. And this will be, I think, data name Chevron, right? I can get this property, it should work. So going back, psi get, like this. I need in this square braces, like this, dot click. So this should give me the next month selection. And for the day to assert, let's also fix this month. So this should be the short version of the month, instead of hard-coded. And for the year, this should be a future year. All right, so I think we can try to test this code. So currently, we will select 50 days from today. This should flip to next month, which is September. And in theory, this line of code have to be executed to switch to the next month. Let's check it out. So going back to Cypress, running the test, here we go. Yeah, you see, it works successfully. The September 20 was selected. So let's see, where is our logic? Yeah, so we click the month, invoke the text. Then we click on the next month, September. And the September 20 was selected, perfect. This logic worked fine. But if I will change the logic right here, let's say to 70 days or 80 days, so I will need to flip several months forward, then this code will not work. Because currently, it handles only just a single condition during the single execution. For us to make this working through the multiple months, we need to create some kind of a while loop over here. So it would repeat in the cycles multiple times. Hey, is the month that currently displayed in the calendar the one that we're expecting? No, okay, click to the right. How about now? No, click to the right. How about now? No, click to the right. How about now? Yes, okay, then select the calendar. So this is the logic that we need to implement. Unfortunately, in Cypress, you cannot create a while loop. So create a condition and repeat this loop until the condition is satisfied. But in Cypress, there is a workaround. You can create a recursive function. A recursive function is a type of function that calls itself. This is kind of a workaround in Cypress because Cypress runs asynchronously. And let's extract this logic into a function and create the recursive function instead. So I will create a new function, function. And let me call it selectDateFromCurrentDay. Something like this. And I will put all this code into this function. Command X, Command V, quickly reformat, all right. And now when this code is executed, when we switch to the next month, we want to check again, okay, do we have the month that we're expecting or not? And I can literally call this function as the next step right here. So the function technically will call itself and re-execute itself. And we need to make sure that it's not gonna be an infinite loop. So we need to create an else condition over here. So I create else. So if this condition is not satisfied, then we need to select the date that we are looking for. Command X and Command V. So if the date in the calendar is not displayed what we are looking for, keep switching to the right and selecting the date. Once the date is what we need, go to else statement and just pick the date in the calendar. And what is left, we just need to call this function inside of the test, just like this. Let me make it smaller. And yeah, let's run this test one more time and to see if it is working. So running the test and September 20 was selected. Now let's try to run some a little bit crazy date. Let's say we change it to 200 days. Going back and here we go. Look, February 17, 2026. Let's run it one more time. Look like crazy fast. It's just flipping the calendar and selecting the right date. So our loop works successfully. And the only last thing I need to just refactor this a little bit. So this entire code related to the date can leave inside of the function. And let me collapse this and I refactor this real quick. So I take this entire code and I will put it into this function. So let function handle everything for us related to this operation. Now we have a little problem, because this date of assert becomes invisible outside of this function. So let's return this value. I type return and date to. Assert will be returned from this function. And I will create this const date to assert equals two. So when I call this function, the date that we're going to assert will be assigned to this constant and will be used inside of our validation. And I guess the only one thing I want instead of using this hardcoded value over here, let's parameterize it. I will call it day and replace it over here and also put it over here. So then we pass this argument of 200 days inside of the function like this. And this value will be passed into the function. And function will handle everything for us, selecting the date in the calendar. So I think that's it. Let's run this test one more time to see if we refactored everything correctly. Yeah, it worked successfully. And let's select the smaller date. Let's say, I don't know, 20 days from today, going back. And August 21st was selected. All right, guys, that's it. And let's quickly summarize what we did in this lesson. We created additional logic to flip the months in the calendar based on the date that we want to select. And we created the logic that if the future month or the future year is not currently displayed in the calendar, we clicked on the right to flip the calendar. And we were using it as a recursive function to repeat this operation again and again until the condition is satisfied, and then we can select date in the calendar. We're also using all values dynamically, such as future year, long version of the month, and short version of the month. And also we parametrized our function so we can call the function inside of the test and select the number of days from the current that we want to select in the calendar. All right, that's it, guys, and I'll see you in the next lesson.