Web Tables Loops | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Mastering UI Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we focus on looping through table rows to perform validation of each value. The example involves searching for specific ages in a table and ensuring the output matches the expected results. Key Concepts Search Functionality: Users can search by age, e.g., searching for age 30 yields one result, while age 20 yields five results. Validation: The goal is to ensure that the output only contains rows with the searched age. Implementation Steps Identify Test Data: Create an array of ages to test, including valid and invalid cases (e.g., 20, 30, 40, 200). Create a Loop: Use a for loop to iterate through each age value. Input Age: Type the age into the input field using the appropriate locator. Get Table Rows: Use a locator to fetch all rows from the table body. Validate Rows: For each row, check the last column's value against the expected age. Handling Delays To address timing issues between input and table updates, introduce a delay using: await page.waitForTimeout(500); Conditional Assertions Implement conditional logic to handle cases like searching for age 200, which should return a "no data found" message: if (age === 200) { expect(...).toContain('no data found'); } In summary, this lesson demonstrates how to loop through table rows, validate search results, and handle dynamic content updates effectively.
Video Transcript
In this lesson, we continue working with the table and I will show you how to loop through the list of the rows when you need to perform validation of each value of the row, for example. And in this lesson, I will show you how to do that. So let's get into it. For example, we have a feature in this table that we can make a search of the certain values. And let's say if I make a search by age 30, we have one output. If I put 20, we have five rows. And let's say I want to make a validation that when I make a search by age of 20, that output that I have in the table has only the values that have a 20 years old and we don't have anything else in this table. So let's automate this scenario. Going back to the previous test and we just continue what we did from the previous lesson. So scenario number three, test filter of the table. The first thing we need to identify the test data that we want to use. So let's say we use ages and I create array with the values that we want to use. We want to use age 20. We want to use 30. Let's say we want to use 40. And let's say another some age case scenario, let's say 200 years old and data is not found. So we want to validate that if no data in the table, some other message should be showed up. And our example is no data found. Let's use the fourth value of 200. This will be the test data that we use. And now we want to try each of these values inside of our search field and validate the result for each search request. So first of all, let me create a JavaScript loop. For let age will be our iterator of ages. So we're gonna loop through each of the value. And for the each value, we want to do what? We want first is to type this value inside of this input field. The locator for this input field will be very similar to what we did before. We can take this input editor, but instead of email, we will use age. And this will be age as well. Okay, and what we want to fill out, we want to fill out the age value from our iterator instead of hard-coded value like this. And I guess let's run this real quick to see how it works. So it did not work, what we did wrong, probably locator is incorrect. Okay, input editor, placeholder by age. Let me double check, right-click, inspect. Okay, this is not input editor, this is input filter. Okay, we'll replace it with input filter and let's run it one more time. Yeah, it worked right now. Yeah, it worked right now and you see it happened very, very quick. It went straight to the 200, but still, we know that it is working. Now the next step, we need to get all the rows from the table. For example, if I put 20 here, now we need to get all the rows of the filtering output. And then for each of the row, we need to validate the very last column and loop through each of the row like that. So we create another loop inside of the already existing loop. For let row will be iterator of, and we need what? We need to get first allocator for our rows. const ageRows equals to page.locator, tbody, space, tr. So this simple locator will give us all the rows inside of the table body. And then we use ageRows. And remember that locator all, that will create array for us of the web element. And we need to use await to get each of the row. And we create the body of our loop. Then for each of the row, we need to get a cell value. cellValue equals to await row locator td. It's a column. We want to get a last column. We have a special method for that. And we need to get a text content. So this constant will have a cell value for the row. And since this is a loop, for each loop cycle, we will get a cell value for each of the row. And now we can make an assertion. So we can say, expect cell value to equal age, this one. Okay, that's it. So let's look one more time into the design of our code. We created all the test data that we want to use. Then we created a loop to loop through each of the values. We want to find the input filter age. Then we want to type the value of the age. Then we find the all rows as a result of the search output. And then we are looping through each of the rows. We're getting all the rows, all. And here is the each of the row in the table. And then we create a loop. Row number one, getting the text contact. Row number two, getting the text content and so on. And we should make an assertion that each row as a result will be equal to this age. So let's run this test. And this test is failed. So we can see that first value entered successfully, but not the second one. So look into the error message. We see that expected 20, but received 38. Sounds very weird, right? So it's entered our loop. It got the value of the text content from the cell, but it got some interesting value of 38. It didn't get a 20. So assertion failed. So let's go back to the code and look one more time. If I change the value, look what happened. There is a certain little delay in the search. So when I type the value, it takes about half a second for the table to actually change the layout. So PlayWrite is running faster than the change of the layout of our table. So we need to create a delay between typing the value inside of the cell and until this filter actually will be applied. And this is like an animation. So we cannot create, unfortunately, any dynamic waiting here. So we just need to wait like half a second, create a hard-coded wait to wait until the value will be updated. So let's modify this. We need to do it here. Before getting all the rows, we need to create a wait page, wait for timeout, and we will provide just a short timeout of half a second. And let's run this one more time. Yeah, you can see filter is working right now, but it's failed at very last step. No data found because our assertion is not smart enough. It is expecting to have at 200 years old, but receive no data found. So we need to create condition inside of our loop that if the value is 200, we actually expecting to have no data found. For the other types of the ages, we expect it to receive the age as an output. So let's modify the script a little bit. And we type, if age equals two, 200, then we expect the assertion. Else, we expect this assertion for all other values. Okay, so we need just to find out this particular assertion locator. So going back, type in 200, right click, inspect, and we have no data found. And it is part of the T body. So it's directly right as part of the table. So we can say, okay, we can take the text from the table and it should contain no data found. We can type locator like that. Expect page dot get by role. We can take a table locator and we want to get all text content from the table. And we expect that this content to contain no data found. All right, and let's run this test one more time. All right, and right now this test is passed. We validated each of the search result inside of the test. So let's quickly summarize what we did in this lesson. When you look through the list of the roles, you can use a regular for loop. In our example, we use first a test data and then we looped through the each of the role to validate those expectations. So we created a simple locator to get all the roles. Then out of those roles need to create an array using all method. And then role represent the iterator for the role that you can access as a regular locator, finding the columns that you want to interact with. And you can also use a conditions to tailor your assertion based on the output of the table. All right, that's it guys. And see you in the next lesson.