How to see fetch history and logs after cypress run?

在使用 Cypress 进行前端自动化测试时，您可以利用其丰富的 API 来监测网络请求。Cypress 提供了多种方式来查看接口请求历史和请求日志。

1. 使用 cy.intercept() 捕获和查看请求： Cypress 允许您通过 cy.intercept() 方法捕获网络请求。这样，您可以拦截应用程序发出的任何 HTTP 请求，并查看请求及响应的详细信息。

   例如，要捕获对 /api/users 端点的 GET 请求，您可以这样写：

   javascript
   // 在测试用例开始前设置拦截器
   cy.intercept('GET', '/api/users').as('getUsers');
   
   // 触发请求
   // ...
   
   // 等待请求完成，并获取请求详情
   cy.wait('@getUsers').then((interception) => {
     // 查看请求的详细信息
     console.log(interception.request);
     // 查看响应的详细信息
     console.log(interception.response);
   });

   在这个例子中，所有发送到 /api/users 的 GET 请求都会被拦截，且可以通过 @getUsers 别名在测试中引用。

2. 在 Cypress 测试运行器中查看请求日志： 当您在 Cypress 交互式测试运行器中运行测试时，每个通过 cy.intercept() 拦截的请求都会在左侧的命令日志中显示。点击这些日志项可以展开详情，其中包括请求的 URL、方法、请求头、请求体、响应状态码、响应头和响应体等信息。

3. 输出日志到控制台： 在您的测试代码中，您可以使用 console.log() 或其他日志方法将请求和响应信息打印到浏览器的控制台。这通常在调试测试时非常有用。

请注意，cy.intercept() 方法不仅允许查看请求和响应，还可以在测试中模拟响应或改变请求的行为，这使得它成为一个非常强大的工具。

通过上述方法，您可以有效地查看和管理 Cypress 中的接口请求历史和请求日志。这对于验证应用程序的网络活动和调试测试非常有帮助。