Unable to locate the checkbox in the same row where the text is found in the table --> **await row.locator(':scope', { hasText: text}).locator('span:has-text("check")').click();** --> how playwright testing library supports scope variable like playwright does, using hasText

[InduKrish]

Scenario:

I do have a following code to test the web table using regular playwright methods. i would like to click the checkbox in the corresponding row after the text (eg: Lineholder) that i search is found in the table, Attached is the screenshot. I achieve this using the following playwright code, with the scope and hasText: and it works fine. await row.locator(':scope', { hasText: text}).locator('span:has-text("check")').click();**

search locator value is: 'table[data-testid=\'editable-nested-table-GroupCode\'] tbody tr', text that i want to search is: Lineholder async searchText(text, errorMessage) { return await this.searchTextData(search, text, ""); }

search -selector value below is: 'table[data-testid=\'editable-nested-table-GroupCode\'] tbody tr', text = Lineholder (text value for the below method) 'span:has-text("check")' == in the checkbox (it indicates the corresponding checkbox in the row where Lineholder text value is found)

async searchTextData(selector, text, errorMessage) { try { const row = await this.page.locator(selector) await row.locator(':scope', { hasText: text}).locator('span:has-text("check")').click(); } catch (error) { throw new Error(${errorMessage}); } }

htmlviewer.txt

Can you please advise how to achieve the above scenario using playwright testing library. i use within, but I do not want to use screen.findByTestId('erow-GroupCode-0') which is the id of that row where Lineholder exists. I would like to somehow use table[data-testid=\'editable-nested-table-GroupCode\'] tbody tr' as the id, and search the text -Lineholder and click the corresponding checkbox, instead of searching each row by row test id, in this case, erow-GroupCode-0.

i basically want to search the text at the table level with a help of the table name, not at the row level (or not by using row test id)

async checkActiveStatusdom(text) {

    const header = await this.screen.findByTestId('erow-GroupCode-0');
    console.log(" header" + header)
    const base = this.within(header).getByText("LINEHOLDER")
    console.log("base value" + base);
    const check = this.within(header).getByText("check")
    console.log(" value " + check)
    await expect(base).toContainText(text);
}

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.

const header = await this.screen.findByTestId("editable-nested-table-GroupCode"); const base = await this.within(header).findByText(/LINEHOLDER/); //checkbox code - todo (to click the checkbox in the same row where LINEHOLDER value is found await expect(base).toContainText(text);

[jrolfs]

Mapping a CSS-like selector like that to Testing Library queries is seldom going to be a straightforward mapping for reasons I alluded to in this comment: https://github.com/testing-library/playwright-testing-library/issues/518#issuecomment-1253021863. Check out the documentation I linked there, but the most relevant are probably these:

• https://testing-library.com/docs/queries/about#priority
• https://testing-library.com/docs/queries/about#textmatch

[InduKrish]

Thank you, I am not asking to here to map CSS-like selector , as that is the intention of testing library which i totally get it.

I am only interested to know how to achieve this scenario using playwright testing library. I will go thru the links you provided here.

However do you mind providing a sample here as to how to access the checkbox in the same row where the text is found (ie Lineholder) please? that will be more helpful for me to follow the documentation better.

[InduKrish]

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*/)

   after lineholder test if found, how to access the checbox please?

    const checkbox = ???.getByRole(checkbox)

})