Issue: queryByTest id with the partial test id is not working

[InduKrish]

Issue: queryByTest id with the partial test id is not working

async getFirstRow(id) {
        let data = {};
        // data.bidding = []
        data = []
        await this.page.waitForTimeout(10000);
        const table = await this.screen.queryByTestId(id)
        const rowgroup = this.within(table).getAllByRole('rowgroup')
        let totalRows = await this.within(rowgroup.nth(1)).getAllByRole('row'). ---> rowgroup is 0 is tables headers, hence storing rowgroup 1 that has all the rows from the table.
        let noOfRows = await this.within(rowgroup.nth(1)).getAllByRole('row').count()
        console.log("No of Rows " + noOfRows);
        for (let i = 0; i < 2; i++) {
            let cellValues = await this.within(totalRows.nth(i)).getAllByRole('cell')
            let noOfCells = await this.within(totalRows.nth(i)).getAllByRole('cell').count()
            console.log("No of cells counttttt " + noOfCells);

       1.     //*_*if I store by index it is working, i can successfully assign the text to the variable.**_
            const employeeId = await cellValues.nth(0).textContent();
            const name = await cellValues.nth(1).textContent();
            const seniority = await cellValues.nth(2).textContent();
            const originalAccrualDays = await cellValues.nth(3).textContent();
            const adjustedAccrualDays = await cellValues.nth(4).textContent();
            const adjustmentComment = await cellValues.nth(5).textContent();
            const awardedRound1 = await cellValues.nth(6).textContent();
            const awardedRound2 = await cellValues.nth(7).textContent();
            const awardedRound3 = await cellValues.nth(8).textContent();
            const awardedRound4 = await cellValues.nth(9).textContent();
            const awardedRound5 = await cellValues.nth(10).textContent();
            const remainingAccruedDays = await cellValues.nth(11).textContent();
         
     2.      //  all different ways below to query the cell based on partial test id is failing.
            const employeeId = await cellValues.within().queryByTestId(/employeeId/).textContent();
           const employeeId = await cellValues.within().queryByTestId('td-CrewMemberVacationAccruals-employeeId-0').textContent();
            const employeeId = await this.within(cellValues).queryByTestId(/employeeId/).textContent();
         
     3.    //with getByTest id , it locates the elements, but still fails,
            const name = await this.within(cellValues).getByTestId(/name/).textContent();

     4.    // all different ways below to query the cell based on partial test id is failing.
           const name = await cellValues.within().queryByTestId('td-CrewMemberVacationAccruals-name-0').textContent();
            const seniority = await cellValues.within().queryByTestId(/seniority/).textContent();
            const originalAccrualDays = await cellValues.within().queryByTestId(/originalAccruedDays/).textContent();
            const adjustedAccrualDays = await cellValues.within().queryByTestId(/adjustedAccruedDays/).textContent();
            const adjustmentComment = await cellValues.within().queryByTestId(/adjustmentComment/).textContent();
            const awardedRound1 = await cellValues.within().queryByTestId(/awardedRound1/).textContent();
            const awardedRound2 = await cellValues.within().queryByTestId(/awardedRound2/).textContent();
            const awardedRound3 = await cellValues.within().queryByTestId(/awardedRound3/).textContent();
            const awardedRound4 = await cellValues.within().queryByTestId(/awardedRound4/).textContent();
            const awardedRound5 = await cellValues.within().queryByTestId(/awardedRound5/).textContent();
            const remainingAccruedDays = await cellValues.within().queryByTestId(/remainingAccruedDays/).textContent();

       

            const obj = {
                row: i,
                employeeId: employeeId,
                name: name,
                originalAccrualDays: originalAccrualDays,
                adjustedAccrualDays: adjustedAccrualDays,
                adjustmentComment: adjustmentComment,
                remainingAccruedDays: remainingAccruedDays
            };
            data.push(obj);
        }

 
        fs.writeFile('./json/accrual.json', JSON.stringify(data), function (err) {
                if (err) throw err;
                console.log('Data written to file');
            }
        );
    }

<table data-testid="paged-table-CrewMemberVacationAccruals" class="css-1n5gbw2" css="1">
<thead class="css-2006i1">
<tr data-testid="paged-table-header-CrewMemberVacationAccruals" class="css-62m37e">
<th data-testid="cl-table-header-column--employeeId" width="10%" class="css-a6vx1b"></th>
<th data-testid="cl-table-header-column--name" width="20%" class="css-a6vx1b">
<span class="css-1a91zmr"></span>
</th>
<th data-testid="cl-table-header-column--seniority" width="7.6923076923076925%" class="css-a6vx1b"></th>
<th data-testid="cl-table-header-column--originalAccruedDays" width="7.6923076923076925%" class="css-a6vx1b"></th>
<th data-testid="cl-table-header-column--adjustedAccruedDays" width="7.6923076923076925%" class="css-a6vx1b"></th>
<th data-testid="cl-table-header-column--adjustmentComment" width="2%" class="css-a6vx1b"></th>
<th data-testid="cl-table-header-column--awardedRound1" width="3%" class="css-a6vx1b"></th>
<th data-testid="cl-table-header-column--awardedRound2" width="3%" class="css-a6vx1b"></th>
<th data-testid="cl-table-header-column--awardedRound3" width="3%" class="css-a6vx1b"></th>
<th data-testid="cl-table-header-column--awardedRound4" width="3%" class="css-a6vx1b"></th>
<th data-testid="cl-table-header-column--awardedRound5" width="3%" class="css-a6vx1b"></th>
<th data-testid="cl-table-header-column--remainingAccruedDays" width="7.6923076923076925%" class="css-a6vx1b"></th>
<th data-testid="cl-table-header-column--actions-undefined" width="7.6923076923076925%" class="css-43bnle"></th>
</tr>
</thead>
<tbody class="css-vvv4s9">
<tr data-testid="row-CrewMemberVacationAccruals-0" class="css-1p58oob">
<td data-testid="td-CrewMemberVacationAccruals-employeeId-0" class="css-1kxb62c">
00001
</td>
<td data-testid="td-CrewMemberVacationAccruals-name-0" class="css-1kxb62c">
John
</td>
<td data-testid="td-CrewMemberVacationAccruals-seniority-0" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-originalAccruedDays-0" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-adjustedAccruedDays-0" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-adjustmentComment-0" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-awardedRound1-0" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-awardedRound2-0" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-awardedRound3-0" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-awardedRound4-0" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-awardedRound5-0" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-remainingAccruedDays-0" class="css-1kxb62c"></td>
<td></td>
</tr>
<tr data-testid="row-CrewMemberVacationAccruals-1" class="css-1p58oob">
<td data-testid="td-CrewMemberVacationAccruals-employeeId-1" class="css-1kxb62c">
00939
</td>
<td data-testid="td-CrewMemberVacationAccruals-name-1" class="css-1kxb62c">
kumar
</td>
<td data-testid="td-CrewMemberVacationAccruals-seniority-1" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-originalAccruedDays-1" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-adjustedAccruedDays-1" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-adjustmentComment-1" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-awardedRound1-1" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-awardedRound2-1" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-awardedRound3-1" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-awardedRound4-1" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-awardedRound5-1" class="css-1kxb62c"></td>
<td data-testid="td-CrewMemberVacationAccruals-remainingAccruedDays-1" class="css-1kxb62c"></td>
<td></td>
</tr>
<tr data-testid="row-CrewMemberVacationAccruals-2" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-3" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-4" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-5" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-6" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-7" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-8" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-9" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-10" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-11" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-12" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-13" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-14" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-15" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-16" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-17" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-18" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-19" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-20" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-21" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-22" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-23" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-24" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-25" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-26" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-27" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-28" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-29" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-30" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-31" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-32" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-33" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-34" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-35" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-36" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-37" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-38" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-39" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-40" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-41" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-42" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-43" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-44" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-45" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-46" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-47" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-48" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-49" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-50" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-51" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-52" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-53" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-54" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-55" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-56" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-57" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-58" class="css-1p58oob"></tr>
<tr data-testid="row-CrewMemberVacationAccruals-59" class="css-1p58oob"></tr>
<tr id="loader"></tr>
</tbody>
</table>
```html

---

Working code below from the other test: wondering how in the test below, i was able to queryByTestId but why not on the test above?

---

``` javascript
    test('Create Auction and Validate Status = CREATING', async ({page, screen, within, isMobile}) => {
        const cell = await screen.queryByTestId('paged-table-IFVacationAuctionSummaries').within().getByRole('row', {name: RegexParser('2027')}).within().getAllByRole('cell')
        const count = await cell.count()
        console.log("cell count: ",  await cell.count())
        if(await cell.count()!= 0) {
             await cell.within().queryByRole('button', {name: "kebab-menu"}).click(). 
--->Note: able to queryByRole within the list of cells, in above test , i am using queryByTestId within in the list of cells ,but not working, can you please assist?
             await cell.within().queryByRole('menuitem', {name: "Delete Auction"}).click()
        }

        const table = await screen.queryByTestId('paged-table-IFVacationAuctionSummaries');
        const rowsByGroup =  await within(table).getAllByRole('rowgroup');
        const tableRows = await within(rowsByGroup.nth(1)).getAllByRole('row');
        let noOfRows = await tableRows.count();
        for (let i = 0; i < noOfRows - 1; i++) {
            let year = await within(tableRows.nth(i)).queryByTestId(/year/).textContent();
            if (year === '2027') {
                await within(tableRows.nth(i)).queryAllByRole('cell').within().queryByRole('button', {name: "kebab-menu"}).click();
                await within(tableRows.nth(i)).queryAllByRole('cell').within().queryByRole('menuitem', {name: "Delete Auction"}).click();
                break;
            }
        }


        const updatedTable = await screen.queryByTestId('paged-table-IFVacationAuctionSummaries');
        const updatedRowsByGroup =  await within(updatedTable).getAllByRole('rowgroup');
        const updatedTableRows = await within(updatedRowsByGroup.nth(1)).getAllByRole('row');
        let updatedTableRowsCount = await updatedTableRows.count();
        for (let i = 0; i < updatedTableRowsCount - 1; i++) {
            await page.reload();
            let year = await within(updatedTableRows.nth(i)).queryByTestId(/year/).textContent();
            if (year === '2027') {
                await expect(await within(updatedTableRows.nth(i)).queryByTestId(/status/)).toHaveText("CREATING")
                break;
            }
        }
    })
})

[jrolfs]

Can you please create a minimal reproduction of this issue in a Code Sandbox or example repository? I'm sorry, but I can't be expected to parse all of the information you've dumped in here to determine if this is an actual issue with playwright-testing-library or just a misunderstanding of how it's supposed to work.

[jrolfs]

You know what, I think it would be even easier to fork this repository and modify one of the existing tests (or add a new test) in order to demonstrate the issue you're describing here. You know, like the ones I've created for you in the past 😉. Thank you.

[InduKrish]

i was able to get this working, ready to close the ticket.