testing-library / playwright-testing-library

🔍 Find elements in Playwright with queries from Testing Library
MIT License
248 stars 9 forks source link

Question: how to verify if the table has no rows using playwright testing library? #562

Closed InduKrish closed 2 years ago

InduKrish commented 2 years ago

here is the code:

 test.only(`Default page Group codes table `, async ({
                                                               page, screen, within
                                                           }) => {
        const table = await screen.queryByTestId('nested-table-GroupCode')
        const tableHeader = within(table).getAllByRole('columnheader')
        expect(await tableHeader.nth(0).textContent()).toEqual("Active")
        expect(await tableHeader.nth(1).textContent()).toEqual("Code")
        expect(await tableHeader.nth(2).textContent()).toEqual("Description")

       //using playwright locator to find the total no of rows /<tbody> </tbody> tag returns 1 when there are no rows.
        let total;
        total = await page.locator('table[data-testid=nested-table-GroupCode] tbody').count();
        console.log("total" + total). 

        // letting the loop run only if total is not equal to 1
        if(total != 1){
        const rowgroup = within(table).getAllByRole('rowgroup')
        let totalRows = await within(rowgroup.nth(1)).getAllByRole('row')
        console.log("total Rows" + totalRows )
        let noOfRows = await within(rowgroup.nth(1)).getAllByRole('row').count(). ---> This line is failing when there are no rows, as count returns nothing.
        console.log("No of Rows " + noOfRows);
        for (let i = 0; i < noOfRows; i++) {
            let cellValues = await within(totalRows.nth(i)).getAllByRole('cell')
            let noOfCells = await within(totalRows.nth(i)).getAllByRole('cell').count()
            console.log("No of cells " + noOfCells);
            for (let j = 0; j < noOfCells; j++) {
                await expect(cellValues.nth(j)).not.toBeNull();
                console.log("cellValue: " + await cellValues.nth(j).textContent());
            }
        }}

    });
Screen Shot 2022-10-17 at 12 05 21 AM
<table data-testid="nested-table-GroupCode" class="css-1n5gbw2" css="1">
<thead class="css-1oteowz">
<tr data-testid="table-header-GroupCode" class="css-62m37e">
<th data-testid="cl-table-header-column--active" width="33.333333333333336%" class="css-a6vx1b">
<span class="css-1a91zmr">
Active
</span>
</th>
<th data-testid="cl-table-header-column--code" width="33.333333333333336%" class="css-a6vx1b">
<span class="css-1a91zmr">
Code
</span>
</th>
<th data-testid="cl-table-header-column--description" width="33.333333333333336%" class="css-a6vx1b">
<span class="css-1a91zmr">
Description
</span>
</th>
</tr>
</thead>
<tbody></tbody>
</table>

is there a direct way to verify using playwright testing library to verify if the table has no rows other than table header?

Screen Shot 2022-10-17 at 12 16 10 AM
jrolfs commented 2 years ago

Use queryBy instead of getBy, see: https://testing-library.com/docs/queries/about#types-of-queries.