Pytest playwright tests with dash ag-grid

I’m trying to get a row count of a dash ag-grid with pytest playwright tests.
The row count during the test is dynamic.
What is puzzling to me is that the result differs from run to run.
Here’s a sketch of what I’m doing:

  • init the dash ag grid
  • count the number of rows, which always works
  • add a row (with some name like NAME)
  • wait for the NAME to appear: page.wait_for_selector("#grid div:has-text('NAME')") which works which I can confirm visually with the playwright head mode
  • count again

Like I said, the result is sometimes correct and sometimes less then expected. I tried to sleep some seconds or other delay methods but they seem not to be the problem. To me, it looks like as if the grid is loaded differently and not deterministic and is therefore hard to work with on this level.

Has anyone tried something similar before or has a better understanding on how ag-grids work?

Here is my function to count the number of rows:

    row_count = page.evaluate(
        """
        () => {
            const container = document.querySelector('.ag-center-cols-container');
            return container.querySelectorAll(':scope > div').length;
        }
    """
    )

I tried others like row_count = page.locator("#grid .ag-row").count() but they were worse, because not all rows have the class ag-row, some are only in ag-row-no-focus

Hello @luggie,

I’m pretty sure that you are only counting the currently visible rows.

To count the rows in the grid, you need to use the grid APIs to get an accurate count of the rows if you want to do it via JS.

const rows = []
dash_ag_grid.getApi(id).forEachNode(n => rows.push(n))
return rows.length 
1 Like