Как я могу ждать простоя сети после нажатия на элемент в кукловоде?

Question

Как я могу ждать простоя сети после нажатия на элемент в кукловоде?

const browser = await puppeteer.launch({headless: false});
await page.goto(url, {waitUntil: 'networkidle'});

await page.click('.to_cart'); //Click on element trigger ajax request
//Now I need wait network idle(Wait for the request complete)
await page.click('.to_cart');

UPD: после нажатия элемента нет навигации

Answer 1

У кукловода есть два метода.

• page.waitForRequest (urlOrPredicate [, options])
• page.waitForResponse (urlOrPredicate [, options])

Пример:

await promise.all([page.waitForRequest(callback), page.waitForResponse(callback)])

Answer 2

Я столкнулся с подобной проблемой и обнаружил, что временная функция в сетевом ожидании Puppeteer Control вызвала проблему, соответствующую моим потребностям: https://github.com/GoogleChrome/puppeteer/issues/1353#issuecomment-356561654

По сути, вы можете создать пользовательскую функцию и вызывать ее долюбые дополнительные шаги:

function waitForNetworkIdle(page, timeout, maxInflightRequests = 0) {
  page.on('request', onRequestStarted);
  page.on('requestfinished', onRequestFinished);
  page.on('requestfailed', onRequestFinished);

  let inflight = 0;
  let fulfill;
  let promise = new Promise(x => fulfill = x);
  let timeoutId = setTimeout(onTimeoutDone, timeout);
  return promise;

  function onTimeoutDone() {
    page.removeListener('request', onRequestStarted);
    page.removeListener('requestfinished', onRequestFinished);
    page.removeListener('requestfailed', onRequestFinished);
    fulfill();
  }

  function onRequestStarted() {
    ++inflight;
    if (inflight > maxInflightRequests)
      clearTimeout(timeoutId);
  }

  function onRequestFinished() {
    if (inflight === 0)
      return;
    --inflight;
    if (inflight === maxInflightRequests)
      timeoutId = setTimeout(onTimeoutDone, timeout);
  }
}

// Example
await Promise.all([
  page.goto('https://google.com'),
  waitForNetworkIdle(page, 500, 0), // equivalent to 'networkidle0'
]);

Answer 3

Непосредственно из документов

Это разрешается, когда страница переходит на новый URL или перезагружается. Это полезно, когда вы запускаете код, который косвенно заставляет страницу перемещаться. Рассмотрим этот пример:

const [response] = await Promise.all([
  page.waitForNavigation(), // The promise resolves after navigation has finished
  page.click('a.my-link'), // Clicking the link will indirectly cause a navigation
]);