How to Handle Web Tables | Playwright TypeScript Tutorial | IX | LambdaTest

From The House of LambdaTest LambdaTest Tutorials
,
1

Hello, Testers! :wave: Ready to level up your Playwright skills? :rocket:

Check out our latest tutorial: How to Handle Web Tables | Playwright TypeScript Tutorial | IX.

Learn step-by-step how to work with web tables, handle rows & columns, and apply filters seamlessly using Playwright and TypeScript. Perfect for automation enthusiasts!

:tv: Watch now:

2

Again a good insight video by Vignesh,

The way is to handle the web table was really nice and helpful, but I would also like to share how I handle web tables It is mostly similar but just sharing

One simple approach to handle web tables in Playwright is by targeting the table rows and columns directly using Playwright’s powerful selector capabilities. import { chromium } from ‘playwright’;

(async () => { const browser = await chromium.launch(); const page = await browser.newPage(); await page.goto(‘https://example.com/table’); // Example URL with a table

// Get the table and loop through each row const rows = await page.$$(‘table tr’); // Select all table rows for (const row of rows) { const cells = await row.$$(‘td’); // Get the cells in each row const cellData = [];

for (const cell of cells) {
  cellData.push(await cell.innerText()); // Push the cell's text to an array
}
console.log(cellData); // Print data for each row

}

await browser.close(); })();

:star2: This allows you to extract data from each table row and column, which is useful for reading and scraping table data.

3

I agree with @joe-elmoufak on the idea of handling web stability, but If you want to interact with a specific cell or row in a web table, you can target elements based on their text or position using Playwright selectors.

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/table'); // Example URL with a table

  // Select a table row by matching cell text and click a button in that row
  const targetRow = await page.locator('table tr >> text="Some Specific Text"');
  const targetButton = targetRow.locator('button'); // Assuming there's a button in the row
  await targetButton.click(); // Click the button in the target row
  
  await browser.close();
})();

:bulb: This approach is useful for automation tasks that involve clicking on specific rows or buttons within a table based on their contents.

4

Just adding to what @joe-elmoufak & @devan-skeem shared

Another common requirement when working with tables is sorting or filtering data based on specific criteria. You can interact with the table to sort it or apply filters.

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/sortable-table'); // Example URL with a sortable table

  // Sort the table by clicking the column header
  const sortColumn = await page.locator('table th >> text="Price"'); // Assuming you want to sort by 'Price' column
  await sortColumn.click(); // Click to sort
  
  // Optionally, extract data from the table after sorting
  const sortedRows = await page.$$('table tr');
  for (const row of sortedRows) {
    const cells = await row.$$('td');
    const rowData = [];
    
    for (const cell of cells) {
      rowData.push(await cell.innerText());
    }
    console.log(rowData); // Print sorted row data
  }

  await browser.close();
})();

This is handy when you need to interact with sortable tables and extract data after sorting or filtering.