Mermaid 测试框架通过端到端测试、视觉回归测试和自动化浏览器测试，为图表渲染提供全面的验证。该系统确保图表生成在不同的配置、主题和浏览器环境中保持一致，同时检测渲染输出中的视觉回归。
有关执行这些测试的 CI/CD 管道的信息，请参阅 CI/CD 管道。有关项目构建和打包用于测试的详细信息，请参阅 构建与打包。
该测试框架以 Cypress 为核心，用于端到端测试，并配备自定义实用工具以进行视觉回归测试。该系统验证不同图表类型和配置下的功能行为和视觉输出一致性。
来源：cypress/integration/rendering/flowchart-v2.spec.js1-15 cypress/integration/rendering/sequencediagram.spec.js1-5 cypress/integration/rendering/flowchart-elk.spec.js1-5 cypress/platform/current.html1-30
核心测试系统使用 Cypress 执行基于浏览器的测试，以验证图表渲染功能和视觉输出。测试按图表类型组织，并利用自定义辅助函数以实现一致的测试执行。
该测试框架提供专门的辅助函数，用于抽象常见的测试模式
| 功能 | 目的 | 返回类型 | 文件位置 |
|---|---|---|---|
imgSnapshotTest | 使用图像快照进行视觉回归测试 | void | cypress/helpers/util.ts |
renderGraph | 渲染图表并返回DOM以进行断言 | void | cypress/helpers/util.ts |
verifyNumber | 在容差范围内验证数值 | void | cypress/helpers/util.ts |
来源：cypress/integration/rendering/flowchart-v2.spec.js4-15 cypress/integration/rendering/sequencediagram.spec.js40-68 cypress/integration/rendering/flowchart-elk.spec.js92-103
视觉回归测试通过捕获和比较渲染图表的图像快照来检测视觉输出中意外的更改。该系统验证配置更改、代码更新和主题修改不会破坏现有图表渲染。
imgSnapshotTest 函数通过渲染图表并比较屏幕截图来处理视觉回归测试。
测试验证不同的配置组合，以确保向后兼容性和正确的功能特性。
来源：cypress/integration/rendering/flowchart-v2.spec.js17-29 cypress/integration/rendering/flowchart-v2.spec.js66-81 cypress/integration/rendering/flowchart-icon.spec.js3-28
测试文件按图表类型和功能组织，每个类别都侧重于特定的渲染特性和边缘情况。
| 测试文件 | 目的 | 测试数量 | 主要功能 |
|---|---|---|---|
flowchart-v2.spec.js | 流程图渲染验证 | 100+ 个测试 | 节点形状、边、子图、样式 |
flowchart.spec.js | 传统流程图测试 | 60+ 个测试 | 基本流程图功能 |
sequencediagram.spec.js | 序列图测试 | 50+ 个测试 | 参与者、消息、循环、样式 |
flowchart-elk.spec.js | ELK 布局测试 | 80+ 个测试 | ELK 特定布局验证 |
flowchart-icon.spec.js | 图标渲染测试 | 10+ 个测试 | FontAwesome 图标集成 |
各个测试用例遵循一致的模式，以提高可维护性和可读性。
来源：cypress/integration/rendering/flowchart-v2.spec.js3-47 cypress/integration/rendering/sequencediagram.spec.js3-68 cypress/integration/rendering/flowchart-elk.spec.js3-57
该测试系统为不同的测试场景和图表验证要求提供了灵活的配置选项和实用工具。
cypress/platform/current.html 文件作为渲染图表的测试环境。
测试可以指定各种配置参数来验证不同的渲染场景。
| 配置类别 | 选项 | 使用示例 |
|---|---|---|
| 布局引擎 | { layout: 'elk' } | ELK 与 Dagre 布局测试 |
| HTML 标签 | { htmlLabels: true/false } | HTML 与 SVG 文本渲染 |
| 安全级别 | { securityLevel: 'strict/loose' } | 安全功能验证 |
| 主题 | { theme: 'dark/forest/base' } | 主题特定渲染 |
| 流程图选项 | { flowchart: { useMaxWidth: true } } | 流程图特定功能 |
来源：cypress/platform/current.html83-96 cypress/integration/rendering/flowchart-v2.spec.js82-104 cypress/integration/rendering/sequencediagram.spec.js812-841
测试框架通过视觉回归测试和基于DOM的功能测试来执行验证，以确保图表渲染功能的全面覆盖。
测试可以在图表渲染后验证特定的 DOM 属性和特性。
视觉回归测试工作流确保在代码更改后图表外观保持一致。
来源：cypress/integration/rendering/flowchart-v2.spec.js92-123 cypress/integration/rendering/sequencediagram.spec.js32-39 cypress/integration/rendering/flowchart-elk.spec.js687-700