Smart Date Selection Using JavaScript | Bondar Academy
Course: Mastering testRigor
Module: Advanced Tricks and Techniques
Instructor: Artem Bondar
Lesson Summary
This lesson focuses on using JavaScript to automate the selection of dates in a date picker, particularly in advanced scenarios where hard-coded values are insufficient. It is recommended to have a solid understanding of JavaScript fundamentals before diving into this lesson. Key Concepts Date Object: JavaScript provides a special Date object that allows interaction with current date and time. Dynamic Date Selection: Instead of hard-coding dates, the lesson demonstrates how to select dates dynamically, such as: One day from today Seven days from today Dates in the past Creating Functions: A custom JavaScript function is created to handle date calculations and return the appropriate month and day for the date picker. Implementation Steps Create a new Date object to get the current date. Use setDate and getDate methods to manipulate the date. Retrieve the month and year using getMonth and getFullYear . Store the calculated values in variables for later use in the test trigger context. Replace hard-coded values in the test trigger with dynamic variables. In conclusion, this lesson illustrates how to effectively use JavaScript to automate date selection in testing scenarios, enhancing flexibility and reducing the need for manual adjustments. The Test Trigger interface methods such as putStoredValue are utilized to store and access these dynamic values.
Video Transcript
In this lesson, I will show you one more interesting use case of using JavaScript inside of the test trigger is working with the date pickers and One more time that this lesson is a pretty advanced one And if you didn't work with JavaScript before I highly recommend you to go and check JavaScript Fundamentals class before going into this lesson because it's gonna be very overwhelming for you Alright, so let's jump into it and how to use JavaScript JavaScript automating and date pickers in one of our previous lessons We were already automating the date picker when we selecting the date for desired month but the problem of this current logic was that the month inside of our script was hard-coded and the value that we were selecting we were either hard-coding or we were replaced it with Predefined variables of today day of the month But imagine the scenario that let's say according to your script You need to select not today day of the month you need to select the one day from today or Seven days from today in the future or let's say your scenario required to select the day in the past Let's say select the date last week and to test a certain scenario According to these requirements, of course hard-coding this value every time in your test Which month and which day you want to select is not a good way you need to automate this and the way how you can do it is using JavaScript because JavaScript has a special date object which is reading current date and time and then interacting with this object and updating the values you can get the desired value of month of day of Year of time and any other date related values inside of your script and in this lesson we will select let's say seven days from today or 30 days from today inside of the date picker and Script will automatically handle this based on the current date and time. So get ready to it. It's gonna be pretty nerdy stuff and Just for the beginning. Let me copy the current script as I will modify it later on So I create a new test Date picker Select future Date and I'll copy it over here So this is navigate to the form picker right click until so we will replace all this logic With a new logic and here after we're selecting the date picker. We will put our custom JavaScript function. I will copy this code and This custom JavaScript function will be responsible for setting the Right date for setting the right Variables for the date that we want to select and let's say that we want to select store 40 as As base to add so this is the value that we pass from our script and later this can be a Variable that you can pass into the reusable method, right? So we will pass this value inside of the JavaScript function and JavaScript function will return us the month and date that have to be Selected inside of the date picker and then we will replace those values with these hard-coded values like May day of the month and then Here assertion. We also will replace it with the variables from our JavaScript function so the first step we need to create this function and Going back to our code editor over here and here we will create a test function Which we will validate that's going to work and then we will just copy it inside of the test trigger So how to use with the date in JavaScript here, you can just google JavaScript date and the very first thing will be open developer Mozilla.org related to Documentation for the date object. You can create a new date object like this So const date new date And if you pass the parameter it will return you the date a particular format If you will not pass any argument, then it will return a current date and time. So let's just test this First line of code, so I will type Var date equals to new date and I will print it out to the console Console dot log and I will print this date and Hit enter. Okay, and it's executed The current date is May 20th and also the time and if I run it again You can see that time is Automatically updated over here every time I request this object Alright the next step the next step. I would like to add let's say one or two days into it for that I can use this type of syntax date set date so I will update the date for the current date object and Inside of the date object, I will provide the argument of the date dot get date method. What get date method does? get date method get date will return the current day of The month current date of the month, which is 19 For example, if it will be August 19, it will return just 19 So what we need is to get a current date and then add the desired number of days For example, if I add get date Plus 1 and execute it one more time now we have 21 if I had plus 10 Now we have May 30 if I change it to 100 days and try to add it We have August 28 so the date object is smart enough to handle the date according to the number of days inside of the month because this type of the value is The date type of the format and when we adding date to the current date It's automatically calculating for us the month's setting the correct date So now this date object has a future value that we want to select So according to our scenario, we want to add 40 days, right? So I add and it will be a June 29 All right. So now reading this date object we can get Separate values such as month such as date and such as year that we want to select and then we will select those Values later in the test trigger now, which values do we need and how to select those so going back to our application This is our date picker, so we're gonna need several months values So for example when I selecting the month remember our application has this logic Click right until contains the desired month to the left or right So we need a value of month for this box and this value has a full Value of the month for example July or August it has a full value But when I select for example, August 24 and select the 7th I click on this our input field has a short version of this month So here is written August But here is oak and if we will use the value to validate this we need a value of both Long value of the month for the logic and August the shorter version for the month for the assertion How to create those values inside of our function? Unfortunately, we can't get just a long or short version just using classical plain JavaScript But we can get the index of the month using Get month method. Here we go So method get month from the object return the index of the month So for July, for example, it will be index 6 for January. It will be index 0 So if we create the array with the desired names of the months that we want to select Then we can select the desired value by its index All right. I hope it was not too confusing. So let me create those and then you will Understand what I mean. So here I create the first array You All right, this is our short month and now create the second kind of array but with a long month short months and You Long month All right, that's done now we need to get the index of expected month so I create a new variable Expected month index equals to date equal to get month, so this should return us the Expected month index of the date that we want to select. So let me run this So we have five and if I let's say put Something like 60 days So we have six so we can see the index of the month is changing Accordingly and I put 40 back and now using this index We can pull the values from both short months and long month getting the actual value that we need So I create one more variable Expected short month equals to and I'm getting the array and using a bracket notation Provide the index that I want to select in the same way for the long month bar expected long Month equal to long months bracket notation Expected month index. So we are pulling by index the values of short and long months. So, let's see if it's working So I put the variable expected short month run so we have June and now expected long month Run, we have June longer version. Perfect. So both of variables working as expected So what else do we need also for our validation string at the end? We need a year over here So let's get this variable as well Okay variable expected Year equals to date dot How can we get a year? Okay, get full year. This is the method I was looking for get full year will return a full year. So I get this and Copy it over here and expect it here Now we need to do is to create a string for the assertions inside of the input field so this string contains Short month the day comma and the year so let's create this string Var date to assert Equals to and now I can use concatenation to create a new string that I want to assert So it's going to be what expected short month Plus space Plus We need expected date. So I need to create this variable as well expected date equals to date Get date. We already use this before date get date plus expected Date plus Comma space plus and expected year Okay like this and let's validate if we created a string correctly Okay, looks like this is a correct format to 29 20 24. This is the format that we are expecting and Yeah, I believe this is it The last step that we will need is inside of the test trigger replace this value with the value coming from the test trigger and Then values of all those variables put into the test trigger context so we can use this inside of the test trigger I think this function is fully ready. So I just copy this function and Going back to test trigger and putting it right here Okay, this is our function Let me add a few spaces So it will be a little bit easier to read All right, this is the function The next step let's replace this one We can read the test trigger interface how we did in the previous lesson to read this value To read this value so I will need to use Test rigor dot The method is Get stored value Get stored value And the stored value I am reading is add two days All right, so that way we replaced hard-coded value of 40 From the function and we will read from the stored values of the test trigger Which we set over here and the last step we need to get the values of expected dates short month long month and year Into the test trigger context for that. We can also use a test trigger interface so test rigor Dot and method I will use is this one put stored value Put stored value the first argument will be a name How would I want to store the value inside of the test trigger? So I will use the name expected date And the variable will be expected date as well So this one is coming from the javascript and this is how it will be saved in the test trigger In the same way we need to do for other variables so We need to save we don't need index. We need a short month short month short month Then we need A long month Uh, so long month Long month long month And the last one is date to assert And date to assert Date to assert and date to assert. That's it. So now all those four Variables will be available in test trigger and now we can read those inside of our script later over here So right click until page contains the long version of the month and I will type contains stored value Of expected long month To the right of right then page contains exactly stored value today day of the month, so instead we Replace it with expected date expected day expected date and expected date all right, and Here instead of this string, we will replace it with another variable date to assert So string with parameters But instead of string with parameters, we will use equals to stored value equals to stored Value And Like this And here as well input has stored value Below common date picker So I think this is it So now let's try to run this test and hope that we didn't make any mistake And in theory it should select the 40 days from today inside of our calendar and add and run So All right, something didn't work let's cancel this Let's see so input field So may It click on the next month And for some reason it did not select the date because it's supposed to select the date over here So let's try to debug it All right, so for some reason the date to assert was november 30 of 2029 instead of 2024 Yeah, this is strange. So, let's see. Where did we make a mistake? Okay, get stored value Get date. So let's try to replace this with something like 40 With more hard-coded values as for now And let's run it one more time. So maybe this value didn't read correctly or something Okay, run it again Okay All right now it works so it selected june And then it selected the 29th. So it worked as expected june 29 So this is the may 20 plus 40 days. It's june 29 So now let's try to figure out why this expression didn't work and that is probably related because this value Is a string but we need to convert it to the number So I will use this method number Then inside of it argument test rigor dot test rigor get stored value Get stored value And then Days to add something like this. All right, let's try to run it one more time All right, and now it worked as expected the value of 29 was selected so now Our function is very smart enough. So now we can handle the scenarios dynamically For example, if you want to select 7 days from today or 70 days from today test trigger will work as expected Yeah, this was pretty nerdy stuff and very complicated and you can see how easy is it to make actually the mistake inside of The javascript code. That's why I highly recommend you before typing any javascript code inside of the test trigger Run it separately somewhere right here. And then if something doesn't work try to debug All right. So let's quickly summarize what we did in this lesson in this lesson. We were using a javascript date object To get the current date and time and then modifying this object using javascript We were getting the desired date that we want to select inside of the calendar So that way we can dynamically select the future date based on the current date and type To update the values inside of the test trigger context. We were using this method of the test trigger interface put stored value where we were saving the variable from the javascript into the stored value Of the test trigger and then later we can access this value in the test trigger context inside of the logic of our Application. All right, that's it guys and see you in the next lesson