如何使用 Cypress.io 检查和查询出站网络请求？答案

【问题标题】：How to inspect and query outbound network requests with Cypress.io?如何使用 Cypress.io 检查和查询出站网络请求？
【发布时间】：2018-12-05 14:46:38
【问题描述】：

我正在尝试加载一个页面，然后我想使用 Cypress.io 来检查与 https://securepubads.g.doubleclick.net/gampad/ads?* 匹配的网络请求并查看特定查询参数的请求（通常至少有 2 个或更多这样的请求）。在 Chrome 中，如果我想手动检查页面的网络请求，我只需转到 Chrome 开发工具中的网络选项卡并检查这些请求。我在另一个半相关的 SO 问题 (Check outgoing browser network calls using Cypress.io) 中被告知我应该能够使用

cy.route({
   url: '', 
   onRequest: (req) => { 
      // Some code in here
   } 
});

自动执行此操作。但是，当我使用 cy.server() 设置此 cy.route() 示例时，我看不到此回调执行中的任何内容。到https://securepubads.g.doubleclick.net/gampad/ads?* 的路由已选中，但我看到服务器在 Chrome 开发工具的网络选项卡中对https://securepubads.g.doubleclick.net/gampad/ads?* 的调用之一返回 400。如果我正常点击页面，我看不到这个 400 错误。

似乎 cy.route 用于存根请求和响应。我不需要存根任何请求或响应。我只想查看和查询发出的网络请求而不修改它们，就像 Chrome 开发工具所做的那样，但自动化。 Cypress.io 是否支持此用例？谢谢。

【问题讨论】：

标签： browser e2e-testing cypress

【解决方案1】：

您还可以使用cy.wait() 来检查与cy.route() 匹配的请求的查询参数。像这样：


cy.route("https://securepubads.g.doubleclick.net/gampad/ads?*")
  .as("myAds");

cy.wait(@myAds)
  .then(request => {
    expect(request.url).to.match(/\?param1=true/);
  });

另外，如果您只想手动查看查询参数，您可以点击WAIT：

控制台将向您显示整个 XMLHttpRequest，您可以在其中单击以检查请求和响应的 URL 或其他属性：

【讨论】：

【解决方案2】：

在赛普拉斯 github 页面上提出问题后，我能够解决我的问题。

根据赛普拉斯文档，启动 cy.server()，然后调用路由，但将实际的正则表达式模式传递给 url 参数（未记录）。我不知道文档中显示的字符串 glob 版本有什么问题，但实际的正则表达式模式导致路由触发。

cy.server();

cy.route({
  url: /gampad\/ads\?/,
  onRequest: (req) => {
     debugger;
     // Do checks here.
  }
});

【讨论】：