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

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

如果有人对我感兴趣，我最终为我的测试需求创建了特殊的应用程序构建，这会添加到页面中。我使用木偶演员的

evaluate

方法与假装者服务器进行通信

这并不理想，但我找不到一种方法来实现我所需要的只是木偶演员。有一种方法可以通过Puppeter截获请求，但似乎无法为给定请求提供虚假响应

更新：

正如X Rene一样，现在在Puppeter v0.13.0中使用方法对其进行了本机支持。我将重写我的测试以使用它而不是假装器，因为这将简化我的许多事情

更新2:

---

现在有很多方法可以实现这一点。在内部，它依赖于请求拦截和方法。这个库非常小，可能不适合您的需要，但它至少提供了一个使用Puppeter实现无限制测试的示例。免责声明：我是它的作者。

嗯。在最新的木偶戏中，它提供了

request.respond（）

方法来处理这种情况。

看起来应该走的路是

request.respond（）

确实如此，但我仍然无法在web上找到一个具体的例子来说明如何使用它。我是这样做的：

// 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（）拦截所有请求

然后，对于每个请求，我通过URL将其与

if（request.URL（）==constants.API）

匹配来查找我感兴趣的请求，其中

constants.API

正是我需要匹配的端点

如果找到，我将通过

request.response（）

传递我自己的响应，否则我将通过

request.continue（）

还有两点：

• 常量。上面的biddersMock

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

---

请评论或参考参考资料中更好的例子。

我创建了一个库，它使用木偶演员的

页面（'request'）

和

页面（'response'）

来记录和响应模拟请求

---

您可能想尝试-请求木偶演员的模拟库。它的构建完全是为了对webapps进行无休止的测试。它与jest和jest Puppeter集成得最好，但可用于任何测试库

很高兴看到它现在已经实现了。将此标记为已接受的答案。现在有可用的方法来完成此操作。在内部，它依赖于请求拦截和方法。库非常小，可能不适合每个人的需要，但它至少提供了一个如何使用Puppeter实现无止境测试的示例。中有一条说明“不支持对dataURL请求进行模拟响应。调用

请求。对dataURL请求进行响应是一种noop”这是一种正确的方法。但是，
访问控制允许原点
是可选的，取决于特定的设置。非常感谢您的确认！注意，是一个函数，所以应该是
request.url（）==constants.API
Nice catch。更新！你有关于如何使用pptr模拟服务器的一些示例吗？@Tomazini我计划下周编写文档和一些示例。将添加到存储库readme.tks，我将跟踪存储库。。。我的问题是resquest.respond方法，应用程序无法处理响应
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();
})();