16、前端测试：XHR 请求处理与可视化测试实战

前端测试：XHR 请求处理与可视化测试实战

1. XHR 请求与响应处理

1.1 Cypress 中 XHR 响应存根

在 Cypress 里，使用存根（stub）处理 XHR 响应非常有效。客户端应用难以分辨响应是来自服务器还是存根，这一特性让 Cypress 能高效拦截请求并发送响应，避免等待服务器长时间响应。

1.2 存根 XHR 响应练习

使用 GitHub 仓库中的金融应用进行练习，该应用位于 cypress-realworld-app 目录，练习解决方案在 chapter-11/integration/xhr-requests-exercises 目录。
- 步骤一：存根登录 POST 请求
- 存根应用的登录 POST 请求，将仪表盘返回的测试用户名改为自己的姓名和用户名。
- 断言返回的响应包含存根的用户名和姓名信息。
- 要正确存根响应，需了解非存根时服务器的响应内容。操作步骤如下：
1. 打开浏览器控制台，点击“Network”标签。
2. 选择“XHR”过滤选项，查看所有发送到服务器和客户端接收的请求与响应。
3. 点击具体请求，从浏览器控制台“Network”窗口的“Response”标签复制响应内容，用此内容存根服务器响应，确保响应一致性。
4. 还可从“Network”窗口获取请求的头信息和实际发送请求的 URL。
- 步骤二：修改交易金额
- 成功登录后，从“Everyone Dashboa