如何在Cypress dashboard中查看Code coverage代码覆盖率及相关配置要求

只有完成前置配置、且使用支持覆盖率功能的Dashboard套餐时，才会显示对应的入口：
进入对应项目的某次测试运行详情页，在顶部的导航标签栏中找到 Coverage 标签，点击即可查看整体覆盖率指标、分文件覆盖率明细、未覆盖代码行标记等相关数据。如果未完成配置或套餐不支持，该标签不会显示。

• 安装依赖：安装@cypress/code-coverage官方插件，同时根据项目使用的构建工具（Webpack/Vite等）安装对应的istanbul插桩依赖，比如babel-plugin-istanbul、vite-plugin-istanbul等。
• 配置Cypress相关文件：在cypress.config.js中注册代码覆盖率的任务处理逻辑，在Cypress的support入口文件中添加import '@cypress/code-coverage/support'引入覆盖率收集逻辑。
• 开启业务代码插桩：测试环境运行的业务代码必须经过istanbul插桩处理，可通过构建工具的istanbul插件在打包阶段完成插桩，也可通过nyc工具在服务运行阶段完成插桩，未插桩的代码无法收集覆盖率数据。
• 开启Dashboard上传：本地/CI运行测试时需要添加--record参数，将测试结果同步上传到绑定的Cypress Dashboard中，同时不要设置禁用覆盖率上传的环境变量CYPRESS_CODE_COVERAGE=false。
• 确认套餐权限：Cypress Dashboard免费版不支持代码覆盖率展示功能，需使用Team及以上的付费套餐才可正常显示Coverage入口和数据。

内容的提问来源于stack exchange，提问作者systemdebt