How to Handle WebTable/Pagination Table in playwright

In this example we will explore how to handle web table and dynamic web table in playwright with practical example. Handling web tables with pagination in Playwright involves interacting with paginated data, such as clicking through "Next" buttons, extracting table data from each page, and possibly stopping once a condition is met (e.g., data found or no more pages).

Understand the Table Structure

Before automating, inspect the HTML structure using browser DevTools:

1. <table> with <thead> and <tbody>
2. Pagination controls (Next, Previous, page numbers)
3. Dynamic loading indicators (e.g., spinner or "Loading...")

✅ Locate the Table

Finds the table using a CSS selector (class='table table-striped') and stores it in a variable table.

const table = await page.locator("[class='table table-striped']");

✅ Count the Rows

const rows = await table.locator("tbody tr");
console.log("Total number of rows :- " + await rows.count());
await expect(rows).toHaveCount(4);

• Locates all the rows in the <tbody> section of the table.
• Logs the count of rows.
• Asserts that there are 4 rows (a sanity check or expectation).

✅ Count the Columns

const columns = await table.locator("thead tr th");
console.log("Total number of columns :- " + await columns.count());
await expect(columns).toHaveCount(5);

• Locates all the column headers (<th>) in the <thead> row.
• Logs the number of columns.
• Asserts that there are 5 columns.

✅ Print Row and Column Data

for(let i =0 ; i < await rows.count(); i++){
    const row = await rows.nth(i);
    const tds = await row.locator("td");
    console.log(` --------- Printing Row - ${i}  -------------- `);

    for(let j =0 ; j < await tds.count(); j++){
        const tdata = await tds.nth(j).textContent();            
        console.log(" -- " + tdata  + " -- ");
    } 
    console.log(" --------------------------------------------- ");
}

• Loops through each row.
• For each row, gets all the cells (<td>) and loops through them.
• Prints the content of each cell.
• This effectively prints the entire data of the table, row by row.

Complete example to handle web table in playwright.

This script demonstrates:

1. How to locate and count table rows and columns.
2. How to validate the structure of a table using assertions.
3. How to extract and print data from a dynamic HTML table using Playwright.

import { test, expect } from '@playwright/test';

test('Handle web table in playwright', async ({ page }) => {    
    await page.goto('https://practice.expandtesting.com/dynamic-table');    
    
    const table = await page.locator("[class='table table-striped']");
    
    // Get Total no of rows
    const rows = await table.locator("tbody tr");
    console.log("Total number of rows :- " + await rows.count());
    await expect(rows).toHaveCount(4);
    
    // Get Total no of columns
    const columns = await table.locator("thead tr th");
    console.log("Total number of columns :- " + await columns.count());
    await expect(columns).toHaveCount(5);

    // Print row and colums data
    for(let i =0 ; i < await rows.count(); i++){

        const row = await rows.nth(i);
        const tds = await row.locator("td");
        console.log(` --------- Printing Row - ${i}  -------------- `);

        for(let j =0 ; j < await tds.count(); j++){
            const tdata = await tds.nth(j).textContent();            
            console.log(" -- " + tdata  + " -- ");
        } 

        console.log(" --------------------------------------------- ");
    }    
});

Output :

 D:\playwright Project\Playwright-tutorial> npx playwright test web-table.spec.js --project=chromium --headed

Running 1 test using 1 worker

     1 [chromium] › tests\web-table.spec.js:3:5 › Handle web table in playwright
Total number of rows :- 4
Total number of columns :- 5
 --------- Printing Row - 0  -------------- 
 -- Internet Explorer --
 -- 0 MB/s -- 
 -- 7.4 Mbps --
 -- 3.5% -- 
 -- 45.6 MB -- 
 ---------------------------------------------
 --------- Printing Row - 1  --------------
 -- System -- 
 -- 0.6 MB/s --
 -- 8.5 Mbps -- 
 -- 9.9% --
 -- 76.5 MB -- 
 ---------------------------------------------
 --------- Printing Row - 2  -------------- 
 -- Chrome --
 -- 0.8 MB/s -- 
 -- 1.8 Mbps --
  ✓  1 [chromium] › tests\web-table.spec.js:3:5 › Handle web table in playwright (4.0s)
 -- 49.4 MB --
 ---------------------------------------------
 --------- Printing Row - 3  -------------- 
 -- Firefox --
 -- 0.5 MB/s -- 
 -- 2.5 Mbps --
 -- 1.5% -- 
 -- 62.6 MB --
 --------------------------------------------- 

  1 passed (5.7s)

This is all about handling web table in playwright with details explanation.