31

我需要能够在加载了Puppeteer的页面上拦截 XHR 请求并返回模拟响应，以便为我的 Web 应用程序组织后端测试。最好的方法是什么？

4

5 回答 5

37

似乎要走的路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. if (request.url() === constants.API)然后，对于每个请求，我都会通过 URL 将其与whereconstants.API只是我需要匹配的端点进行匹配，从而查找我感兴趣的请求。
  3. 如果找到，我通过我自己的响应request.respond()，否则我只是让请求继续request.continue()

还有两点：

  • constants.biddersMock上面是一个数组
  • CORS 标头很重要，否则将不允许访问您的模拟数据

请评论或参考具有更好示例的资源。

于 2018-01-21T10:13:29.640 回答
10

出色地。在最新的 puppeteer 中，它提供了request.respond()处理这种情况的方法。

于 2017-10-23T01:54:58.917 回答
7

如果有人感兴趣，我最终会为我的测试需求创建特殊的应用程序构建，它将Pretender添加到页面中。我使用 Puppeteer 的evaluate方法与 Pretender 服务器进行通信。

这并不理想，但我无法找到一种方法来仅使用 Puppeteer 来实现我所需要的。有一种使用 Puppeteer 拦截请求的方法，但似乎无法为给定请求提供虚假响应。

更新：

正如 X Rene 所提到的，现在在 Puppeteer v0.13.0 中使用request.respond()方法对此提供了原生支持。我将重写我的测试以使用它而不是 Pretender，因为这将为我简化很多事情。

更新 2：

现在可以使用pptr-mock-server来完成此操作。在内部它依赖于请求拦截和request.respond()方法。库非常小，可能无法满足您的需求，但它至少提供了一个如何使用 Puppeteer 实现后端测试的示例。免责声明：我是它的作者。

于 2017-10-10T17:31:29.003 回答
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();
})();
于 2019-09-04T18:52:56.120 回答
1

您可能想尝试Mockiavelli - 为 Puppeteer 请求模拟库。它专为 webapps 的后端测试而构建。它与 jest 和 jest-puppeteer 集成得最好，但适用于任何测试库。

于 2020-05-11T18:30:19.407 回答