Question

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

Answer 1

似乎要走的路是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();
    }
});

这里到底发生了什么？

首先，所有请求都被page.setRequestInterception()
然后，对于每个请求，我会查找我感兴趣的请求，将其与网址if (request.url === constants.API)匹配，其中constants.API只是我需要匹配的端点。
如果找到，我会使用request.respond()传递自己的回复，否则我只是让请求继续request.continue()

还有两点：

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

请使用更好的示例评论或参考资源。

Answer 2

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

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

<强>更新

作为X Rene mentioned，现在使用request.respond()方法在Puppeteer v0.13.0中对此进行原生支持。我将重写我的测试以使用它而不是Pretender，因为这会为我简化许多事情。

更新2：

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

Answer 3

好。在最新的木偶操纵者中，它提供request.respond()方法来处理这种情况。

Answer 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();
})();

Answer 5

您可能想尝试Mockiavelli-为Puppeteer请求模拟库。它是专门为Web应用程序的无休止测试而构建的。它与jest和jest-puppeteer集成得最好，但可与任何测试库一起使用。

使用Puppeteer拦截页面上的XHR请求并返回模拟响应的最佳方法

5 个答案: