测试回放
你将学到
- 测试回放如何捕获和回放测试命令、网络请求、控制台日志、JavaScript错误及元素渲染
- 如何在Cypress Cloud中使用测试回放查看和调试测试
Cypress Cloud中的测试回放功能让开发者能准确高效地调试 失败和不稳定的持续集成测试运行。它捕获每次测试运行的细节，使开发者能够回放并检查DOM、网络请求、控制台日志、JavaScript错误和元素渲染，就像在cypress run期间发生的那样。
核心优势
CI中的测试失败传统上通过截图、视频和堆栈跟踪输出捕获， 但这些工件提供的信息有限。开发者通常需要更多上下文来理解 失败的根本原因，这要求他们在本地重现问题，但由于环境或网络条件， 这并不总是可行的。 测试失败与调试能力之间的知识鸿沟导致调试时间增加， 并可能将未解决的缺陷部署到生产环境。测试回放通过提供以下功能解决了这些问题。
时间旅行到持续集成运行期间测试失败的确切时刻
检查DOM、网络请求、控制台日志、 JavaScript错误和元素渲染
以更多上下文和准确性调试失败和不稳定的测试运行
消除本地重现测试失败的需求
可共享和协作的调试体验
测试回放是对Cypress Cloud现有可视化工件的补充。它通过让开发者时间旅行到测试失败的确切时刻， 消除了本地测试复制的需求。 开发者可以访问以前无法获取的细节和反馈循环，实现 更快更准确的调试，并增强处理CI中测试失败的信心。 用测试回放替代视频录制提供了更优越的调试体验， 可共享并支持团队协作的高效工作流。
开始使用
测试回放功能对所有Cypress Cloud计划开放， 不额外收费，但受使用限制约束。
要开始使用Cypress Cloud， 注册即可享受2周免费试用 - 包含所有 Cypress Cloud高级功能以及充足的测试结果， 让您体验Cypress Cloud的强大功能！
1. 记录测试运行
你只需记录测试运行并登录Cypress Cloud账户， 即可利用测试回放的调试能力。无需额外配置 或修改现有测试。
2. 访问测试回放
访问测试回放与查看Cypress Cloud中的其他测试工件一样简单。
在运行的概览下悬停待审查测试。
或导航至测试详情侧边栏标题或错误面板中每次尝试上方。标题选项将回放首次失败的测试，而每次尝试上方的选项将回放关联的测试。
3. 使用测试回放调试
上述两个选项都会显示测试回放界面，下面我们将从上到下详细解析。
运行标题
标题左侧显示Cypress Cloud测试运行ID号(#)，包含Git分支名以及规范、平台和浏览器信息。悬停在此处可查看额外的测试元数据。
命令日志
屏幕左侧显示命令日志，与Cypress应用中一样，你可以逐步执行、检查并通过时间旅行调试测试。
开发者工具
深入网络层流量、控制台事件并检查被测应用，就像在浏览器中一样。
回放控制
切换每次测试尝试，以不同速度播放错误或通过拖动播放头沿时间线滑动查看捕获的错误。
测试回放工作原理
我们的目标是创建一个覆盖用户最多场景的高效调试体验。 Cypress在端到端和组件测试运行期间捕获广泛的数据。 这些数据随后上传并存储在Cypress Cloud中，通过测试回放进行调试。
捕获内容
- 测试命令
- 网络请求
- 控制台日志
- JavaScript错误
- 元素渲染
- DOM变更
- CSS样式
- SVG元素
- Iframes
- Shadow DOM
- Canvas元素(v13.5.0+，请联系support@cypress.io启用canvas元素捕获)
未捕获内容
目前测试回放不支持以下内容：
- 在v13以下版本的Cypress应用中记录的测试
- WebKit浏览器(Safari)测试(查看问题)
- Firefox浏览器测试(查看问题)
- 视频元素(查看问题)
- 音频元素(查看问题)
- 不含
type="image/svg+xml"的对象(查看问题) - 含
slotAssignment="manual"的Shadow DOM元素(查看问题) - Shadow DOM中的canvas(查看问题)
- 服务器发送事件(查看问题)
- Web sockets(查看问题)
localStorage和sessionStorage(查看问题)- Cookies(查看问题)
cy.request()的网络流量(查看问题)cy.request()之外的Cypress命令的控制台属性(查看问题)
性能
记录
捕获这些额外数据在记录时可能使用更多资源，但你可以 预期测试回放与视频记录的性能相当。 捕获测试回放数据有更多活动，但没有录制、 压 缩和存储视频资产的开销。
提示： 我们建议在启用测试回放时禁用视频录制， 以优化性能。
你可以通过检查测试运行的标准输出来查看上传到Cloud的 测试回放数据大小及上传所花费的时间。
唯一存储到你文件系统的资产位于临时目录中，运行后会被删除。
(Uploading Cloud Artifacts)
- Video - Nothing to upload
- Screenshot - Nothing to upload
- Test Replay - 298 kB
Uploading Cloud Artifacts: .
(Uploaded Cloud Artifacts)
- Test Replay - Done Uploading 298 kB in 633.40ms 1/1
Canvas元素
捕获canvas元素可能消耗大量资源。如果你的应用中有大量canvas元素或大型canvas元素， 在捕获测试回放时可能会遇到性能问题，因此我们建议 在启用canvas元素捕获后监控测试性能，并向我们报告任何问题。
默认情况下canvas捕获是禁用的。要启用canvas元素捕获，请联系support@cypress.io。
运行器UI
Cypress应用中的"运行器UI"由 命令日志组成，显示你的规范中 执行的每个命令。UI还包括URL栏、浏览器选择器和被测应用上方的视口大小控制。
运行器UI在cypress open模式下可见，但在cypress run期间也会渲染
（无头模式），以便在捕获的截图或视频中显示，
协助调试CI失败。
但在通过cypress run运行测试时渲染运行器UI可能会影响性能，
导致测试运行时间变慢，特别是在资源较低的机器上。
有了测试回放，Cypress Cloud会为查看运行和调试CI失败重新生成整个UI。 此外，在视频和截图中显示Cypress命令日志对使用测试回放的用户价值较低。
因此，当启用测试回放时，运行器UI在cypress run期间不会渲染。
如果你想渲染运行器UI，可以通过传递--runner-ui作为CLI标志来开启此行为。
开启后可能会遇到性能下降，特别是在资源较低的机器上。
了解更多关于--runner-ui的命令行选项。
退出测试回放
请参考Cypress Cloud使用条款和我们的安全与合规指南，了解关于合理使用Cypress Cloud、数据存储和Cypress安全的具体内容。
测试回放，包括测试中利用的测试数据，对有权访问你项目的所有人可见。
如果你不想捕获用于回放和调试目的的测试数据，可以在项目设置中"关闭"测试回放。
故障排除
提示： 在进一步故障排除前，请确保你使用的是最新版本的Cypress。我们经常修复测试回放的bug， 所以你的问题可能已经解决。
如果你遇到问题且已尝试以下故障排除步骤， 可以在Cloud的测试回放窗口中点击报告问题按钮报告问题。
测试回 放不可用
如果Cypress Cloud中的测试回放按钮被禁用，有几项需要检查：
- 确认运行已使用Cypress
v13或更高版本记录到Cypress Cloud。 - 确保测试使用基于Chromium的浏览器(Chrome、Edge、Electron)记录。
- 检查Cypress Cloud项目设置中是否启用了测试回放。
- 检查测试运行的标准输出，确保没有上传测试回放时出错。
Safari 16.3及以下版本用户在_查看_测试回放时可能会遇到错误
Cypress Cloud依赖特定浏览器实现的Web API。Safari 16.4以下版本可能缺少渲染测试回放所需的某些API。要在Safari中查看测试回放，可使用16.4及以上版本。这不影响运行测试或记录到Cypress Cloud。
测试回放上传出错
有时，追踪导致无法上传测试回放记录的问题可能很困难。 我们尽量在错误消息中提供尽可能多的细节以解决问题。
上传测试回放记录有问题的规范在Cypress Cloud中可能有禁用的"测试回放"按钮。
可以通过查看规范输出来查看确切的错误消息。
常见错误
- X次尝试后上传失败错误：此错误发生在由于网络问题测试回放数据未上传到Cloud时。
可能是由于网络连接不良或网络问题。修复方法：
- 尝试再次记录测试，看问题是否持续。
- 网络或HTTP错误：这些错误表明Cypress无法建立上传连接。修复方法：
- 确保机器能访问互联网。
- 确保记录规范的机器网络配置允许Cypress URL。
- 检查防火墙或代理是否阻止连接。如果代理阻止连接，配置代理使其不阻止上传到Cypress URL。
- 检查cypress状态是否有持续问题。
- 无效或缺失的测试回放上传URL：运行时间超过
运行超时的规范将无法成功上传。修复方法：
- 减少规范的运行时间。
- 或在项目设置中增加运行超时。