Как дождаться получения браузером ответа по ajax-запросу через puppeteer?

Question

Все гайды по puppeteer довольно примитивны.

const puppeteer = require('puppeteer');

(async function() {
  const browser = await puppeteer.launch({ 
      headless: false, 
      defaultViewport: null
  });
  const page = await browser.newPage();
  await page.goto('https://url.com/', { waitUntil: 'networkidle2' });
  await page.click('#button-filters');
  await page.click('label[for="filter-type-pack"]');  // После второго и третьего клика
  await page.click('label[for="order_by-date"]');     // страница отправляет ajax-запрос

  // . . .

  await browser.close();
})();

В месте кода, где три точки (. . .) по мануалам предлагается подождать одну или несколько секунд с помощью метода page.waitFor(1000) и извлекать результат запроса из DOM получившейся страницы. Проблема состоит в том, что: а) нет гарантий что ajax-запрос завершится за отведенное на ожидание время, б) в конечном DOM нет нужной для меня информации, но эта информация есть в теле ответа сервера по ajax-запросу.

Соответственно и вопроса два:

Как дождаться ответа по запросу либо ошибки подключения гарантированно?

Как извлечь информацию из тела ответа по ajax-запросу?

Answer 1

Можно через обработчик события 'response':

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();

try {
  const [page] = await browser.pages();

  await page.goto('https://example.org/');

  page.addListener('response', async (response) => {
    if (response.url() === 'https://example.org/?foo') {
      page.removeAllListeners('response');
      console.log(await response.text());
      await browser.close();
    }
  });

  page.evaluate(() => { fetch('https://example.org/?foo'); });
} catch(err) { console.error(err); }

БЛОГ НА HUSL

Как дождаться получения браузером ответа по ajax-запросу через puppeteer?

Ответы (1 шт):