Лучший способ перехватить запрос XHR на странице с помощью Puppeteer и вернуть макет ответа

Ответ 1

Что ж. В новейшем кукловоде он предоставляет метод request.respond() для обработки этой ситуации.

Ответ 2

Кажется, что путь действительно есть request.respond(), но, тем не менее, я не смог найти конкретный пример в Интернете о том, как его использовать. То, как я это сделал, было так:

// Intercept API response and pass mock data for Puppeteer
await page.setRequestInterception(true);
page.on('request', request => {
    if (request.url() === constants.API) {
        request.respond({
            content: 'application/json',
            headers: {"Access-Control-Allow-Origin": "*"},
            body: JSON.stringify(constants.biddersMock)
        });
    }
    else {
        request.continue();
    }
});

Что именно здесь происходит?

1. Во-первых, все запросы перехватываются с помощью page.setRequestInterception()
2. Затем для каждого запроса я ищу тот, который мне интересен, сопоставляя его по URL с if (request.url() === constants.API), где constants.API - это только конечная точка, которую мне нужно сопоставить.
3. Если найден, я передаю свой ответ с помощью request.respond(), в противном случае я просто продолжаю запрос с request.continue()

Еще два момента:

• constants.biddersMock выше - это массив
• Заголовок CORS важен, иначе доступ к вашим фиктивным данным не будет разрешен

Пожалуйста, прокомментируйте или обратитесь к ресурсам с лучшими примерами.

Ответ 3

Если кому-то интересно, я создал специальную сборку приложений для моих потребностей в тестировании, что добавляет Претендент на страницу. И я общаюсь с Pretender сервером, используя метод evaluate Puppeteer.

Это не идеально, но я не мог найти способ добиться того, что мне нужно только с Puppeteer. Существует способ перехвата запросов с помощью Puppeteer, но, похоже, это не способ предоставить фальшивый ответ для данного запроса.

ОБНОВИТЬ:

Как упоминал X Rene, в Puppeteer v0.13.0 есть встроенная поддержка, используя метод request.respond(). Я буду переписывать свои тесты, чтобы использовать его вместо Pretender, поскольку это упростит многие вещи для меня.

ОБНОВЛЕНИЕ 2:

Теперь для этого доступен pptr-mock-server. Внутри он полагается на метод перехвата запроса и request.respond(). Библиотека довольно минимальна и может не соответствовать вашим потребностям, но она, по крайней мере, дает пример того, как реализовать безэкстенсивное тестирование с помощью Puppeteer. Отказ от ответственности: я автор этого.

Ответ 4

Я создал библиотеку, которая использует Puppeteer page.on('request') и page.on('response') для записи и ответа на ложные запросы.

https://github.com/axiomhq/puppeteer-request-intercepter

npm install puppeteer-request-intercepter

const puppeteer = require('puppeteer');

const { initFixtureRouter } = require('puppeteer-request-intercepter');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Intercept and respond with mocked data.
  const fixtureRouter = await initFixtureRouter(page, { baseUrl: 'https://news.ycombinator.com' });
  fixtureRouter.route('GET', '/y18.gif', 'y18.gif', { contentType: 'image/gif' });

  await page.goto('https://news.ycombinator.com', { waitUntil: 'networkidle2' });
  await page.pdf({ path: 'hn.pdf', format: 'A4' });

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