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

Answer

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.