Basic Usage

Simple examples of common table interactions.

Simple examples of common table interactions.

Simple examples of common table interactions.

Setup

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

test('basic table test', async ({ page }) => {
  await page.goto('https://datatables.net/examples/data_sources/dom');
  
  const table = useTable(page.locator('#example'), {
    headerSelector: 'thead th'
  });
  
  await table.init();
});

Finding a Row

// Find by single column
const row = await table.findRow({ Name: 'Airi Satou' });

// Find by multiple columns
const row = await table.findRow({
  Name: 'Airi Satou',
  Office: 'Tokyo'
});

// Exact match
const row = await table.findRow(
  { Name: 'Airi Satou' },
  { exact: true }
);

Getting Cell Values

const row = await table.findRow({ Name: 'Airi Satou' });

// Get cell locator
const emailCell = row.getCell('Email');

// Extract text
const email = await emailCell.textContent();
const position = await row.getCell('Position').innerText();

// Use in assertions
await expect(row.getCell('Office')).toHaveText('Tokyo');
await expect(row.getCell('Age')).toBeVisible();

Getting Multiple Rows

// Get all rows
const allRows = await table.findRows({});
console.log(`Found ${allRows.length} rows`);

// Filter rows
const tokyoEmployees = await table.findRows({ Office: 'Tokyo' });

// Iterate through rows
for (const row of allRows) {
  const name = await row.getCell('Name').textContent();
  console.log(name);
}

Exporting Data

// Get rows and convert to JSON
const rows = await table.findRows({});
const data = await rows.toJSON();

console.log(data);
// [
//   { Name: 'Airi Satou', Position: 'Accountant', Office: 'Tokyo', ... },
//   { Name: 'Angelica Ramos', Position: 'CEO', Office: 'London', ... },
//   ...
// ]

// Export specific row
const row = await table.findRow({ Name: 'Airi Satou' });
const rowData = await row.toJSON();
console.log(rowData);
// { Name: 'Airi Satou', Position: 'Accountant', Office: 'Tokyo', ... }

Clicking Cells

const row = await table.findRow({ Name: 'Airi Satou' });

// Click a cell
await row.getCell('Edit').click();

// Double-click
await row.getCell('Name').dblclick();

// Hover
await row.getCell('Actions').hover();

Getting All Column Values

// Get all names
const names = await table.map(({ row }) => row.getCell('Name').innerText());
console.log(names); // ['Airi Satou', 'Angelica Ramos', ...]

// With custom mapping logic
const salaries = await table.map(async ({ row }) => {
  const text = await row.getCell('Salary').innerText();
  return parseInt(text.replace(/[$,]/g, ''));
});

const avgSalary = salaries.reduce((a, b) => a + b) / salaries.length;
console.log(`Average salary: $${avgSalary}`);

Complete Example

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

test('employee table operations', async ({ page }) => {
  await page.goto('https://datatables.net/examples/data_sources/dom');
  
  const table = useTable(page.locator('#example'), {
    headerSelector: 'thead th'
  });
  
  await table.init();
  
  // Find specific employee
  const airi = await table.findRow({ Name: 'Airi Satou' });
  
  // Verify details
  await expect(airi.getCell('Position')).toHaveText('Accountant');
  await expect(airi.getCell('Office')).toHaveText('Tokyo');
  await expect(airi.getCell('Age')).toHaveText('33');
  
  // Get all Tokyo employees
  const tokyoEmployees = await table.findRows({ Office: 'Tokyo' });
  
  console.log(`Tokyo has ${tokyoEmployees.length} employees`);
  
  // Export data
  const data = await tokyoEmployees.toJSON();
  expect(data.every(emp => emp.Office === 'Tokyo')).toBe(true);
});