8.7Locator Best Practices for Complex UIs

Data Tables

// Find a specific cell in a table
const row = page.getByRole('row').filter({ hasText: 'user@example.com' });
const status = await row.getByRole('cell').nth(3).textContent();

// Verify an entire row
await expect(row).toContainText(['user@example.com', 'Active', 'Admin']);

Dynamic Lists

// Wait for list to load, then interact with a specific item
await expect(page.getByRole('listitem')).toHaveCount(10);

const item = page.getByRole('listitem').filter({ hasText: 'Important Task' });
await item.getByRole('checkbox').check();
await expect(item).toHaveClass(/completed/);

Modal Dialogs

// Scope interactions to the modal
const modal = page.getByRole('dialog');
await modal.getByLabel('Name').fill('New Project');
await modal.getByRole('button', { name: 'Create' }).click();
await expect(modal).not.toBeVisible();