How do I use Playwright to interact with and test tables on a webpage?


Interacting with Tables in Playwright

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');

Best Practices for Testing Tables

  1. Control the data: Test against a staging environment and ensure the data doesn't change during testing.
  2. Avoid third-party dependencies: Test only what you control, and avoid external links or servers that may slow down or fail your tests.
  3. Prioritize user-facing attributes: Use locators that focus on user-facing attributes and explicit contracts, like data-testid.
  4. Use web-first assertions: Use assertions like toBeVisible() instead of isVisible() for more resilient tests.

Debugging Tips

  • Local debugging: Use the Playwright extension for VSCode to debug your tests.
  • Debug flag: Run tests with the --debug flag to step through your test code and view actionability logs in real-time.
  • Trace viewer: Analyze CI failures using Playwright's trace viewer tool, which provides a full trace of your tests as a local Progressive Web App (PWA).

By following these best practices and utilizing debugging tools, you can effectively test tables with Playwright and ensure reliable test results.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

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 luc@ray.run.