Sample HTML Table

<table id="employeeTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Department</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>101</td>
            <td>John</td>
            <td>QA</td>
            <td>50000</td>
        </tr>
        <tr>
            <td>102</td>
            <td>David</td>
            <td>Developer</td>
            <td>70000</td>
        </tr>
        <tr>
            <td>103</td>
            <td>Smith</td>
            <td>Manager</td>
            <td>90000</td>
        </tr>
    </tbody>
</table>

---

1. Read Entire Table

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

test('Read complete web table', async ({ page }) => {

    await page.goto('https://example.com');

    const rows = page.locator('#employeeTable tbody tr');

    const rowCount = await rows.count();

    for (let i = 0; i < rowCount; i++) {

        const cells = rows.nth(i).locator('td');

        const cellCount = await cells.count();

        for (let j = 0; j < cellCount; j++) {

            const value = await cells.nth(j).textContent();

            process.stdout.write(`${value}\t`);
        }

        console.log();
    }

});

Output

101     John     QA          50000
102     David    Developer   70000
103     Smith    Manager     90000

---

2. Read Specific Row

Example: Read the second row.

const secondRow = page.locator('#employeeTable tbody tr').nth(1);

const cells = secondRow.locator('td');

console.log(await cells.nth(0).textContent());
console.log(await cells.nth(1).textContent());
console.log(await cells.nth(2).textContent());
console.log(await cells.nth(3).textContent());

Output

102
David
Developer
70000

---

3. Read Specific Column

Example: Read all employee names.

const names = page.locator('#employeeTable tbody tr td:nth-child(2)');

const count = await names.count();

for (let i = 0; i < count; i++) {
    console.log(await names.nth(i).textContent());
}

Output

John
David
Smith

---

4. Read Cell by Row and Column

Example: Row 2, Column 3

const value = await page
    .locator('#employeeTable tbody tr')
    .nth(1)
    .locator('td')
    .nth(2)
    .textContent();

console.log(value);

Output

Developer

---

5. Find Row Using Text

Find employee “David”.

const row = page.locator('#employeeTable tbody tr').filter({
    hasText: 'David'
});

console.log(await row.textContent());

Output

102 David Developer 70000

---

6. Read Salary of a Specific Employee

const rows = page.locator('#employeeTable tbody tr');

const rowCount = await rows.count();

for (let i = 0; i < rowCount; i++) {

    const name = await rows.nth(i).locator('td').nth(1).textContent();

    if (name === 'David') {

        const salary = await rows.nth(i).locator('td').nth(3).textContent();

        console.log(salary);

        break;
    }
}

Output

70000

---

7. Store Table Data in an Array

const tableData: string[][] = [];

const rows = page.locator('#employeeTable tbody tr');

const rowCount = await rows.count();

for (let i = 0; i < rowCount; i++) {

    const rowData: string[] = [];

    const cells = rows.nth(i).locator('td');

    const cellCount = await cells.count();

    for (let j = 0; j < cellCount; j++) {

        rowData.push((await cells.nth(j).textContent())?.trim() || '');
    }

    tableData.push(rowData);
}

console.log(tableData);

Output

[
  ['101', 'John', 'QA', '50000'],
  ['102', 'David', 'Developer', '70000'],
  ['103', 'Smith', 'Manager', '90000']
]

---

8. Store Table Data as Objects

interface Employee {
    id: string;
    name: string;
    department: string;
    salary: string;
}

const employees: Employee[] = [];

const rows = page.locator('#employeeTable tbody tr');

const rowCount = await rows.count();

for (let i = 0; i < rowCount; i++) {

    const cells = rows.nth(i).locator('td');

    employees.push({
        id: (await cells.nth(0).textContent())?.trim() || '',
        name: (await cells.nth(1).textContent())?.trim() || '',
        department: (await cells.nth(2).textContent())?.trim() || '',
        salary: (await cells.nth(3).textContent())?.trim() || '',
    });
}

console.log(employees);

Output

[
  {
    id: '101',
    name: 'John',
    department: 'QA',
    salary: '50000'
  },
  {
    id: '102',
    name: 'David',
    department: 'Developer',
    salary: '70000'
  }
]

---

9. Verify Data Exists in the Table

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

const employeeNames = page.locator('#employeeTable tbody tr td:nth-child(2)');

await expect(employeeNames).toContainText([
    'John',
    'David',
    'Smith'
]);

---

10. Read Table Headers

const headers = page.locator('#employeeTable thead th');

const count = await headers.count();

for (let i = 0; i < count; i++) {
    console.log(await headers.nth(i).textContent());
}

Output

ID
Name
Department
Salary