Web Tables Prompts | Bondar Academy
Course: Mastering testRigor
Module: Interation with Web Elements
Instructor: Artem Bondar
Lesson Summary
This lesson focuses on automating web tables , which are considered complex UI components in test automation. The process is simplified using Test Trigger with clear prompts. The lesson progresses from simple to complex examples. Key Concepts Covered Deleting Rows by User Email: Identify the row by the unique user email. Use the click command on the trash icon with a partial class value. Example prompt: Click on trash in the context of table at row containing [email] . Deleting Rows by ID: Use unique ID values to delete specific rows. Ensure to specify exact matches to avoid incorrect deletions. Example prompt: Click on trash in the context of table at row containing exactly [ID] . Handling Pagination: Navigate to specific pages using pagination controls. Example prompt for pagination: Click [page number] in the context of pagination . Selecting Values by Coordinates: Identify specific cells using row and column parameters. Example prompt: Click on table at row containing [value] and column [column name] . Using Relative Positioning: Utilize relative locations to select elements when context-based prompts fail. Example prompt: Click on trash completely below actions and to the left of [value] . In summary, the lesson emphasizes using contextual prompts for interacting with web tables, ensuring precise actions through exact matches, and leveraging relative positioning when necessary.
Video Transcript
In this lesson, we will talk about how to automate web tables. So, web tables considered is one of the most complex UI components from test automation perspective. But Test Trigger made this process more seamless with the help of very clear and understandable prompts. So, in this lesson, we will practice some of those prompts, starting from simple examples, and increase complexity slowly from prompt to prompt, showing you different examples. So, let's get into it. So, here is our tables and data page and smart table. And with this smart table, we will practice around in this lesson. So, let's start with some simple example. For example, we want to delete the third row with this user, Larry Bird. We want to click on this trash icon. And let's say we want to delete this user by a user email. Since the user email is a unique for this table, it can be used as a unique identifier. Now, the next question, how to click on this trash? So, let's make right click and inspect. Since this icon doesn't have any text, we need to look for hidden identifiers related to it. And we can use this class and be trash and select this icon by this class. And also, you not necessarily need to provide the full value of the class. You can provide just partial value. So, it will be more meaningful. Something click, trash. And in the prompt, it also will look pretty natural that we want to click on trash. And we'll click on this icon. So, let's get into it. And I will start a new test. So, first I need to navigate to tables and data. And data and then click on smart table page. Smart table page. And the first simple example will be delete by email. So, we start our prompt as usual with action. So, we want to click on what? On the icon trash. And we can use the partial value of CSS, which is trash. And then your prompt will have this expression. In the context of table. By this phrase, you tell a test trigger to look in the context of the entire table. And then we want to do what? To click only on the icon that belongs to the row where this value of email is located. So, let me copy this. And the prompt would look like this. Click on trash in the context of table at row containing and value that we are looking for. And that's pretty much it. So, very human readable expression. Test trigger will look for row containing this email in the context of table. And then click on the trash icon. So, let's check this out. Add and run a new test. All right. Test completed. Let's check it out. The screenshot. So, here we go. We found the row related to the email that we were looking for and clicked on the trash icon. And then next, we can see that the row with ID number three that we clicked does not exist in the table anymore. All right. So, let's move on. So, let's say that we want to delete the value from the table by using ID, by using this column. So, we can see that those values of IDs are unique and as they supposed to be unique. So, we can say something like, hey, let's delete the row that contains one and or contains two. And let's see what happen. So, I call it delete by ID. And I will use the same template. Click on trash in the context of table at row containing and we are looking for example, two. So, we expect that row with ID two will be deleted. So, let's run this test and let's see what's going to happen. All right. Test completed. And let's check the screenshot. And look what we have. Even if we told to delete the row that containing two and we expected that test trigger will pick this row, right? Instead, what was happened, it picked the very first row. Because why? We have also column H that has 28. And 28 contains two as well. And since this is the first row, the first row was deleted instead of the second row. So, how can we overcome this situation making sure that test trigger will pick exactly the ID that we are looking for? And to do this is very easy. So, we need to provide that we are looking for exactly two. And in this situation, test trigger will not look for partial match. It will look for exact match of the value inside of the table. And let's run this test one more time. All right. Test passed. Let's check it out. And here we go. Now, it worked exactly as we expected. So, test trigger found the exactly value two and selected the trash related to this row in the table. That worked as expected. All right. Moving on. So, trick with ID exactly two worked. That worked as expected. All right. Moving on. So, trick with ID exactly two worked over here because here we have a single digits. And in column H, we have double digits. But if I go, for example, to some other pages, let's say to the page number four, we may have a situation like this. Because we have ID, for example, a person with the ID 37. But at the same time, we have a person under ID 35 with age 37. So, we have a match. And if we want to delete the person by ID 37 and we'll say, hey, delete the trash in the context of table with the row containing exactly 37, this user will be picked up instead because row with a value 37 located earlier in the table than the row with ID 37. So, how will we overcome this? So, we need somehow to tell test trigger to pick up exactly the column ID with ID 37 and not just any value in any column inside of the rows. So, how would we do about this? So, let me type a new prompt. The exactly column value by ID, something like this. So, to demonstrate this scenario, first of all, we will need to navigate to this fourth page. So, how would we do this? Let's right click inspect and see what we can find out. So, we need to find the section where is this number four is located, making sure that this ID four will not be picked up. So, we need to find this section. So, we have this class pagination over here that includes all values of all pages. So, we can find four in the context of pagination. So, let's do this. And we type click four in the context of pagination. That's it. And now, let's try to create the prompt to delete the trash icon for the user with ID exactly 37. So, how would we do this? I'll copy the beginning of the prompt, which we'll start with. Click on trash in the context of table. And then we need to provide the column name where we want to click on this. So, let's go up. And we have column ID with the name ID. And we type with exactly ID equals to 37. And then we need to provide a relative location of the trash icon. Where is it located in our table? And this trash icon is located here in actions column. So, let's put this as well. At column actions. Something like this. All right. Let's try it and to see if this prompt is working or not. Okay. So, we have some weird error. No pointer with can't recognize action on trash in the context of table. All right. So, let's try to put the type for this trash icon. And let's see if this will work. Okay. This worked. Let's see how this will be executed. All right. Test pass. And let's check from this screenshot. So, we found page number four inside of the pagination in the context of pagination. Click on that. Then we navigate it to page number four. And here we go. The ID 37 was selected next to the trash icon. So, we selected trash in the column actions. In the column ID we found 37. And we skipped the line that was related this for this age. So, this worked perfectly fine. All right. One more example. You also can select the values inside of the table by providing two relative locators. So, for example, the value inside of the row and column where this value is located. So, by row and column parameters, you can specify which exact cell you want to click. And let me call this example. Select the value by coordinates. And for this example, let's look in our table. And if we navigate to the first page, so we initially was on the page number four. Let's say we will want to go back to page number one. How we can do that? So, right click, inspect. So, so, so. Okay. So, this icon right here has the text first. Perfect. So, if we click on first span over here, it will navigate us back to the initial page. So, let's do this first. Click on first in the context of pagination. Navigate back to our initial page. And now on the first page, let's say that we want to click in this cell where n is located. We want to click exactly into this cell. So, how would we do about this? We need to find the row where this tag is located and the column where this tag is located. And by providing the row and column, we will select the cell inside of the table. And the prompt would look like this. Click on table at row containing. And we are looking for n and column user name. This is the name of the column that we are looking for. All right. Click on table at row containing n and column user name. And click will be performed into the cell with the user name n. And let's run this test. Okay. We are missing something else. Missing a reference to the element. Click on table row containing n and column user name. And I made a misspell right here. Table at row containing the column. Update and retest. All right. Let's see this execution. All right. Test was completed. Let's check it out. And here we go. The click was performed into a cell inside of the table where the n is located in the row and the column user name. So, the cell was picked correctly. All right. So, all these prompt example are specifically table type of prompts. When you use the context of table and providing the row or the column values to select the value in the table. But if something doesn't work for you using in the context of table selecting row or particular column, you can always use a traditional relative location inside of the table as well. It will work completely the same. So, let's say that we want to select or delete this user Ruben by the email. And we want to click on this trash icon in relation to this text. This also will work like a normal relative location. So, let me show you this. Click using relative position. And my prompt would look like click on trash completely below actions. Actions is this column that we are looking for. So, we want to select completely below actions. And to the left of and value inside of the table that we are looking for. So, this email address right here. All right. So, let's run this test. All right. Test completed. Let's see the screenshot. And here we go. So, we use a precise relative location. We picked the trash icon completely below the actions and to the left of email address that we are looking for. All right. So, let's quickly summarize what we did in this lesson. You can use a construction inside of your prompt in the form of in the context of table when you want to interact with the table rows or table columns. The most typical example would be is to interact with a table in the context of particular row if your row have enough unique element. If you want to select the row in the table by exact values in the table, you need to use a keyword exactly and provide the value that you are looking for. Also, you can find values by particular column and values in the particular column. In this example, the context will look a little bit more complex. Your prompt will be a little bit more complex. You need to use exactly, then column ID, then the value that you are looking for, and the context of the column where you want to perform a particular action. Also, you can pick the particular cell inside of the column by providing the row and column name which cell you want to pick. And you will need to use click on table and then provide row and the column where you want to pick. And if something will not work, if in the context of table and any other prompts will not do what they supposed to be doing and you can't select the element that you are looking for, you can always use a relative position and a relative location with a precise location using a keyword completely and using two elements in the table. Find the needed value in the table that way. All right, that's it, guys, and see you in the next lesson.