ECharts 测试框架是一个视觉回归测试系统，旨在确保代码库的更改不会无意中影响图表的视觉外观。本文档解释了该框架的架构、组件和用法。
该测试框架使用 Puppeteer 自动化浏览器，捕获图表渲染的屏幕截图，并将其与预期的参考图像进行比较。它支持录制和回放用户交互以测试复杂的交互行为，并且可以针对不同的 ECharts 版本和渲染模式（Canvas/SVG）运行测试。
该框架由几个协同工作的关键组件组成
来源：test/runTest/server.js40-457 test/runTest/cli.js20-480 test/runTest/client/index.html1-377 test/runTest/store.js1-364
以下图表展示了测试从开始到结束的执行方式
来源：test/runTest/cli.js172-329 test/runTest/runtime/main.js19-201
服务器组件 (server.js) 负责
来源：test/runTest/server.js65-457
CLI 组件 (cli.js) 使用 Puppeteer 执行测试并进行屏幕截图比较
来源：test/runTest/cli.js172-329 test/runTest/cli.js343-417
存储组件 (store.js) 管理测试数据的持久化和检索
来源：test/runTest/store.js47-263
运行时代码被注入到测试页面中，以控制执行和捕获屏幕截图
来源：test/runTest/runtime/main.js19-201
客户端 UI 提供了一个可视化界面，用于
| 功能 | 描述 |
|---|---|
| 测试列表 | 所有可用测试的列表，带有状态指示器 |
| 测试运行器 | 运行选定测试的控件，带有配置选项 |
| 结果查看器 | 预期屏幕截图与实际屏幕截图的可视化比较，带有差异高亮显示 |
| 配置 | ECharts 版本、渲染器、线程数等设置 |
| 操作录制器 | 录制用户交互的界面 |
来源：test/runTest/client/index.html29-363 test/runTest/client/client.js20-661
该框架支持多种配置选项
| 选项 | 描述 | 默认 |
|---|---|---|
| 预期来源 | 预期版本来源（release/nightly/PR/local） | "release" |
| 预期版本 | 用于比较的版本号 | 最新版本 |
| 实际来源 | 实际版本来源（release/nightly/PR/local） | "local" |
| 实际版本 | 正在测试的版本号 | "local" |
| 渲染器 | 渲染模式 (canvas/svg) | "canvas" |
| 粗略指针 | 是否使用粗略指针事件 | “auto” |
| 线程 | 并发测试线程数 | 4 |
来源：test/runTest/client/client.js156-167 test/runTest/server.js228-379
测试可以通过 CLI 直接运行
这会启动服务器并在您的默认浏览器中打开客户端 UI。
来源：test/graph-case.html85-94 test/custom-update.html185-217
来源：test/runTest/cli.js114-147 test/runTest/cli.js350-398
该框架可以生成 HTML 报告，显示
可以通过点击测试运行对话框中的“报告”从 UI 生成报告。
来源：test/runTest/genReport.js56-151
某些测试可能不适合视觉回归测试（例如，带有随机数据或大量动画的测试）。这些测试可以被列入黑名单
来源：test/runTest/blacklist.js20-58
该测试框架可以集成到 CI/CD 流水线中，以便在拉取请求或发布前自动检测视觉回归。
常见问题和解决方案
npm install