Playwright Smart Table

Appearance

Getting Started ​

Learn how to install and use Playwright Smart Table in your tests.

Installation ​

bash
npm install @rickcedwhat/playwright-smart-table
# or
yarn add @rickcedwhat/playwright-smart-table
# or
pnpm add @rickcedwhat/playwright-smart-table

Quick Start ​

typescript
import { test, expect } from '@playwright/test';
import { useTable } from '@rickcedwhat/playwright-smart-table';

test('find and verify employee', async ({ page }) => {
  await page.goto('https://datatables.net/examples/data_sources/dom');
  
  // Initialize table
  const table = useTable(page.locator('#example'));
  await table.init();

  // Get a row by content (current page)
  const row = table.getRow({ Name: 'Airi Satou' });
  
  // Verify cell values (returns Locator)
  await expect(row.getCell('Position')).toHaveText('Accountant');
  await expect(row.getCell('Office')).toHaveText('Tokyo');
});

Why This Works ​

Notice how we:

  • Get rows by content (Name: 'Airi Satou') instead of fragile XPath
  • Access cells by column name (getCell('Position')) instead of index
  • No manual column mapping - the library reads headers automatically

TIP

Use getRow() for fast lookups on the current page. Use findRow() when you need to search across multiple paginated pages.

Configuration ​

Customize selectors for your table structure:

typescript
const table = useTable(page.locator('#table'), {
  headerSelector: 'thead th',  // Optional, defaults to 'thead th'
  rowSelector: 'tbody tr',     // Optional, defaults to 'tbody tr'
  cellSelector: 'td'           // Optional, defaults to 'td'
});

Next Steps ​