How do I locate and interact with a checkbox in a table row containing specific text using Playwright?


Locating and Interacting with a Checkbox in a Table Row

To locate a checkbox in a table row containing specific text using @playwright/test, you can use locators to narrow down your search. First, select all the rows of the table using page.locator() or page.$$(). Then, chain .filter() to find rows containing the desired text.

Here's a TypeScript example:

import { test, expect } from '@playwright/test';

test('Locate and interact with a checkbox in a table row', async ({ page }) => {
  await page.goto('https://ray.run/example');

  // Select all table rows
  const rows = page.locator('tr');

  // Filter rows containing the desired text
  const targetRow = await rows.filter(async (row) => {
    const rowText = await row.textContent();
    return rowText.includes('Your Text');

  // Find the checkbox within the target row
  const checkbox = await targetRow.locator('input[type="checkbox"]');

  // Interact with the checkbox
  await checkbox.click();

In this example, we first select all table rows and then filter them based on the desired text. Once we find the target row, we locate the checkbox within it and interact with it using .click().

Remember that if your HTML structure changes frequently, it's better to generate locators dynamically using Playwright's codegen tool rather than hard-coding them into your tests. This ensures your tests remain resilient as your application evolves.

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.