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:
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.
*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.
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.
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 written in English:
It then interacts with the child locator Add to Cart that exists within that row.
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!
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.
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.
For more insights on Playwright automation, check out our blog post on Creating Reusable API Methods with Playwright Mimicking the Page Object Model. Additionally, if you're interested in enhancing your Playwright tests, you might find our article on Our #1 Solution to Playwright Flakiness - WaitForResponse, WaitForRequest, Promises helpful.
%20(1).svg)