用赛普拉斯重写现有命令

Question

我想 覆盖Cypress.io中的现有命令。. 我正在寻找 log() 途径答复的 status & 航线的 url 来扩展内置的 路由(). 不幸的是，我得到了这个消息 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

当使用模式 cy.route(method, url, response)，响应参数用于支点调用并将提供的响应返回给你的应用程序，见(路由() - 参数)

响应 (String, Object, Array)

为匹配路由中的存根提供一个响应体。

请注意，创建一个覆盖 cy.route() 将钩入路由配置，而不是捕获路由。

模式 cy.route(options) 具有 关于回应 选项，可用于 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.

*/

Answer 2

根据你想达到的目的，有几个选择。理查德的 回答 上面描述了一种方法--我将尝试涵盖其他一些方法。

(注：Cypress文档在 https:/docs.cypress.io 可能会比这个答案给你更好的理解。我会尽量把相关文章内嵌链接)

(如果您不关心为什么您的代码不能工作，您可以跳到 "检查Api响应 "部分)

你的代码中发生了什么？

让我们看看来自 https:/docs.cypress.ioapicommandsroute.html#Examples。

cy.server()
cy.route('**/users').as('getUsers')
cy.visit('/users')
cy.wait('@getUsers')

没有你的重写。cy.route 这里只是注册了路线，所以你可以以后再等（记住。cy.route 不 使任何api调用自己）。) 随着你的覆写。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')

你可以看到为什么 response 是未定义的--它根本没有被传递到路由调用中，因为请求还没有被发出。

请注意，如果我们试图模拟该调用（参见 https:/docs.cypress.ioapicommandsroute.html#With-Stubbing。)

cy.route('https://localhost:7777/surveys/[email protected]', [
  {
    id: 1,
    name: 'john'
  }
])

您可以登录

"The route https://localhost:7777/surveys/[email protected] had [object Object] status code"

检查Api响应

如果你只是想检查api的响应，你可以使用内置的调试工具（在调用了 cypress open). 浏览器的网络选项卡是可用的(它将记录在给定的测试运行期间发出的所有请求)，你还可以另外点击左边面板中记录的响应，它将把请求和响应记录到浏览器控制台。

如果你正在尝试对api调用的响应进行断言，你可以使用 cy.wait (见 https:/docs.cypress.ioguidesguidesnetwork-requests.html#等待。)，以便在xhr请求完成后获得对其的访问。

cy.wait('@apiCheck').then((xhr) => {
  assert.isNotNull(xhr.response.body.data, '1st API call has data')
})

如果你想记录在CLI运行期间的API调用（使用 cypress run)，你可以。

1. 打印调试信息，这将给你提供很多信息，包括所有的请求和响应(参见 https:/docs.cypress.ioguidesreferencestroubleshooting.html#打印-DEBUG-logs。): DEBUG=cypress:* cypress run （你可以改变 cypress:* 来限制调试的范围，只限于api调用，尽管我不知道你想要的命名空间是什么)
2. 使用一个记录所有请求的插件（如 https:/github.comNeuraLegioncypress-har-generator）。)