使用 Cypress 覆盖现有命令

Question

我正在尝试覆盖 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

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

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

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

请注意，创建覆盖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.

*/