Playwright web table concept | Playwright Typescript tutorial - Part 92

• 01:00 Identifying table and printing headers
• 03:00 Finding rows and columns count
• 05:40 Checking the checkbox using reusable method
• 08:30 Traditional way of handling web table

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.