how to read table header and do assertion?

 const form = await this.screen.findByTestId( 'table-header-GroupCode');

Can you please advise if table headers can be verified with indexing?

What do you mean "verified with indexing"?

I want to verify if 0th index matches to the header title in the table.. likewise index 1 matches the next header value. Attached is the DOM table strcuture.

In regular playwright , this how i verify the table header, Can you please advise how to do that using playwright testing library?

selector that gets passed to the following method is---->tableHeader : 'tr[data-testid='table-header-GroupCode'] th span',
async verifyElementContainsText(selector, index, text) {
await this.page.waitForSelector(selector);
return await expect(this.page.locator(selector).nth(index)).toContainText(text);
}

in the reqular playwright test without testing library, I pass index, the corresponding header value to verify.
await defaultPage.verifyTableHeaderdom("1", "Code");

i would like to do the same with the help of playwright testing library
here is what i tried with playwright testing library.
const header = await this.screen.findAllByTestId( 'table-header-GroupCode')
await expect(header.nth(0)).toHaveText("Active");
Expected string: "Active"
Received string: "ActiveCodeDescription"

and all headers get appended like the above. Can you please advise?

This might be a bug as the *AllBy queries should return a Locator for all the matched elements. I'll take a look when I have a chance.

Nevermind, this isn't a bug... I have a test case for this already.

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

Lines 217 to 223 in 1b41bd5

    
           test('should handle the findAllBy* methods', async ({queries}) => { 
        
             const locator = await queries.findAllByText(/Hello/, undefined, {timeout: 3000}) 
        
             const text = await Promise.all([locator.nth(0).textContent(), locator.nth(1).textContent()]) 
        
             expect(text).toEqual(['Hello h1', 'Hello h2']) 
        
           })

In your example await this.screen.findAllByTestId('table-header-GroupCode') is selecting the parent element (tr) and therefore its textContent() includes all of the child th element's content.

You'd want this for your example markup (select the th elements by test ID using a RegExp):

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

Line 226 in 5b09ee4

    
           const header = await screen.findAllByTestId(/cl-table-header-column.*/, undefined, {

See #515 for the proof of concept there.

	test('should handle the findAllBy* methods', async ({queries}) => {
	const locator = await queries.findAllByText(/Hello/, undefined, {timeout: 3000})

	const text = await Promise.all([locator.nth(0).textContent(), locator.nth(1).textContent()])

	expect(text).toEqual(['Hello h1', 'Hello h2'])
	})