In this video, we'll learn how to handle web table concept using #playwright
In this video tutorial, we learn how to handle web table concepts using Playwright TypeScript. The main goal of this video is to check a checkbox if the last name matches "Raj", using two approaches - the traditional way of handling tables and an easier method using Playwright.
Firstly, we identify a table on the page using its CSS selector and store it in a variable. Next, we go through the table header, print the headers, and find the appropriate table tags - table head (th), table row (tr), and table data (td).
We then find the rows and columns count for the table using Playwright locators. With these counts in hand, we can perform the main task - checking the checkbox if the last name matches "Raj". To achieve this, we write a reusable method that filters the rows for the given name and checks the corresponding checkbox.
The video also shows how to handle data fetching from the web table in a traditional manner, i.e., finding rows, iterating through columns, checking the text content of each cell, and performing the required action based on the given condition. Using Playwright, this task can be performed using the 'filter' method, which makes it much simpler.
In conclusion, handling web table concepts using Playwright TypeScript involves finding the appropriate table elements, iterating through rows and columns, filtering data based on conditions, and performing the required action. With Playwright, this process becomes much simpler and easier to manage.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email firstname.lastname@example.org.