如何在 Cypress 中列出并记录所有网络请求和响应时间

Question

我希望将所有请求转换为包括cy.intercept()以下json内容的对象：{'method':'____', 'url':'____', 'response_time':'____'}以便可以将它们写入json文件以进行性能分析。

我目前可以显示所有请求方法和 URL，但不能显示它们的响应时间。

当前获取网络请求的代码：

cy.intercept({method:'GET', url:'**'}).as('gets');
cy.intercept({method:'POST', url:'**'}).as('posts');
cy.visit('url');

是否可以迭代这些单独的请求及其响应时间并将它们保存在数组中？

我尝试将返回的值保存intercept()为变量，但它没有显示所有请求或其响应时间。

var gets = cy.intercept({method:'GET', url:'**'}).as('gets');
var posts = cy.intercept({method:'POST', url:'**'}).as('posts');
cy.visit('url');

cy.writefile('file1.json', gets);
cy.writefile('file2.json', posts);

提前致谢。

Answer 1

您想使用cy.intercept()回调来获取持续时间。

当请求被拦截时，会触发请求回调；当响应返回时，会触发响应回调。

const gets = []

const logGet = (request) => {
  const start = Date.now()
  request.continue((response) => {
    const duration = Date.now() - start
    gets.push({url: request.url, duration})
  })
}

cy.intercept('*', logGet)

cy.intercept('**/tracking.min.js').as('done')           // last call I'm interested in

cy.visit('https://docs.cypress.io/api/commands/intercept')

cy.wait('@done').then(() => {                          // wait for last
  console.log(gets)
})

另外，选择一个标记流结束的网络请求。Cypress 不知道通话何时结束，因此您应该cy.wait()选择最后一个而不是wait(3000)。

在上面的示例中，我选择了 Cypress 跟踪脚本。