filter by table name to verify the headers names based on table row test ids <tr> instead of header id <th> test ids.

[InduKrish]

This is related to issue --> how to read table header and do assertion? #511

I have few other tables on the UI to verify the headers, all th rows data test id starts with cl-table-header-column , which means when i run my tests the test assertion will fail as it will locate multiple tables, which is why i want to filter by table name await this.screen.findAllByTestId('table-header-GroupCode') and verify the header. Please let me know if there is a way.

Can you please advise me if there is any other way to verify the headers of all the tables without erroring out? as cl-table-header-column is the start of the test id in all the tables.

Attached is the screenshot.

Code that is suggested in the ticket #511
This is for Group code table:
test('should handle the findAllBy* methods with test ID RegExp', async ({screen}) => {
const header = await screen.findAllByTestId(/cl-table-header-column.*/, undefined, {
timeout: 3000,
})

  await expect(header.nth(0)).toHaveText('Active')
})

Schedule period table is attached below:

Playwright test code that i have currently working:

SchedulePeriodHeader : 'tr[data-testid='table-header-SchedulePeriod'] th span',

async VerifySchedulePeriodHeader(index, text) {
return await this.verifyElementContainsText(SchedulePeriodHeader, index, text)
}

async verifyElementContainsText(selector, index, text) {
await this.page.waitForSelector(selector);
return await expect(this.page.locator(selector).nth(index)).toContainText(text);
}

How the same can be achieved using playwright testing library with the tr[data-testid='table-header-GroupCode'] th span?

After finding using findByTestId--> [data-testid='table-header-GroupCode'] , Can we traverse to "th" or "span" element using playwright testing library? Can you please advise?

[jrolfs]

Why exactly are you trying to use Testing Library instead of raw Playwright if you want to match against CSS-like selectors? The point of Testing Library is to write tests that resemble how your users interact with your application. As I suggested in the other issue, I think you should familiarize yourself with the following:

• https://testing-library.com/docs/guiding-principles
• https://testing-library.com/docs/dom-testing-library/faq
• https://testing-library.com/docs/dom-testing-library/api-accessibility

Then take a look at:

• https://testing-library.com/docs/queries/byrole#api
• Which links out to here, you're probably looking for these implicit roles
  • https://www.w3.org/TR/html-aria/#el-tr
  • https://www.w3.org/TR/html-aria/#el-th

Finally, if you're not worried about accessibility and the overall Testing Library philosophy, I suggest you stick with the Playwright code you already had working.

[jrolfs]

Did you look at https://github.com/testing-library/playwright-testing-library/pull/515/files? That test was passing as is.

[InduKrish]

Thank you for the details! yes, but as i mentioned previously, there are 6 other tables on the ui , on the same page that has header test id starts with cl-table-header-column, hence it returned headers results of other tables.

test('should handle the findAllBy* methods with test ID RegExp', async ({screen}) => {
const header = await screen.findAllByTestId(/cl-table-header-column.*/, undefined, {
timeout: 3000,
})

the example code you have is for group code table,

and the screenshot i attached above is for the schedule period table, that also has header test id starts with cl-table-header-column like group code table, which is why i wanted to filter by data-testid='table-header-GroupCode (group code table) or [data-testid='table-header-SchedulePeriod'] (schedule period table)

[jrolfs]

Gotcha, then you'd want:

test('should handle the findAllBy* methods with test ID RegExp', async ({screen}) => {
	const tr = await screen.findByTestId('table-header-GroupCode')
	const ths = within(tr).getAllByTestId(/cl-table-header-column.*/)
})

Though I'd question whether it makes sense to be using Testing Library if you're using test Ids for everything. Check out the Testing Library documentation I linked.