.png)
.png)
Working with Tables in Playwright that are Not Marked as Table/TR
Ben Fellows
Playwright provides a range of built-in methods and functions that can be used to locate and interact with table elements on a webpage, making it a great tool for working with tables in automated tests. With the ability to locate specific cells, rows, or columns using CSS selectors, retrieve the text content of cells, and perform actions like clicking and filling form elements within the table, Playwright offers a range of options for handling tables in automated tests.
Here is a great example for beginners - Playwright Solutions
In this article, we will cover the following topics:
- Using unique elements in a table to select specific rows or cells
- Interacting with tables or grids in Playwright without using table/tr elements
- Handling tables within tables in Playwright
- The benefits of thinking of everything as a grid in Playwright automation
Selecting Specific Rows or Cells in a Table Using Unique Elements
One common challenge when working with tables is selecting specific rows or cells when the elements are not uniquely identified. One solution to this problem is to use unique elements within the table as a way to identify specific rows or cells.
Take the following example, consider a table of books on an online bookstore's website that includes a "Add to Cart" button for each book. The rows in the table are not uniquely identified, but each book has a unique title. We can use the title of the book as a unique identifier to locate the correct row in the table and click on the "Add to Cart" button within that row.
Here is Test Case:
- Navigate to the online bookstore's website.
- Once I have found the book's row in the table, I will click on the "Add to Cart" button associated with that book.
- The book will be added to my cart and I will be able to proceed to checkout.
Problem:
- There are 6 "Add to Cart" buttons that are not unique in a table of books on an online bookstore's website. The order of the books may change, which eliminates the possibility of using the nth-child selector to locate the correct button (this is also just a hacky process).
Solution:
- Use the name of the book as a unique identifier to locate the correct "Add to Cart" button.
Example code:
*It is very important your row-locator matches all rows
When using this line of code in a test, you would replace "text=HP2" with an argument to be passed into the test function. This argument would represent the name of the specific book that you want to add to the cart.
Example code:
In this example, the addBookToCart function takes a single argument, bookName, which is a string representing the name of the book to be added to the cart. The function uses this argument to construct a CSS selector that will locate the correct row in the table using the data-book-name attribute. The function then clicks on the "Add to Cart" button within that row.
Arguments are variables that are passed into a function when it is called. They are used to provide input to the function and allow the function to be used in multiple different situations by providing different input each time it is called. In the case of the addBookToCart function, the bookName argument allows the function to be used to add any book to the cart, as long as the correct name is passed in as an argument.
Interacting with Tables or Grids in Playwright Without Using Table/TR Elements
When you don’t have HTML table elements like ‘table’ and ‘tr’, the solution is to think of everything as a table or grid. Instead of looking for a specific table or row elements, you can use element locators to locate cells or groups of cells within the table and interact with them as needed.
For the example above, the grid was the display of books. The “row” is each block of information about the book. The "cells" are each element in the book block.
Our code is written in English:
- Defines the Book Blocks as the rows in the table.
- It determines the row you want to interact with based on the Book Title.
It then interacts with the child locator Add to Cart that exists within that row.
Handling Tables Within Tables is An Extension of That Logic
If you want to interact with an element that isn’t unique & in a row that isn’t unique, but does exist in a parent row that IS unique - the same logic applies!
Example code:
The Benefits of Thinking of Everything as a Grid in Playwright Automation
Thinking of everything as a grid is helpful because it allows you to approach the task of locating and interacting with elements on a webpage in a more flexible and generic way.
When you think of everything as a grid, you can use element locators to locate specific cells or groups of cells within the grid, regardless of the underlying HTML structure of the page. This can be especially useful when working with pages that have complex or irregular HTML structures, or when the structure of the page may change over time.
In summary, thinking of everything as a grid can help you to write more reusable and flexible automation scripts, and to better handle changes to the HTML structure of the pages you are interacting with. It can also help you to better understand the layout and structure of the page, and to identify patterns and relationships between different elements on the page.
Conclusion
In this article, we have discussed how to use Playwright to handle tables in automated tests. We have covered techniques for selecting specific rows or cells in a table using unique elements, interacting with tables or grids in Playwright without using table/tr elements, handling tables within tables, and the benefits of thinking of everything as a grid in Playwright automation. By using these techniques, you can write more flexible and generic code for interacting with tables and grids in Playwright, making it easier to automate interactions with web pages that have complex or changing HTML structures.
