[SOLVED] Have to use manual wait() to get CodeceptJS/Puppeteer custom helper to see table(td tr)

Have to use manual wait() to get CodeceptJS/Puppeteer custom helper to see table(td tr)

I have a codeceptjs/puppeteer project and am building a custom helper for accessing information in tables. I have been able to make this work, but only by putting a two second wait in my test step before calling on the async function in my custom helper class. Given that this is all based on async/await, I have to believe I am just missing something and there is a clean way to do this.

Function from my helper class.

  async getRowCount() { 
    //const browser = this.helpers['Puppeteer'].browser;
    const page = this.helpers['Puppeteer'].page;

    page.waitForSelector('tbody');
    let rowCount = await page.$$eval('tbody tr', rows => rows.length);
    return rowCount;

    // These work
    // page.waitForSelector('a[href="#/site/create"]');
    // page.click('a[href="#/site/create"]');
    
  }

My codeceptjs scenario is below.

Scenario.only('Table check ALL', async (I, loginAs) => {
  loginAs('bob');
  I.say(await I.getRowCount());
  I.wait(3);
});

When the code is as shown above, my row count that is returned in always 0.

However, if I put a 1 second wait just before the I.getRowCount() function, then the correct total number of rows for the tbody tr selector is returned.

If anyone can help me understand why this is happening and what I can do to fix it so I don't have to pepper my code with manual wait steps to accommodate these helper functions (core "feature" of codeceptjs), I would greatly appreciate it.

Thank you!

Solution

You need to await waitForSelector:

await page.waitForSelector('tbody');

Almost all page methods are returning promises, so you have to await them.