Puppeteer wait for new page after form submit

Question

I'm trying to use puppeteer to load a page, submit a form (which takes me to a different URL) and then ideally run something once this new page had loaded. I'm using Node JS, and am generalising my logic into separate files, one of which is search.js as per the below:

const puppeteer = require('puppeteer')

const createSearch = async (param1) => {
  puppeteer.launch({
    headless: false,
  }).then(async browser => {

    const page = await browser.newPage(term, location)
    await page.goto('https://example.com/')
    await page.waitForSelector('body')

    await page.evaluate(() => {
      const searchForm = document.querySelector('form.searchBar--form')
      searchForm.submit() // this takes me to a new page which I need to wait for and then ideally return something.

      // I've tried adding code here, but it doesn't run...
    }, term, location)

  })
}

exports.createSearch = createSearch

I'm then calling my function from my app's entry point...

(async () => {

  // current
  search.createSearch('test')

  // proposed
  search.createSearch('test').then(() => {
    // trigger puppeteer to look at the new page and start running asserts.
  })

})()

Unfortunately, due to the form submitting, I'm unsure how I can wait for the new page to load and run a new function? The new URL will be unknown, and different each time, eg: https://example.com/page20

Answer 1

After form submit, you need to wait until the page reloads. Please add this following the await page.evaluate() function call.

await page.waitForNavigation();

And then you can perform action you want.