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

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

这到底发生了什么？

1. 首先,所有请求都被拦截 page.setRequestInterception()
2. 然后,对于每个请求,我寻找我感兴趣的请求,通过URL匹配,if (request.url() === constants.API)其中constants.API只需要匹配的端点.
3. 如果找到,我会通过我自己的回复request.respond(),否则我只是让请求继续request.continue()

还有两点:

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

请通过更好的示例评论或参考资源.

Answer 2

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

这不是理想的选择，但是我找不到仅使用Puppeteer即可实现所需功能的方法。有一种方法可以拦截Puppeteer的请求，但似乎无法为给定请求提供假响应。

更新：

正如X Rene 提到的那样，Puppeteer v0.13.0现在使用request.respond（）方法对此提供了本机支持。我将重写测试以使用它而不是Pretender，因为这将为我简化许多事情。

更新2：

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

Answer 3

好。在最新的人偶中，它提供了request.respond()处理这种情况的方法。