How can I add a setTimeout delay to my browser in puppeteer?

Question

I created a function called waitForTimeout in order to add a simple delay that can be awaited once my browser opens a new page.

function waitForTimeout(timeout) {
return new Promise((resolve) =\> {
setTimeout(resolve, timeout)
})
}

const puppet = () =\> {
getCookies(async (cookies) =\> {
const browser = await puppeteer.launch({
headless: false
});

const page = await browser.newPage();
await page.setCookie(...cookies);
await page.goto("https://ipchicken.com");

await waitForTimeout(10000)

let data = await page.evaluate(()=\> {
const ip = document.querySelector("body \> table:nth-child(2) \> tbody \> tr \> td:nth-child(3) \> p:nth-child(2) \> font \> b").textContent
return ip;
})
console.log(data)
await browser.close();
});
}

I expected the browser to create a page and then wait for however long I want. However, the browser closes immediately but in node there's a delay. Shouldn't the await browser.closer() only run AFTER await waitForTimeout(10000) finishes running (i.e. after the promise resolves)?

Here's the error that I'm seeing:

/Users/macbook/repos/operation-tss/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:316
            return Promise.reject(new Error(`Protocol error (${method}): Session closed. Most likely the ${__classPrivateFieldGet(this, _CDPSessionImpl_targetType, "f")} has been closed.`));
                                  ^

Error: Protocol error (Runtime.callFunctionOn): Session closed. Most likely the page has been closed.
    at CDPSessionImpl.send (/Users/macbook/repos/operation-tss/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:316:35)
    at ExecutionContext._ExecutionContext_evaluate (/Users/macbook/repos/operation-tss/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:211:46)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ExecutionContext.evaluate (/Users/macbook/repos/operation-tss/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:107:16)

Code looks fine other than the weird ```\``` characters which I assume is some artifact of transferring the code to the question. Please share a [mcve]. See also [puppeteer: wait N seconds before continuing to the next line](https://stackoverflow.com/questions/46919013/puppeteer-wait-n-seconds-before-continuing-to-the-next-line/73676564#73676564). Sleeping is poor practice and a last resort/hack, so if you provide more context for the goal you're trying to achieve and the site you're working with, it'd be possible to show you a better way. — ggorlen, Dec 15 '22 at 03:18
Your puppet function isn’t marked async so it will terminate as soon as it calls getCookies (not once getCookies completes) — James, Dec 15 '22 at 07:16

JRichardsz · Answer 1 · 2022-12-15T14:14:45.397

2

waitForSelector

Instead of a static or hardcoded wait/sleep, you could wait until the presence of some html element

page.waitForSelector('#myId')
.then(() => console.log('got it'));

or with await

await page.waitForSelector('#myId');

More details here puppeteer: how to wait until an element is visible?

setTimeout

Your code looks fine. I also tested in the browser and the delay of 5 seconds, worked.

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
console.log(new Date()) 
await timeout(5000)
console.log(new Date())

result

Try it here and validated the second delayed console:

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

(async () => {

  console.log(new Date()) 
  await timeout(5000)
  console.log(new Date()) 

})();

edited Dec 15 '22 at 14:14

answered Dec 15 '22 at 02:27

JRichardsz

14,356
6
59
94

Hey there, thanks for the reply. I actually tried that already: ``` function waitForTimeout(timeout) { return new Promise((resolve) => { setTimeout(resolve, timeout) }) } ``` I believe it's identical to your function, with the difference being we called our params different things. – Matt George Dec 15 '22 at 02:37
Yes, is almost the same. That is why a tell you that I test it and worked. – JRichardsz Dec 15 '22 at 14:05

How can I add a setTimeout delay to my browser in puppeteer?

1 Answers1

waitForSelector

setTimeout