Playwright Smart Table

Production-ready table testing for Playwright with smart column-aware locators.

📚 Full Documentation →

Visit the complete documentation at: https://rickcedwhat.github.io/playwright-smart-table/

Why Playwright Smart Table?

Testing HTML tables in Playwright is painful. Traditional approaches are fragile and hard to maintain.

The Problem

Traditional approach:

// ❌ Fragile - breaks if columns reorder
const email = await page.locator('tbody tr').nth(2).locator('td').nth(3).textContent();

// ❌ Brittle XPath
const row = page.locator('//tr[td[contains(text(), "John")]]');

// ❌ Manual column mapping
const headers = await page.locator('thead th').allTextContents();
const emailIndex = headers.indexOf('Email');
const email = await row.locator('td').nth(emailIndex).textContent();

The Solution

Playwright Smart Table:

// ✅ Column-aware - survives column reordering
const row = await table.findRow({ Name: 'John Doe' });
const email = await row.getCell('Email').textContent();

// ✅ Auto-pagination
const allEngineers = await table.findRows({ Department: 'Engineering' });

// ✅ Type-safe
type Employee = { Name: string; Email: string; Department: string };
const table = useTable<Employee>(page.locator('#table'));

Quick Start

Installation

npm install @rickcedwhat/playwright-smart-table

Basic Usage

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

const table = await useTable(page.locator('#my-table')).init();

// Find row by column values
const row = await table.findRow({ Name: 'John Doe' });

// Access cells by column name
const email = await row.getCell('Email').textContent();

// Search across paginated tables
const allActive = await table.findRows({ Status: 'Active' });

Key Features

• 🎯 Smart Locators - Find rows by content, not position
• 📄 Auto-Pagination - Search across all pages automatically
• 🔍 Column-Aware Access - Access cells by column name
• 🛠️ Debug Mode - Visual debugging with slow motion and logging
• 🔌 Extensible Strategies - Support any table implementation
• 💪 Type-Safe - Full TypeScript support
• 🚀 Production-Ready - Battle-tested in real-world applications

When to Use This Library

Use this library when you need to:

• ✅ Find rows by column values
• ✅ Access cells by column name
• ✅ Search across paginated tables
• ✅ Handle column reordering
• ✅ Extract structured data
• ✅ Fill/edit table cells
• ✅ Work with dynamic tables (MUI DataGrid, AG Grid, etc.)

You might not need this library if:

• ❌ You don't interact with tables at all
• ❌ You don't need to find a row based on a value in a cell
• ❌ You don't need to find a cell based on a value in another cell in the same row

Documentation

📚 Full documentation available at: https://rickcedwhat.github.io/playwright-smart-table/

• Getting Started Guide
• Core Concepts
• API Reference
• Examples
• Troubleshooting

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Cedrick Catalan

Links

• Documentation
• npm Package
• GitHub Repository
• Issues