Protocol error (Runtime.callFunctionOn): Target closed.

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 5.5.0
• Platform / OS version: macOS 10.15.7
• URLs (if applicable): -
• Node.js version: v14.15.0

What steps will reproduce the problem?

Please include code that reproduces the issue.

1. Open page
2. Wait for non-existent selector
3. Close page

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');

// not await!
page.waitForSelector('.non-existent').then(() => console.log('it should never happened));

await page.close();

What is the expected result?

Closing the page normally without errors.

What happens instead?

Error: Protocol error (Runtime.callFunctionOn): Target closed.
    at /app/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:208:63
    at new Promise (<anonymous>)
    at CDPSession.send (/app/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:207:16)
    at ExecutionContext._evaluateInternal (/app/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:200:50)
    at ExecutionContext.evaluateHandle (/app/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:151:21)
    at WaitTask.rerun (/app/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:528:37)

[mahnunchik]

@marr omitted await is important for the issue. It is simplified version of:

await Promise.race([
  page.waitForSelector('.existent').then(() => console.log('fire!')),
  page.waitForSelector('.non-existent').then(() => console.log('it should never happened')),
]);

await page.close();

When it is required to wait at least one element from set of elements.

[dpmott]

@marr still has a good point, in that you need know that each of those race operations are complete before closing the page out from under them.

Consider this:

  const operations = [ page.waitForSelector(...), page.waitForSelector(...), ];
  const winner = await promise.race(operations);
  // do something with the winner
  await Promise.all(operations); // wait for the rest of the operations to finish or time out
  await page.close();

It might also be possible to put a catch on each of your operations, so that their failure doesn’t cause an error in your scripting:

  const operations = [ page.waitForSelector(...), page.waitForSelector(...), ];
  const winner = await promise.race(operations.map(op => op.catch(() => {})));
  // do something with the winner, but check to see if it's undefined first
  await page.close();