Loop Through Table Rows Using JavaScript | Bondar Academy
Course: Mastering testRigor
Module: Advanced Tricks and Techniques
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore how to utilize pure JavaScript within the Test Trigger framework. This is particularly useful when the built-in functionalities do not suffice for specific conditions. Prerequisites: Familiarity with JavaScript is essential. If you're new to JavaScript, it's recommended to complete the JavaScript Fundamentals module at Bonder Academy before proceeding. Key Concepts: Testing Table Filters: We demonstrate how to test a filtering functionality in a smart table by validating that all rows display a specific age when filtered. Handling Delays: A delay is introduced after inputting the age to ensure the table has time to update before the test retrieves values. Using JavaScript for Validation: JavaScript is employed to loop through table rows and validate that each row contains the expected value. Steps to Implement JavaScript in Test Trigger: Navigate to the smart table page and input the desired age. Introduce a delay (e.g., setTimeout ) to allow the table to update. Use JavaScript to grab values from the table and validate them. Utilize the Test Trigger Interface to interact with stored values using methods like getStoredValue and execute . In conclusion, this lesson illustrates how to effectively integrate JavaScript into Test Trigger for advanced testing scenarios, allowing for more robust validation of application functionalities.
Video Transcript
In this lesson, we're gonna talk about how to use a pure JavaScript inside of the test trigger. So sometimes you may have scenarios when the built-in functionality in test trigger is not enough to handle a certain condition. In this case, you can use a pure JavaScript programming language to handle those. And if you never work with a JavaScript, just one prerequisite, please go and watch the JavaScript fundamentals module at Bonder Academy and get familiar with JavaScript first. Because otherwise, this lesson can be a pretty overwhelming and pretty advanced for you. So if you're familiar with JavaScript and work with JavaScript before, then you can move forward. If you're not, just one more time, check that free class of ten lessons, get familiar with JavaScript basics, and then go back to this class to continue on. So let's get into it. Let me show you one of the scenarios how to use JavaScript in test trigger. So this is our test application. And if we navigate to the smart table page, our smart table has a functionality of filtering the data by different input values. For example, if I take the age column and filter it, let's say 20, then the table returns only the values which has users with 20 years old. Or if I provide, let's say, 30, then just one user, 40, then two users, and so on. So let's say that we want to test the functionality of the table filter. And we want to test that when I type the 20 inside of the input field in the age column, all rows of the table should have only 20 for all of the users. So for this kind of scenario, we can use a JavaScript to loop through each of the table row and validate that each row has a value 20 in the column age. And this is what we're gonna do in this lesson. So let's create a new test. And I will use our Playground QA project, and I'm creating a new test. Validation of test filter. So first thing, we need to navigate to smart table page. And then we need to type a value inside of the column age. So for that, we can use a placeholder. We have a placeholder age, and this is the input value. And we can use this to type the value inside. Enter 20 into input age. Okay, so after that, so let me show you something. When I type something, let's say I type 20, you can see there is a little delay between when I type the values and when the table actually display the result. And we need to account for this little delay of the UI inside of our test. Because if I try to get values of the table too quick, then the test trigger can get those values faster. Then the table will be actually filtered. So I need to create a little delay after the typing of 20 inside of the table. So I will make sure the table will be filtered accordingly. And I will do it something like this. Just wait, and let's say I wait for three seconds, something like this. So after I type 20, we're gonna wait for three seconds. What's the next step? The next step, we need to grab the values of all rows. And test trigger actually has the special command for that. But unfortunately, it does not work the way we wanted it to work with this particular application, so we will need to use a JavaScript. So let me show you what I mean. So I type grab values from table at column. Age and save it as all ages, something like this. So what I expect this trigger to do is to look through the column age and just get all the values from this column. But as I mentioned, it will not work as we expect. And let me show you this in a second. So add and run and let's execute this test to see the output. All right, so we see the screenshot that we successfully typed 20 into the input field, and the values were filtered. Now let's look into the details, show extra info. So this is the execution of lines, grab all values. So all ages was set to this value. You can see this is the string, and the string represents the array. And unfortunately, the array of values is empty. Ideally, how this should work that these values should have the values from our table, but in our example, for some reason, it didn't work. But still, we can use this information to validate the values of each of the row, because each of these empty values represent the row. So if you go back over here, we have five rows, one, two, three, four, five. And if we look into the test trigger, we also have five values over here, but they are empty. So we can use the length of this array inside of the JavaScript function, and look through each of the row through the length of all rows, and validate that each row has 20 in the column edge. And this is what we're gonna do in this lesson. But before we begin typing anything in JavaScript, I would recommend you to try any code that you're about to type inside of some JavaScript editor. Because it's easier for you to debug your JavaScript function first, and then later move it to the test trigger. Because in test trigger, you don't have a built-in JavaScript editor, which will help you to debug and understand what is going on. Same way like we did with Postman when we were working with the APIs. It's better to prepare everything in advance, make sure that it's working, and then you just transfer this into test trigger and execute. This is what we're gonna do. So here, I would use something like this. This is online JavaScript editor. It's located on programmingz.com, but you can Google any other flavors of JavaScript editors just in the browser. And if I just run it, we can see that here we go, console log, this message was printed. And this is what we're gonna do in this lesson. So let me take the value that we get from our variable, and I will transfer it into my function. So I create a new variable, variable allAges, and put it right here. Okay, this will be our starting point. And now if I just type it right here, allAges, and run. Okay, and I have the error syntax. It doesn't like that we have a dash over here. All right, let's remove it and type it like this, allAges, and console log. AllAges, here we go, it's printed in the console, so we can read this string. Now we would like to loop through this array. But before that, let me create a just very simple for loop in JavaScript and just make sure that it is working. So I will type for var i equals to 0, this is our starting point. Then i less than equal, for example, 5. We want to loop it six times, starting from 0 and ending with 5. And at the end of each loop cycle, I wanted i++. And then I entering inside of the function. And here I wanna type console.log. And I want to print to the console the value of i every time we run through this loop, and let me run it one more time, and here we go. Now we have loop executed, it starts with 0, ends with 5, 0, 1, 2, 3, 4, 5. So for every loop cycle, this i represent this index. And we will use this index later as the index to pick the correct row of the table. All right, the next step. The next step, we need to convert this string into the array in order to be able to loop through this array. For that, we can use a JSON parse method inside of the JavaScript to convert the string into the object. So let me create a new variable, var rows object equals 2. And then JSON parse, and then I put all ages inside. Okay, and after that, we can validate that it is working. Console.log, and print this out to the console to see if it is actually working, and let the object run, and here we go. Now we have the object printed out, so it worked fine. The next step, we can use this object inside of our loop. And hardcoding 5, we can replace with the length of this object. And we can type i less than object. And by the way, I made a little misspell object. Less than equal object.length.i. So we're reading this object, getting the length of this object, and we're then looping and getting the index through this object. And I'm running this. Here we go, we still have 5. And let's say if I will remove one of the values from this string, something like this, run it one more time. You see, now we have 4. If I remove one more value from it, run it again, now we have 3. So our logic working successfully. At this point, we are able to successfully loop through the array of the values, and use the length of this array to identify how many times we need to loop through this object, and getting the index for each value inside of the object. And by this index, we can get the value of the row. And now let me show you how you can do it in the test trigger. And we will transfer this function inside of the test trigger. So going back to documentation, and let me show you something here. In the advanced section of the test trigger, here advanced section, there is a JavaScript support. And this is the syntax, how would you run JavaScript inside of the test trigger? So let me just simply copy this, and I put it into the script over here. So execute JavaScript, text starting from next line and ending with, and between and, and, and, we need to put our code. Now, I go in here, copy this code, and putting it right here, just for the example. So this is the code that we're going to use. This is our placeholder. Now, we need to replace this value with this variable that we saved in the test trigger. How would we do this? In order to interact with test trigger from the JavaScript, you need to use a test trigger interface. And test trigger interface has several methods that you can use. And going back to documentation one more time, this is the interface. These are the methods that you can use. For example, if you want to get a particular value from test trigger into your JavaScript function, you can use this method. GetStoredValue, and provide stored value argument here to get the value into the JavaScript function from the test trigger. If you want to put the value into the test trigger under the certain test value from the JavaScript function, you can use this. PutStoredValue, and you provide the value name. How do you want to store it in the test trigger? And the actual value from the JavaScript. Which value have to be saved? And if you want to execute, let's say, test trigger command, you can use this execute. So from the JavaScript code, you call execute method and then provide test trigger command, which one do you want to execute? This is what we're going to use to interact back and forth from JavaScript to test trigger and backwards. So going back. Now we need to read over here. Instead of all ages, hardcoded value, we need to read this stored value from test trigger to add this into JavaScript function. And we will use a test trigger interface. And I call test trigger, test trigger dot, and then call a method. GetStoredValue, get stored value. And then read this all ages stored value. Here we go. Now, all ages has everything that we need. It has the value that it will get from the page. Then we parse this value, and then we can loop through this value. Now, inside of this step, instead of just doing console log, and it will not work, by the way, inside of the test trigger, we need to execute the command like this example over here. So I replace it, test trigger dot execute. And here inside of the string, I need to provide the prompt of the test trigger format. What do I want to do? And what I want to validate is to check that the column inside of the table in each row of the table has the expected value. And the expected value is 20. So how this would look like? Check that table at row one and column age equals to 20. All right, and I don't need this. I can remove this. And this is pretty much our function. So let's run this first. And it will, for now, it's hard-coded to row one. So all we want to do is just to make sure that it is working. And after we make this working, we will refactor this one more time to replace this index with the index from JavaScript function. So let me run this code just to make sure that we didn't make any mistakes. All right, the test passed. But you can see that what our function did is made the validation that first row has value 20. So it didn't make a loop. It's just repeated the same assertion five times instead of going from row to row. And this is what we need to adjust. So instead of hard-coding this row, we will replace it with the value of 20. We will replace it with the value of the index. And we can do it by using a concatenation. So I break this string and type plus i plus. And concatenating this portion of the string, then adding the index, and then the rest of the string. And now this i value will represent the index of our for loop. And it will start with one, two, three, four, five, and then loop ends. And that way we will validate each of the row one by one that each row in the column H has value 20. So let's run this one more time. All right, and it worked. So let's check our screenshots. So we start from here. So we validated row number one, number two, number three, number four, number five, that it has a value of 20. So our JavaScript function worked perfectly fine. All right, so let's quickly summarize what we did in this lesson. So when you want to execute JavaScript function inside of the test trigger, you need to use this type of syntax. Execute JavaScript text starting from next line and ending with and, and, and. Inside of this block, you can put your JavaScript function. To interact with a test trigger through the JavaScript, you can use a test trigger interface. So you call test trigger object and use methods such as getStoredValue or execute. So you have several methods that you can use of test trigger interface to read value from test trigger and update values on the test trigger side. So this is how you use JavaScript and test trigger. All right, that's it guys. And see you in the next lesson.