Pagination Examples of handling paginated tables.
Basic Pagination
typescript
import { useTable, Strategies } from '@rickcedwhat/playwright-smart-table';
const table = useTable(page.locator('#table'), {
strategies: {
pagination: Strategies.Pagination.click({ next: '.pagination .next' })
}
});
await table.init();Finding Across Pages
typescript
// Automatically searches all pages
const row = await table.findRow({ Name: 'Cedric Kelly' });
// Limit search to 5 pages
const row = await table.findRow(
{ Department: 'Engineering' },
{ maxPages: 5 }
);Getting All Matching Rows
typescript
// Find all engineers across all pages
const engineers = await table.findRows({
Department: 'Engineering'
});
console.log(`Found ${engineers.length} engineers`);
// Limit pages
const engineers = await table.findRows(
{ Department: 'Engineering' },
{ maxPages: 10 }
);Iterating Through All Pages
typescript
await table.forEach(async ({ row, rowIndex }) => {
const name = await row.getCell('Name').textContent();
console.log(`${rowIndex}: ${name}`);
});Scanning Column Values
typescript
// Get all email addresses across all pages
const emails = await table.map(({ row }) => row.getCell('Email').innerText());
// With page limit
const emails = await table.map(({ row }) => row.getCell('Email').innerText(), {
maxPages: 5
});Custom Pagination Strategy
typescript
const table = useTable(page.locator('#table'), {
strategies: {
pagination: {
goNext: async ({ page, rootLocator }) => {
const nextBtn = page.locator('.custom-next-button');
// Check if there are more pages
const isDisabled = await nextBtn.isDisabled();
if (isDisabled) {
return false;
}
// Navigate to next page
await nextBtn.click();
await page.waitForLoadState('networkidle');
return true;
}
}
}
});Page Number Pagination
typescript
const table = useTable(page.locator('#table'), {
strategies: {
pagination: Strategies.Pagination.ClickPageNumber({
pageNumberSelector: (pageNum) =>
page.locator(`.pagination button:has-text("${pageNum}")`)
})
}
});Complete Example
typescript
import { test, expect } from '@playwright/test';
import { useTable, Strategies } from '@rickcedwhat/playwright-smart-table';
test('paginated table search', async ({ page }) => {
await page.goto('https://datatables.net/examples/data_sources/dom');
const table = useTable(page.locator('#example'), {
headerSelector: 'thead th',
strategies: {
pagination: Strategies.Pagination.click({ next: '#example_next' })
},
maxPages: 10
});
await table.init();
// Find row that might be on any page
const row = await table.findRow({ Name: 'Cedric Kelly' });
await expect(row.getCell('Position')).toHaveText('Senior JavaScript Developer');
// Get all San Francisco employees (across all pages)
const sfEmployees = await table.findRows({
Office: 'San Francisco'
});
console.log(`Found ${sfEmployees.length} SF employees`);
// Export all data
const allData = await table.map(async ({ row }) => {
return row.toJSON();
});
console.log(`Total employees: ${allData.length}`);
});