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 #517
Description
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});
}
}
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);