Question

我正在尝试overwrite an existing command in Cypress.io。我正在寻找log()路由响应的status和路由url来扩展内置route()的功能。不幸的是，我在The route undefined had a undefined status code.中收到了此消息console。请注意，我暂时使用浏览器的console。最终，我将使用内置的log()方法。到目前为止，这是我尝试过的：

cypress/support/commands.js
Cypress.Commands.overwrite('route', (originalFn, response) => {
  console.log(`The route ${response.url} had a ${response.status} status code.`);

  return originalFn(response);
});

更新：

我现在正在走这条路线，但是我仍然没有得到response或status。这是我当前的代码：

Cypress.Commands.overwrite('route', (originalFn, url, response) => {
  console.log(`The route ${url} had ${response} status code`);
  return originalFn(url, response);
});

Answer 1

根据您要实现的目标，有两种选择。理查德的answer在上面描述了一种方法-我将尝试介绍其他方法。

（注意：https://docs.cypress.io/上的赛普拉斯文档可能会比这个答案为您提供更好的理解。我将尝试以内联方式链接相关文章）

（如果您不关心代码为什么不起作用，可以跳至“检查Api响应”部分）

您的代码中发生了什么

让我们看一下https://docs.cypress.io/api/commands/route.html#Examples

中的示例代码

Object

在没有覆盖的情况下，cy.server() cy.route('**/users').as('getUsers') cy.visit('/users') cy.wait('@getUsers')仅在此处注册路由，因此您可以稍后等待它（请记住，cy.route 不会自己进行任何api调用）。覆盖之后，cy.route被回调完全取代了：

cy.route

因此，当调用Cypress.Commands.overwrite('route', (originalFn, url, response) => { console.log(`The route ${url} had ${response} status code`); return originalFn(url, response); });时，它将求值

cy.route('**/users')

您可以看到(originalFn, url, response) => { console.log(`The route ${url} had ${response} status code`); // Logs "The route **/users had undefined status code" return originalFn(url, response); // Registers the route with an mock value of undefined })(originalCypressRouteFn, '**/users')为何未定义的原因-它根本没有传递到路由调用中，因为甚至没有发出请求。

请注意，如果我们尝试模拟呼叫（请参见https://docs.cypress.io/api/commands/route.html#With-Stubbing）

response

您应该登录

cy.route('https://localhost:7777/surveys/customer?email=john@doe.com', [
  {
    id: 1,
    name: 'john'
  }
])

检查Api响应

如果您只想检查来自api的响应，则可以使用内置的调试工具（在调用"The route https://localhost:7777/surveys/customer?email=john@doe.com had [object Object] status code"之后使用）。浏览器的“网络”选项卡可用（它将记录在给定测试运行期间发出的所有请求），并且您还可以单击左侧面板中记录的响应，这会将请求和响应记录在浏览器控制台中。

如果您要尝试对api调用的响应进行断言，则可以使用cypress open（请参见https://docs.cypress.io/guides/guides/network-requests.html#Waiting）在完成后访问基本xhr请求：

cy.wait

如果要记录在CLI运行期间（使用cy.wait('@apiCheck').then((xhr) => { assert.isNotNull(xhr.response.body.data, '1st API call has data') })）进行的API调用的记录，可以：

打印调试信息，它将为您提供很多信息，包括所有请求和响应（请参见https://docs.cypress.io/guides/references/troubleshooting.html#Print-DEBUG-logs）：cypress run（您可以更改DEBUG=cypress:* cypress run来限制调试到仅api调用，尽管我不知道要使用什么命名空间）
使用一个可记录所有请求的插件（例如https://github.com/NeuraLegion/cypress-har-generator）

Answer 2

使用模式cy.route(method, url, response)时，response参数用于存入调用并将提供的响应返回给您的应用程序，请参阅（route() - Arguments）

响应（字符串，对象，数组）

为匹配路由中的存根提供响应正文。

请注意，创建cy.route()的覆盖将钩接到路由配置中，而不是捕获路由。

模式cy.route(options)有一个onResponse选项，可用于console.log()响应，但是cy.log()在那里不起作用，可能是因为我们在命令。

Cypress.log()可以代替。

cy.route({
  url: 'http://example.com',
  method: 'GET',
  onResponse: (response => {
    const message = `The route '${response.url}' had a ${response.status} status code.`;
    const log = Cypress.log({
      displayName: 'Route debugging',
      message: message,
      consoleProps: () => {
        // return an object which will
        // print to dev tools console on click
        return {
          message: message,
        }
      }
    })
    log.finish();  // remove log spinner
  })
})

/*
  Command log output:

    ROUTE DEBUGGING
    The route 'http://example.com' had a 200 status code.

*/

用赛普拉斯覆盖现有命令

2 个答案:

您的代码中发生了什么

检查Api响应