To test tables using @playwright/test, first locate the table elements using Playwright's built-in locators. For example, you can find a table with the data-testid
attribute:
import { test, expect } from '@playwright/test';
test('Interact with table', async ({ page }) => {
await page.goto('https://ray.run/table-example');
const table = page.locator('[data-testid="example-table"]');
});
Once you have the table element, interact with its cells by clicking or entering data:
await table.locator('tr:nth-child(2) td:nth-child(1)').click();
await table.locator('tr:nth-child(3) td:nth-child(2)').fill('New data');
data-testid
.toBeVisible()
instead of isVisible()
for more resilient tests.--debug
flag to step through your test code and view actionability logs in real-time.By following these best practices and utilizing debugging tools, you can effectively test tables with Playwright and ensure reliable test results.
If you still have questions, please ask a question and I will try to answer it.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].