Execution context was destroyed, most likely because of a navigation node js

Question

I have to go to the page enter the appropriate data for login and password and once I click the registration button on the page I want to reload the page do location.reload(), but after doing this it pops me an error because the items have not yet had time to load. I don't know how to fix this, anyone have any ideas?

Error:Error: Execution context was destroyed, most likely because of a navigation.

async function launchBrowser() {
    const browser = await puppeteer.launch({
        executablePath: 'C:/Program Files/BraveSoftware/Brave-Browser/Application/brave.exe',
        slowMo: 10,
        headless: false,
        devtools: false,
    })

    const pages = await browser.pages()
    const page = pages[0]

    const url = 'www.example.pl'

    while (true) {
        try {
            await page.goto(url, { timeout: 90000, waitUntil: 'networkidle2' })
            break
        } catch (error) {
            if (error.message.includes('ERR_NETWORK_CHANGED')) {
                console.error('Network changed. Retrying...')
            } else {
                console.error('An error occurred:', error)
                break
            }
        }
    }

    return page
}

async function test(){
    const page = await launchBrowser()
    await main(page)
}


async function main(page) {
    
    await page.type('#login', 'logdasdin')
    await page.type('#password', 'password')
    await page.type('#password2', 'password')

    await page.evaluate(async () => {
        const registerBtn = document.querySelectorAll('button')[3]
        registerBtn.click()
        location.reload()
       
    })
    await main(page)
}
test()

you have to wait for navigation after the click. – pguardiario Aug 16 '23 at 00:26 — pguardiario, Aug 16 '23 at 00:26

ggorlen · Answer 1 · 2023-08-15T23:44:08.527

Since I don't have your page, I can't test this, but the typical approach to wait for the page to load is:

const navP = page.waitForNavigation({waitUntil: "domcontentloaded"});
await page.evaluate(() => {
  const registerBtn = document.querySelectorAll("button")[3];
  registerBtn.click();
  location.reload();
});
await navP;
// it should be OK to interact with the page at this program point

Better yet, you can probably use page.goto(url), where url is your original/current URL, instead of location.reload(). goto includes waitForNavigation implicitly, simplifying the code and improving reliability. If you don't have the URL handy, you can use page.url() to get the current one.

Notes:

I recommend avoiding recursion and premature abstractions in general, at least until you have basic functionality working. The async nature of Puppeteer can introduce new issues on top of already-difficult-to-write baseline code once you toss functions into the mix.
No need for async unless the function uses await, but the browser API you're using is synchronous, so skip it.
document.querySelectorAll('button')[3]; is a weak selector. There's almost certainly something better, like a class name, text content or parent selector to help narrow down the scope. Otherwise, if another button is added to the page, you'll click the wrong one. Selectors should be only exactly as specific as need be to disambiguate the element cleanly, not too specific and not too general. This is too general.
networkidle2 is pretty slow and strict. You probably don't need to wait that long. Instead, use "domcontentloaded", then await page.waitForSelector("#login"); to make your condition match exactly what you want and nothing more. If this fails, then you can fall back on networkidle2. page.waitForSelector can be used in place of page.waitForNavigation in some cases.

Execution context was destroyed, most likely because of a navigation node js

1 Answers1