Web Table Navigation | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Automation of User Interfaces
Instructor: Artem Bondar
Lesson Summary
Lesson Overview: This lesson focuses on automating web tables, which are often considered challenging UI components. The lesson is divided into two parts: navigating web tables and running loops/scenarios. HTML Table Structure The basic structure of an HTML table includes: <table> - the main table tag <thead> - the table header (optional) <tbody> - the table body (usually present) <tr> - table row <td> - table column Automating Table Interactions To automate interactions with a table: Identify the table row using a unique value (e.g., name). Use CyContains to find the row containing the unique value. Wrap the row with CyWrap to perform actions within it. Click on elements (e.g., edit button) using class selectors. Update values in input fields and confirm changes. Validate changes by checking the last cell's value. Handling Non-Unique Identifiers If unique identifiers are not available, you can: Use indexing to target specific rows or columns. Utilize methods like eq , first , and last to navigate through rows and columns. Conclusion: Automating web tables involves navigating by unique values or using indexes when necessary. Remember that indexing starts at zero.
Video Transcript
All right, guys, in this lesson, we will talk about web tables. And web tables considered one of the most difficult UI components to automate, at least one of the most confusing. We will have two lessons related to this subject. In this lesson, we will talk about how to navigate in the web table, and in the next lesson, about how to run loops and other scenarios, all right? So let's jump into it. So here is our tables and data and smart table page. This is what we're going to automate. First of all, let me show you the structure of the HTML table, so you would understand how it's designed in HTML. So I collapsed the whole thing, and yeah, this is the table. So table always starts with the table tag. Then table tag usually have thead and thead body. Thead related to table head, thead body related to the table body. Not always there is a table head, but almost always a T body. Okay, moving on. So inside of the table body, we have tag called tr. Tr represents table row. And inside of each table row, we have tds. So td tag is table column. So this is the structure. Table, table body, table rows, and table columns, which are tds. So and let's automate this scenario. Let's say we will find this guy, Larry Bird, and let's say that we will click on this Edit button. We will update the age for this user, and let's confirm this change. How would we do about that? Going back to the code. So I created a new test in UIComponentSpec file, and let's start. So first of all, I get the T body. So this is the starting tag where I start searching for my web elements. And we want to find table row with user Larry Bird. And the most convenient way to find any row in the table by the unique value in this table, for example, if you can use any ID or email or this name Larry will be also unique. So if the text in the table is unique, you can use it as identifier for the row. So Larry is a unique guy for this page, so let's look by its name. And we will use for that method CyContains. And we are looking for tr, which is table row that contains our guy Larry. And then I type then, and this will be our table row. Like this. And then we can perform any operations within this table row. So row is identify, then using CyWrap, I just wrap this table row, and then can do whatever I need. So first step, what I need to do is to click on this pencil, right? So inspect, this pencil is nbedit, and we have a bunch of pencils, right? So these pencils are all nbedit. But since we are working within the row, this will be a unique identifier for us. So I just type find, then class.nbedit.click. That's it, that's the first step. The next step, after we clicked on our Larry, we need to update this value. Let's find if this cell has any unique identifier. Right-click, inspect, and yep, it has a placeholder age that we can use, great. So placeholder age, and again, I'm typing CyWrap. Taking the same table row, and then find the element by the placeholder age. Then before typing anything into this input field, we need to clear this. So I clear the input field, and then type the new age, which is 35. And it should be a string like this, so I ripen it into the single quote. The next step, after we've done this, we need to confirm. So CyWrap, find, and we need the locator for this checkbox. Right-click, inspect, nb checkmark. It's also class, so it would work for us, nb checkmark dot click, like this. And the last step, after we did this modification, so let's say we change it to 35, yes, and then we need to make a validation, right? So, and look, currently this cell, so this is td, and then inside it has just some other tags, but we don't have anything unique. So how would we do about that? In a situation like this, so we have, this is a bunch of table cells. You see, I'm hovering over, and this is a table cells. So I can tell something like, hey, get the last cell inside of this table row, because this is literally the last cell, and just validate the value inside of it. This is what I'm gonna do. So, syrap table row, then find td, which is other columns, and find last cell inside of this table row. And it should have text 35, like this. So let's try to run this test. UIComponents, Cypress, and running this test, all right? Let me collapse this to make it bigger. And test passed successfully. So look, we found our row, then we found the cell, cleared it, updated the value, confirmed, and be checkmarked, found the last cell in the table, and made the validation. Well, so far, so good. So this is the first example. Let me mark it like number one, like this. So quick summary, if you want to find a row in the table, and this row has a unique value for the entire table, the best way would be to use method CyContains to find the row that you want to work with, and then within this row, using syrap, you can find the particular columns that you want to interact with, values of the columns, and so on. And we are moving to the next example, and let's say that you don't have identifiers, and you would need to use index. So this is example how to find by text. And if you don't have unique identifiers, IDs, or unique text, you can use how to find by index. And let's use the second example for this scenario. So let's say that we want to add a new value to the table. So we click on this plus button, then type, for example, John Smith, save a new value, and we want to validate that new value was added as a first row in the table. So let me delete this temporarily, and let's begin. So we start with this plus icon, and most likely it is unique, so we can just take nb plus and click on that, right? This is the first step. So I get, this is class nb plus, and just click on this guy. The next step, after we click on this, we have the new row showed up, and let's see where is it located, inspect. This is the input field that we need to type, John Smith. It is located inside of there. This is a table row, and this table row is located inside of the table head. Here we go, so look, it's pretty big. So this is a table head, it has three rows, one, two, three. And in the third row, that doesn't have any unique identifiers or something, this is where the cell is located, where we need to type the value. And look, this cell and this cell has exactly the same text for first name, first name, last name, username, email, and so on. We cannot use these text like first name or last name as a unique identifier. We need to use only indexes in this case. So yeah, let's do this. So we targeting table head and then tr. Within tr, we need to find the one, two, three, third table column and type value into it. So going back, and I type sci get, so this will be a t head. Then the child element will be tr, and we need to get it by index. And for that, you can use eq to get element by index. So we have three rows, index start with zero, so it will be 0, 1, 2. So the index will be 2. We get the second row, and then again, table, table row. And now we can do whatever stuff we need within this table row. So sci rep, table row, and find. And now we can probably use a unique identifier like this placeholder first name. Look, since we are now operating within the row, this will be a unique identifier. So placeholder first name, I can grab this placeholder first name. And then type John, then the same example, first name. It will be a last name, last name. Then we type Smith like this. And the last operation with this table row, we need to confirm this selection clicking on them. Probably this NB check mark, right? Yep, this is NB check mark. So find NB check mark dot click like this. So this step is completed. And after John Smith was created, let me do this John Smith. So this guy is created. Let's see where it was created, inspect. So it is a value in there, so table down, table row. So look, this is first row in the table, tbody, table row. So we're literally looking for the first row in the table, validating the third and fourth column. So let's write this code real quick. So I get tbody, then tr. Then by index, I can use method first, first row. And then I need to find all columns, which are td. And then this is my table columns, table columns, table columns. And we're making validation, sci, wrap, table columns. Then index of the column EQ will be 2 because this is a third column. Should have text, John. And the second one, table columns, index 3, should have text, Smith. And I think this is it, let's try to run this. So running the test, execution, and yeah, it was happened so quickly. But I think it passed. Look, we have a John Smith, and both validation passed successfully. Validation number one, validation number two. So that's it, guys. This is how you navigate and automate web tables, navigating either by value inside of the rows and cells, or navigating by the index if you don't have a unique identifier. So let's quickly summarize what we did in this lesson. So when you have something unique in your table, any unique values in any of the rows, you can grab this row in the table by this text, visible text. And then operating within this row, get the values inside of the cell. If your cells has unique identifier, grab them, or you can use index. If you are in situation when you don't have a unique identifiers, your only way to automate is to use indexes. Remember that every index start with zero. So the first row of the table will be zero, then one, two, and so on. You can use method EQ, or you can use built-in methods such as last and first to get the first element from the list or the last element from the list. All right, that's it, guys, and I'll see you in the next lesson.