[Feature]: make waitForFunction timeout condition error readable

[danielcaldas]

Feature description

Here's a stack trace for a timeout condition expiration.

✕ should add an empty rule row and render it properly (9169 ms)

  ● [E2E] rule basic UI interactions › should add an empty rule row and render it properly

    TimeoutError: Waiting failed: 5000ms exceeded

      at Timeout.<anonymous> (../node_modules/puppeteer/src/common/WaitTask.ts:79:11)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total

Now the failing code is:

await ctx.extensionPage.waitForFunction(
      () => {
        return document.querySelectorAll('.row__editor .mdc-tab__ripple')?.length === 5;
      },
      { timeout: 5000 }
    );

I'm only able to traceback the failure because that's the only statement in my test with 5000 timeout, otherwise it would be impossible to trace.

Ideally we should have either the client code lines in the stack trace, or even better allow a string parameter to be specified in the waitForFunction API to be logged upon error/timeout for debugging purposes.

[xgqfrms]

Why doesn't the console.log method work in the waitForFunction callback?

It is difficult for developers to know what the error is.

error

$ node ./pp-class.js
/Users/xgqfrms-mm/Documents/github/cyclic-express-server/node_modules/puppeteer-core/lib/cjs/puppeteer/common/WaitTask.js:59
                void this.terminate(new Errors_js_1.TimeoutError(`Waiting failed: ${options.timeout}ms exceeded`));
                                    ^

TimeoutError: Waiting failed: 30000ms exceeded
    at Timeout.<anonymous> (/Users/xgqfrms-mm/Documents/github/cyclic-express-server/node_modules/puppeteer-core/lib/cjs/puppeteer/common/WaitTask.js:59:37)
    at listOnTimeout (node:internal/timers:564:17)
    at process.processTimers (node:internal/timers:507:7)

Node.js v18.12.0

demo

// import puppeteer from 'puppeteer';
const puppeteer = require('puppeteer');

class Crawler {
  constructor(url = '') {
    this.url = url;
  }
  async test (selector = '') {
    const browser = await puppeteer.launch({headless: "new"});
    const page = await browser.newPage();
    await page.goto(this.url);
    await page.setViewport({width: 1920, height: 1080});
    const matches = await page.waitForFunction((selector) => {
      console.log(`❓ selector`, selector)
      // ❌  selector
      const arr = [...document.querySelectorAll(selector)];
      // ✅ 
      // const arr = [...document.querySelectorAll('.trim-title-container')];
      return arr.length ? arr : null;
    });
    console.log(`✅ matches`, matches)
    const contents = await matches.evaluate(els => els.map(e => e.innerText));
    console.log(`✅ contents`, contents)
    await browser.close();
  }
}

(async () => {
  const url = `https://www.tesla.cn/modely/design#overview`;
  const selector = `.trim-title-container`;
  const crawler = new Crawler(url)
  await crawler.test(selector);
})();

[Lightning00Blade]

Closed by #11330