Unable to traverse through td elements with in the same <tr>

[InduKrish]

This is related to #517
First of all, thank you for your explanation in the tickets and it helps us to understand better.
and I totally understand that the playwright testing library is not supposed to be using anything like css selector and the intention of library is closely to mimic how user interacts.

All I am trying now is to achieve the below scenario using playwright testing library
would like to filter by table name test id like below, then search text - LINEHOLDER, and once text is found, click the corresponding checkbox in the same row, Can you please advise how to achieve that? will be much helpful.

I have gone thru the documentation, am unable to find anything closer. I would really to like to use testing library in my framework, Can you please help me with the example code to achieve this scenario that helps me to better understand and follow the documentation better?

test('should access checkbox in the same row', async ({screen}) => {


const table = await screen.findByTestId('editable-nested-table-GroupCode')

const lineholderText = within(table).getByText(/LINEHOLDER*/). ---> this is going to return only LINEHOLDER - td, but how to traverse through the - td element (checkbox) in the same row - tr where LINEHOLDER text is found?

after lineholder test if found, how to access the checkbox please?
const checkbox = ???.getByRole(checkbox)
checkbox.click();
})

Can you please provide me the example to achieve this? would be really helpful and would love to use testing library across all our projects, as it the first time trying to use this for this specific scenario, your example will be much more helpful.

Again to be clear, I am not asking anything like CSS selector, I am only interested to achieve this scenario using testing library. i have to search text and perform click the same row, in other 6 tables. Your example will be so much beneficial. Thank you for all the help and guidance!

[InduKrish]

Hi Jamie, looks like it is moved to a discussion, wondering if we have any solution to handle the scenario stated above?

I assure that i would my educate my team with all that i learnt here, and would like to make the best use of it. Really curious to know the solution to further more understand the way how this can be handled with the testing library, looking forward to your response...

[jrolfs]

Hi Jamie, looks like it is moved to a discussion, wondering if we have any solution to handle the scenario stated above?

Yes, I've moved a few of these to discussions. I'm sorry I've been closing some of these issues so quickly, but these sorts of questions don't really belong in issues. Most of what you've been asking isn't specific to Playwright Testing Library, and the questions are really general Testing Library, testing philosophy, and accessibility questions.

I assure that i would my educate my team with all that i learnt here, and would like to make the best use of it. Really curious to know the solution to further more understand the way how this can be handled with the testing library, looking forward to your response...

Going forward, feel free to continue asking these sorts of things here in the Q&A discussions, but I can't promise I'll be super responsive like this all of the time. You may be better off asking on Stack Overflow first (perhaps with the testing-library and/or accessibility tag).

Alright, with that said, I did create another example pull request (#533) for you to show you how I might query for the checkbox in the table row:

playwright-testing-library/test/fixture/locators.test.ts

Lines 259 to 267 in 05da6a4

	test.only('matches table row with `RegExp` text matcher', async ({screen, within}) => {
	const table = await screen.findByTestId('editable-nested-table-GroupCode')
	const row = within(table).getByRole('row', {name: /LINEHOLDER/})
	const checkbox = within(row).getByRole('checkbox')
	await expect(checkbox).not.toBeChecked()
	await checkbox.check()
	await expect(checkbox).toBeChecked()
	})

I would still recommend that you and your team dig into the Testing Library documentation further and research accessibility best practices. I noticed you had set an explicit role attribute¹ on the checkbox input, and that actually prevented Playwright from being able to check the checkbox properly. This is from the w3c documentation that the Testing Library documentation references in quite a few places:

¹Markup with explicit role on checkbox

It is NOT RECOMMENDED for authors to set the ARIA role and aria-* attributes to values that match the implicit ARIA semantics defined in the table. Doing so is unnecessary and can potentially lead to unintended consequences.

I know the w3c docs are pretty verbose, but there are some super helpful links on the ByRole page.

---

Help me/us help you...

Finally, when you do create issues or discussions on GitHub, it would be incredibly helpful if you used better formatting like code blocks instead of plain text and images.

✅ This:

test('should access checkbox in the same row', async ({screen}) => {

  const table = await screen.findByTestId('editable-nested-table-GroupCode')

  const lineholderText = within(table).getByText(/LINEHOLDER*/). // ---> this is going to return only LINEHOLDER
  // - td, but how to traverse through the
  // - td element (checkbox) in the same row - tr where LINEHOLDER text is found?

	// after lineholder test if found, how to access the checkbox please?
	// const checkbox = ???.getByRole(checkbox)
	// checkbox.click();
})

❌ Instead of this:

test('should access checkbox in the same row', async ({screen}) => {


const table = await screen.findByTestId('editable-nested-table-GroupCode')

const lineholderText = within(table).getByText(/LINEHOLDER*/). ---> this is going to return only
LINEHOLDER - td, but how to traverse through the - td element (checkbox) in the same row - tr where > LINEHOLDER text is found?

after lineholder test if found, how to access the checkbox please?
const checkbox = ???.getByRole(checkbox)
checkbox.click();
})

✅ And this:

<table data-testid="editable-nested-table-GroupCode" class="css-1n5gbw2" style="display: none;" id="table">
  <tbody>
    <tr data-testid="erow-GroupCode-0" class="css-105800b">
      <td data-testid="etd-GroupCode-active-0" class="css-1f7ypku">
        <label
          for="input-GroupCode-active-0"
          data-testid="checkbox-input-GroupCode-active-0"
          class="css-1lua7zz"
        >
          <input type="checkbox" id="input-GroupCode-active-0" name="input-GroupCode-active-0" aria-labelledby="input-GroupCode-active-0" class="css-38lalc">
          <span tabindex="0" class="css-12234rr">…</span>
          <span class="css-1008avk"></span>
        </label>
      </td>
      <td data-testid="td-GroupCode-code-0" class="css-1f7voku">01</td>
      <td data-testid="td-GroupCode-description-0" class="css-1f7vpku">LINEHOLDER</td>
    </tr>
  </tbody>
</table>

❌ Instead of this:

... fortunately, macOS supports copying text from images now, but it still wasn't super easy getting your markup out of there 😅

✨ Even better would be a CodeSandbox or repository that demonstrates your question/problem! 😁

---

Hopefully, that gets you sorted for this one issue and further demonstrates how to approach this stuff with a Testing Library™ mindset and helps you and your team make you application more accessible...

The more your tests resemble the way your software is used, the more confidence they can give you.

[InduKrish]

Thank you Jaime! Very much appreciated!