Datepickers | Bondar Academy
Course: Mastering testRigor
Module: Interation with Web Elements
Instructor: Artem Bondar
Lesson Summary
This lesson provides an introduction to automating date pickers , focusing on basic operations and techniques for selecting dates within a calendar interface. Key Concepts Navigation: Start by navigating to the forms menu and selecting the date picker page. Basic Date Selection: Click inside the input field to open the date picker and select a date by clicking on the desired number. Using Keywords: For stability, use the exactly keyword to ensure the correct date is selected, especially when multiple numbers are present. Advanced Techniques Month Selection: To select a month other than the current one, click the navigation icons or use a loop to click until the desired month is displayed. Conditional Logic: Implement conditions to handle scenarios where multiple dates are displayed (e.g., selecting the correct 28 when both April and May have this date). Assertions Use assertions to verify that the selected date appears correctly in the input field. If no placeholder exists, use check that input has value to validate the input field's content. In summary, this lesson covers the basics of working with date pickers, including selecting dates, navigating months, and validating selections through assertions. Mastering these techniques will aid in effectively automating date picker interactions.
Video Transcript
In this lesson, we will talk about how to automate date pickers. So this lesson will be more of the introduction to the date pickers, how to work with them. And later, we will talk about more advanced techniques, how to work with the date pickers. So let's get into it. So here's in the forms menu, we navigate to the date picker page. And we will automate this common date picker. So click it up and select different dates. You can change the months and select different dates in the calendar. So we will select different dates in this calendar and we'll perform assertion that the selected date is displayed inside of the input field. So let's get into it, and I create a new test. And first thing, I need to navigate to the forms and date picker page. Okay, this is done, and the next step to select the date, we need first of all, click inside of this input field to open the date picker. So let's do this as well. We have a placeholder, so we can use a form picker placeholder inside of the input field to pick the date. So let's do this as well. So we have a placeholder, so we can use a form picker placeholder inside of the input field to click into this. Click Input, Form Picker. All right, so once we clicked into the form picker, how to select the date? So it's pretty straightforward. You just click on the number that you want to select. For example, we want to select April 17, and by default, this calendar will open the month of today. And all you have to do is just click and provide the value of the date that you want to click, that's it. And for more stability, I would recommend to use a keyword, exactly. Why is that? So we have a date, we have a month, we have a year, we have in calendars such as one, two, and so on. And numbers like 31 also contains one. Test Trigger most likely will pick the correct number. So if we select one, it should pick one. But for more assurance, better to provide exactly to make sure that we pick exactly the date that we're looking for inside of the calendar. So I will use the keyword exactly. And let's run this test to see if it is working and selecting the 17th in the calendar. No, so what is missing? A little misspell. Exactly. And I run in this test. All right, that's passed successfully. So let's check out the screenshots. Click on form picker input field. Calendar opened. We click on 17, and 17 was selected. So pretty easy and pretty straightforward. So now let's make the next step. So how about how we would select the desired month inside of the calendar? So let's say we want to select not the current month, like April 17. We want to select May or June or other months. How would we do about that? So here are two options in this calendar. You can click either over here and then select year and then desired month. Or the second options, you can click on this little icons to the left and to the right, flipping the value of the month. So let's say that we want to select the month of June, somewhere here. How would we do about it? So we can create a logic or condition that would say something like, click on this icon until month June will be displayed over here. How to do that? So let's see what kind of attribute we have for this icon that we need to click. So the icon that we need to click has this custom attribute data name, Chevron right. And we can use just partial match of this click right. So we can type command click right and it will perform the click on this icon. But we need to also add condition to click on this icon until the desired month will be displayed over here. So how can we write this prompt? Let me go back. I will comment out this line because first we want to select the desired month. So I will type click right. And then I want to create a condition to click on the right button until the desired month is displayed. And it would look like click right until page contains May to the left of the same locator right. So it looks kind of a little bit strange, but the logic is this one. We want to click on the right icon until page contains main to the left from this icon. And this is exactly what we have. So this button will be just a relative locator for us for this section where we would look for the text. And, yeah, let's run this test and let's see if it is working. All right, so let's check the screenshots. So the calendar was opened. We performed click to the right. Next month was selected. And then we validated that May is displayed to the left from the right icon. And if I want to select, for example, let's say July. So let's change the July and see how our loop is actually working. So page contains July to the left of right and update. And look like it was working again. So this is May, then we selected a June, then we selected a July, and July was selected successfully. All right, so this part is working. This is how you can create the conditions using single line until you get to the page that you want to validate. This is how you can create the conditions using single line until you get the desired state on the page. So I will change it to May. And now I want to select the particular date. For example, I will click May 17, and it will work just fine. So let me show the May. May 17 will work just fine. But for this particular month, we have a corner case. So if I try to select May 28, I would like to select this one, right? What will actually gonna happen, we will select the boundary month, which is this one, which is April 28. Because this particular screen has two numbers 28 displayed on the page. So how to be in this kind of situation? In this kind of example, we need to create a condition. And condition may look like this. So if the desired date that we want to select located in the first row of this calendar somewhere over here, then we want to click on the second one. Because we want to click on the boundary month. But if the desired date does not exist over here, it's all right for us just to click the date wherever we want. And for the relative locator, we can use the first date of the calendar. Because look at this. When we change the month, number one always inside of the calendar. So no matter what month we select, one is always here. So if we say something like, if the date that we are looking for to the left of one exists on the page, then select the other date. But if it does not exist, just select this date what we want. And here is how we can create this condition. So this is me. And inside of your prompt, you can build this condition like this. If page contains exactly 28 to the left of exactly one, then. And I will make a couple of spaces to make the formatting nicer. I want to click the second exactly 28. Else, I want just to click exactly 28. And when you create conditions like this, it always should end with a word end. This is the completed structure. If the condition, then if the condition result positively, go here, or if negatively, else, go here. So in our example, if page contains 28 to the left of exactly one, so if the page exists over here, our script go to the first condition right here. And it will click second exactly 28. And second 28 will be this one. And if let's say we want to select, I don't know, 17, the number that we created before. If page contains 17 to the left of one, and 17 does not exist to the left of one, then we go to the else statement and just click the 17. Okay, so let's run this scenario and see if it is working. Update and retest. Okay, invalid if else block. So what did I miss? Okay, here, to the left of exactly one. How about now? Okay, now it's working. All right, let's see. So this is the calendar opened. Then we validated that this is a desired month that we wanted to select. And then here's our condition. So we validated that 28 exists to the left of one. And so we selected the second 28 inside of the calendar. And the month was selected. And now let me update this, for example, to pick 17. So if page contains 17, and I update 17 here and here, and write this test one more time. And this passed as well. And now look how it looks. So there is no 17 to the left of one. So the 17 in the calendar was selected. All right, it was working as expected. And now let's talk about the assertions. So we already talked about assertions of the input fields in one of the previous lesson. So let's write one assertion. And I will show you one more example how you can make assertion of the input field. So the first assertion with a syntax you already know, check that. And then we provide input form picker is equals to and the value that we are looking for. And in our example, the value would be this type of string. All right, and the second example, let's say that you don't have a placeholder inside of the input field. In this case, you can use this type of the assertion. Check that input has value. And this is the value that we are looking for. Below and then providing the relative location, where is it? So below common date picker. This is a header for the input field and common date picker. And let's run this test. All right, test passed. We selected the 17th and assertion worked as expected. All right, let's quickly summarize what we did in this lesson. So this was introduction to working with the date pickers. And the basic operation, how would you pick the date inside of the calendar is pretty straightforward. You just use click and then use keyword exactly to pick the date that you want to select inside of the calendar. You can use the loop until the page contains the desired month to creating the loop selecting the month that you want to select. In this case, you want to select the future months and so on. And if you have the design of the calendar when you have the boundary months, you can use the condition like this to select the desired month of the current active calendar. And two type of the validations. This validation you already familiar with. And if your input field does not have a placeholder, you can use this type. Check that input has value and then relative location where this value should be located. That's it guys and see you in the next lesson.