testing-library/playwright-testing-library

expect assertion fails when filtered by table name

InduKrish opened this issue · 1 comments

I would like to click the checkbox in the corresponding row after the text that i want to search is found in the table (question is addressed in #517)

when i tried meanwhile by table name to test this way , i see the following error, although i see in the output DOM, that the element is found. I tried using both getByText and FindByText(), and both failed.

    const header = await this.screen.findByTestId("editable-nested-table-GroupCode");
    const base =   await this.within(header).findByText(" LINEHOLDER")
    console.log("value " + base);
    await expect(base).toContainText(text);

output:

Screen Shot 2022-09-20 at 11 37 01 AM

Screen Shot 2022-09-20 at 11 37 48 AM

Screen Shot 2022-09-20 at 11 38 22 AM

Code that works: while filtering by row id, however i want to filter by table id.

Assertion for row test id erow-GroupCode-0 works.
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);

output console log:
Mac-C02FT4MH:cbna-test-integration-cbna x273092$ npx playwright test

Running 1 test using 1 worker
[chromium] › tests/web/vacation.bidaward.defaults.spec.po.new.js:14:9 › Bid and award Default page verification › Default page verification
headerLocator@query-by-test-id=["erow-GroupCode-0"]
base valueLocator@query-by-test-id=["erow-GroupCode-0"] >> get-by-text=["LINEHOLDER"]
value Locator@query-by-test-id=["erow-GroupCode-0"] >> get-by-text=["check"]

Screen Shot 2022-09-20 at 10 48 25 AM

html structure:
Screen Shot 2022-09-20 at 11 43 01 AM

why assertion is working while filtering by row test id erow-GroupCode-0, but it fails while filtering by table name -editable-nested-table-GroupCode?

Your text match is probably too specific when matching against a parent element. See https://testing-library.com/docs/queries/about#textmatch. Please try to reference the Testing Library documentation when troubleshooting queries.

const header = await this.screen.findByTestId("editable-nested-table-GroupCode");
const base =   await this.within(header).findByText(/LINEHOLDER/); // <--- Use a `RegExp` here?

await expect(base).toContainText(text);