wangyifang
/
cz-hjjc-budget
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
cz-hjjc-budget/快速测试指南.md

8.2 KiB
Raw Permalink Blame History Escape

Mermaid 流程图功能 - 快速测试指南

🚀 快速开始

方法一：直接在浏览器中打开

  1. 打开主页面

    文件路径：ui/pages/flowcharts.html

    直接在浏览器中打开此文件即可看到所有流程图。

  2. 打开模板页面

    文件路径：ui/pages/flowchart-template.html

    查看各种流程图模板和示例。

方法二：通过系统导航访问

  1. 打开系统主页面

    文件路径：ui/layout.html

  2. 在左侧导航菜单找到 "业务流程图" 菜单项（带 "新" 标签）

  3. 点击进入流程图展示页面

✅ 测试检查清单

1. 页面加载测试

  • 页面能正常打开
  • 所有流程图都能正确渲染
  • 页面样式显示正常
  • 没有控制台错误

2. 标签页切换测试

  • 点击 "支付流程" 标签
  • 点击 "预算管理" 标签
  • 点击 "审批流程" 标签
  • 点击 "权限管理" 标签
  • 切换时流程图正常显示

3. 流程图展示测试

每个标签页检查：

  • 流程图能完整显示
  • 节点颜色正确
  • 连接线清晰
  • 文字可读
  • 布局合理（水平排列）

4. 交互功能测试

  • 流程图可以横向滚动（如果内容过宽）
  • 点击 "导出" 按钮能下载 SVG 文件
  • 鼠标悬停在流程图容器上有阴影效果
  • 页面加载时有渐入动画

5. 响应式测试

调整浏览器窗口大小：

  • 桌面端显示正常（宽度 > 1200px）
  • 平板端显示正常（宽度 768px-1199px）
  • 移动端显示正常（宽度 < 768px）
  • 流程图在小屏幕上能横向滚动

6. 导航集成测试

在 layout.html 页面中：

  • 左侧菜单显示 "业务流程图" 选项
  • "新" 标签显示正确
  • 点击菜单项能在 iframe 中加载流程图页面
  • 菜单激活状态正确

🎯 核心功能验证

支付流程

访问 "支付流程" 标签页，应该看到：

  1. ✅ 直接支付流程图（提交→审核→审批→支付→完成）
  2. ✅ 非直接支付流程图（包含合规审核和财政审批）

预算管理

访问 "预算管理" 标签页，应该看到：

  1. ✅ 预算执行管理流程图（三大模块树状结构）
  2. ✅ 预算申报审批流程图（按金额分级审批）

审批流程

访问 "审批流程" 标签页，应该看到：

  1. ✅ 事前审批流程图（采购/出差/会议/合同）
  2. ✅ 多级审批流程图（初审→复审→终审）

权限管理

访问 "权限管理" 标签页，应该看到：

  1. ✅ 用户权限管理流程图（角色分类权限树）
  2. ✅ 访问控制流程图（登录验证流程）

🔍 详细测试步骤

测试 1：直接打开 flowcharts.html

# 在项目目录下
cd czemc-budget-execution-frontend/ui/pages
# 用浏览器打开
open flowcharts.html  # macOS
# 或
start flowcharts.html  # Windows

预期结果：

  • 页面标题显示 "业务流程图 - 资金使用管理系统"
  • 看到 4 个标签页：支付流程、预算管理、审批流程、权限管理
  • 默认显示 "支付流程" 标签内容
  • 至少显示 2 个流程图

测试 2：通过 layout.html 访问

# 打开主布局页面
cd czemc-budget-execution-frontend/ui
open layout.html  # macOS

预期结果：

  • 左侧菜单显示 "业务流程图" 选项（带蓝色 "新" 标签）
  • 点击后在右侧 iframe 中加载流程图页面
  • 菜单项变为激活状态（蓝色背景）

测试 3：导出功能测试

  1. 打开 flowcharts.html
  2. 找到任意流程图的 "导出" 按钮
  3. 点击按钮

预期结果：

  • 浏览器下载一个 SVG 文件
  • 文件名类似 flowchart-1234567890.svg
  • 弹出提示 "流程图已导出为 SVG 格式"
  • 下载的 SVG 文件可以用图片查看器打开

测试 4：模板页面测试

cd czemc-budget-execution-frontend/ui/pages
open flowchart-template.html

预期结果：

  • 看到 6 个流程图示例
  • 每个示例下方显示对应的 Mermaid 代码
  • 代码显示在黑色背景的代码框中
  • 所有流程图都能正确渲染

🐛 常见问题排查

问题 1：流程图不显示

可能原因：

  • CDN 加载失败
  • JavaScript 被禁用
  • Mermaid 语法错误

解决方法：

  1. 打开浏览器开发者工具（F12）
  2. 查看 Console 标签页是否有错误
  3. 检查 Network 标签页，确认 Mermaid CDN 加载成功
  4. 确保浏览器启用了 JavaScript

问题 2：样式显示异常

可能原因：

  • Bootstrap CSS 未加载
  • 自定义样式冲突

解决方法：

  1. 检查 Bootstrap CDN 是否加载成功
  2. 清除浏览器缓存后刷新
  3. 尝试在隐私模式/无痕模式下打开

问题 3：在 iframe 中显示不正常

可能原因：

  • 路径问题
  • iframe 高度不足

解决方法：

  1. 检查 layout.html 中的 iframe src 路径
  2. 确保使用相对路径 pages/flowcharts.html
  3. 检查 iframe 的 CSS 样式

📸 预期截图参考

1. 主页面 - 支付流程标签

应该看到：

  • 顶部：4 个标签页，"支付流程" 被选中（蓝色下划线）
  • 左侧：页面标题 "业务流程图"
  • 主体：2 个流程图卡片
    • 第一个：直接支付流程
    • 第二个：非直接支付流程
  • 底部：使用说明卡片（3 列布局）

2. 导航菜单

应该看到：

  • 左侧边栏菜单
  • "业务流程图" 选项位于 "资金管理" 下方
  • 带有蓝色小标签显示 "新"
  • 图标是三个连接的圆圈（bi-diagram-3）

3. 流程图样式

每个流程图应该：

  • 有白色背景的卡片容器
  • 顶部标题区域（带图标）
  • 浅蓝色说明区域
  • 浅灰色背景的流程图区域
  • 节点使用彩色填充
  • 连接线清晰可见

✨ 功能亮点演示

1. 水平排列效果

打开任意流程图，观察：

  • ✅ 流程从左到右展开
  • ✅ 适合中文阅读习惯
  • ✅ 层次清晰

2. 配色方案

注意观察不同类型节点的颜色：

  • 🔵 蓝色节点 - 开始/输入
  • 🟢 绿色节点 - 完成/成功
  • 🟠 橙红节点 - 退回/修改
  • 🟡 黄色节点 - 判断/审核

3. 交互效果

  • 鼠标悬停在流程图卡片上会有轻微上移效果
  • 标签页切换流畅
  • 页面加载时有渐入动画

🎓 学习测试

任务 1：理解基础语法

查看 flowchart-template.html 中的 "基础水平流程" 示例，理解：

  • graph LR 的含义
  • --> 箭头的使用
  • style 语句的作用

任务 2：修改现有流程图

尝试修改 flowcharts.html 中的任意流程图：

  • 修改节点文字
  • 更改节点颜色
  • 添加新的节点

任务 3：创建新流程图

使用 flowchart-template.html 中的模板，创建一个新的流程图：

  • 选择合适的模板
  • 替换节点文字
  • 调整颜色样式

📊 性能测试

加载时间

  • 首次加载时间 < 2 秒
  • 标签页切换响应 < 0.5 秒
  • 流程图渲染时间 < 1 秒

资源占用

打开浏览器开发者工具，检查：

  • 页面大小 < 500KB（不含 CDN 资源）
  • 初始 JavaScript 执行时间 < 500ms
  • 内存占用合理（< 50MB）

🎉 测试完成

完成所有测试后，您应该能够：

  • ✅ 正常访问流程图页面
  • ✅ 看到 8 个完整的业务流程图
  • ✅ 切换不同标签页
  • ✅ 导出流程图为 SVG
  • ✅ 理解如何添加新的流程图
  • ✅ 掌握 Mermaid 基础语法

📝 测试报告模板

测试日期：________
测试人员：________
浏览器：________ 版本：________

[ ] 页面加载正常
[ ] 所有流程图显示正常
[ ] 标签页切换功能正常
[ ] 导出功能正常
[ ] 响应式布局正常
[ ] 导航集成正常

问题记录：
1. ________________________________
2. ________________________________
3. ________________________________

总体评价：□ 优秀  □ 良好  □ 一般  □ 需改进

备注：
________________________________
________________________________

🔗 相关文档

测试指南版本: v1.0.0
创建日期: 2024年1月
适用范围: 资金使用管理系统 Mermaid 流程图功能

祝测试顺利！🎉