How to get Puppeteer waitForNavigation Working after click

Question

I am trying to get puppeteer to wait for the navigation to finish before moving on to the next statement. Based on the Docs for waitForNavigation() , the code should work below. but it just skips to the next statement and I have to use a workaround to wait for a specific URL in the response.

I have tried all the waituntil options as well
( load, domcontentloaded, networkidle0 and networkidle2 ) .

Any ideas how I could get that working properly is appreciated.

const browser = await puppeteer.launch({
  headless: false,
})
const page = await browser.newPage()
const home = page.waitForNavigation()
await page.goto(loginUrl)
await home

const login = page.waitForNavigation()
await page.type('#email', config.get('login'))
await page.type('#password', config.get('password'))
await page.click('#submitButton')
await login // << skips over this

// the following line is my workaround and it works , but ideally I don't want 
// to specify the expected "after" page each time I navigate
await page.waitForResponse(request => request.url() === 'http://example.com/expectedurl')

Answer 1

The function page.waitForNavigation() waits for navigation to begin and end.

The navigation has already been initiated with page.click().

Therefore, you can use Promise.all() to avoid the race condition between the mentioned functions:

const browser = await puppeteer.launch({
  headless: false,
});

const page = await browser.newPage();

await page.goto(loginUrl);

await page.type('#email', config.get('login'));
await page.type('#password', config.get('password'));

await Promise.all([
  page.click('#submitButton'),
  page.waitForNavigation({
    waitUntil: 'networkidle0',
  }),
]);

await browser.close();

Answer 2

I have been going through the same problem, I used pending-xhr-request

it solved many problems when the requests were expected, but when I have late requests I have faced many problems, it took me a while to solve the problem so I built a package Puppeteer-response-waiter to do that

const puppeteer = require('puppeteer');
const {ResponseWaiter} = require('puppeteer-response-waiter');

let browser = await puppeteer.launch({ headless: false });
let page = await browser.newPage();
let responseWaiter = new ResponseWaiter(page);
await page.goto('http://somesampleurl.com');
// start listening
responseWaiter.listen();
// do something here to trigger requests
await responseWaiter.wait();
// all requests are finished and responses are all returned back

// remove listeners
responseWaiter.stopListening();
await browser.close();

hope this will solve your problem.