373 lines
8.9 KiB
Markdown
373 lines
8.9 KiB
Markdown
# 前端界面测试指南 - 邮件和消息队列节点
|
||
|
||
## 🎯 测试目标
|
||
|
||
在前端界面中测试新实现的邮件节点和消息队列节点，验证：
|
||
1. 节点在工具箱中正确显示
|
||
2. 节点可以拖拽到画布
|
||
3. 节点配置面板正确显示
|
||
4. 节点配置可以保存
|
||
5. 工作流可以执行
|
||
|
||
## 📋 前置条件
|
||
|
||
1. **前端服务运行**: http://101.43.95.130:8038
|
||
2. **后端服务运行**: http://101.43.95.130:8037
|
||
3. **用户已登录**
|
||
|
||
## 🚀 测试步骤
|
||
|
||
### 步骤1: 登录系统
|
||
|
||
1. 打开浏览器，访问: **http://101.43.95.130:8038**
|
||
2. 如果未登录，使用测试账号登录：
|
||
- 用户名: `test_user`
|
||
- 密码: `test_password123`
|
||
- 或使用您自己的账号
|
||
|
||
### 步骤2: 进入工作流设计器
|
||
|
||
1. 在首页点击"工作流管理"
|
||
2. 点击"创建新工作流"按钮
|
||
3. 或点击现有工作流的"设计"按钮
|
||
|
||
### 步骤3: 测试邮件节点
|
||
|
||
#### 3.1 添加邮件节点
|
||
|
||
1. **查看左侧节点工具箱**
|
||
- 应该能看到"邮件"节点（带有Message图标）
|
||
- 位置：在"Webhook"节点之后，"输出"节点之前
|
||
|
||
2. **拖拽邮件节点到画布**
|
||
- 从左侧工具箱拖拽"邮件"节点
|
||
- 放到画布中央位置
|
||
- 节点应该成功添加到画布
|
||
|
||
3. **连接节点**
|
||
- 如果画布中有"开始"节点，连接开始节点到邮件节点
|
||
- 如果没有开始节点，先添加一个开始节点
|
||
- 添加"结束"节点，连接邮件节点到结束节点
|
||
|
||
#### 3.2 配置邮件节点
|
||
|
||
1. **点击邮件节点**，右侧应该显示配置面板
|
||
|
||
2. **检查配置项**，应该看到以下字段：
|
||
- ✅ SMTP服务器
|
||
- ✅ SMTP端口
|
||
- ✅ SMTP用户名
|
||
- ✅ SMTP密码（密码输入框）
|
||
- ✅ 使用TLS（开关）
|
||
- ✅ 发件人邮箱
|
||
- ✅ 收件人邮箱
|
||
- ✅ 抄送邮箱（可选）
|
||
- ✅ 密送邮箱（可选）
|
||
- ✅ 邮件主题
|
||
- ✅ 邮件正文类型（下拉选择：纯文本/HTML）
|
||
- ✅ 邮件正文（多行文本）
|
||
- ✅ 附件（可选，JSON格式）
|
||
|
||
3. **填写测试配置**：
|
||
```
|
||
SMTP服务器: smtp.gmail.com
|
||
SMTP端口: 587
|
||
SMTP用户名: your-email@gmail.com
|
||
SMTP密码: [您的应用专用密码]
|
||
使用TLS: ✅ 开启
|
||
发件人邮箱: your-email@gmail.com
|
||
收件人邮箱: recipient@example.com
|
||
邮件主题: 测试邮件 - {test_key}
|
||
邮件正文类型: 纯文本
|
||
邮件正文:
|
||
这是一封测试邮件。
|
||
|
||
测试数据: {test_data}
|
||
时间: {timestamp}
|
||
```
|
||
|
||
4. **测试变量替换提示**
|
||
- 在主题和正文中使用 `{test_key}`, `{test_data}`, `{timestamp}`
|
||
- 应该看到提示信息说明支持变量替换
|
||
|
||
5. **保存节点配置**
|
||
- 点击"保存配置"按钮
|
||
- 应该看到"节点配置已保存"的提示
|
||
|
||
#### 3.3 保存工作流
|
||
|
||
1. 点击工具栏的"保存"按钮
|
||
2. 应该看到"工作流已保存"的提示
|
||
3. 工作流名称会自动生成或可以手动编辑
|
||
|
||
#### 3.4 运行工作流
|
||
|
||
1. **点击"运行"按钮**
|
||
2. **在运行对话框中输入测试数据**：
|
||
```json
|
||
{
|
||
"test_key": "Hello World",
|
||
"test_data": "这是测试数据",
|
||
"timestamp": "2024-01-01 12:00:00"
|
||
}
|
||
```
|
||
3. **点击"开始运行"**
|
||
4. **查看执行结果**：
|
||
- 执行状态应该显示为"运行中"或"已完成"
|
||
- 如果配置了真实的SMTP服务器，邮件应该成功发送
|
||
- 如果未配置，会显示连接错误（这是正常的）
|
||
|
||
### 步骤4: 测试消息队列节点（RabbitMQ）
|
||
|
||
#### 4.1 添加消息队列节点
|
||
|
||
1. **查看左侧节点工具箱**
|
||
- 应该能看到"消息队列"节点（带有Connection图标）
|
||
- 位置：在"邮件"节点之后
|
||
|
||
2. **拖拽消息队列节点到画布**
|
||
- 从左侧工具箱拖拽"消息队列"节点
|
||
- 放到画布上
|
||
|
||
3. **连接节点**
|
||
- 连接开始节点到消息队列节点
|
||
- 连接消息队列节点到结束节点
|
||
|
||
#### 4.2 配置消息队列节点
|
||
|
||
1. **点击消息队列节点**，右侧应该显示配置面板
|
||
|
||
2. **选择队列类型**
|
||
- 下拉选择"RabbitMQ"或"Kafka"
|
||
- 选择后，配置面板会显示对应的配置项
|
||
|
||
3. **RabbitMQ配置项**（选择RabbitMQ时）：
|
||
- ✅ 主机地址
|
||
- ✅ 端口
|
||
- ✅ 用户名
|
||
- ✅ 密码（密码输入框）
|
||
- ✅ Exchange（可选）
|
||
- ✅ Routing Key
|
||
- ✅ 队列名称
|
||
- ✅ 消息内容（JSON格式）
|
||
|
||
4. **填写RabbitMQ测试配置**：
|
||
```
|
||
队列类型: RabbitMQ
|
||
主机地址: localhost
|
||
端口: 5672
|
||
用户名: guest
|
||
密码: guest
|
||
队列名称: test_queue
|
||
Routing Key: test.routing.key
|
||
消息内容:
|
||
{
|
||
"test_key": "{test_key}",
|
||
"test_data": "{test_data}",
|
||
"timestamp": "{timestamp}"
|
||
}
|
||
```
|
||
|
||
5. **保存节点配置**
|
||
|
||
#### 4.3 测试Kafka配置
|
||
|
||
1. **切换队列类型为Kafka**
|
||
- 配置面板会显示Kafka相关配置
|
||
|
||
2. **Kafka配置项**：
|
||
- ✅ Bootstrap Servers
|
||
- ✅ Topic
|
||
- ✅ 消息内容（JSON格式）
|
||
|
||
3. **填写Kafka测试配置**：
|
||
```
|
||
队列类型: Kafka
|
||
Bootstrap Servers: localhost:9092
|
||
Topic: test_topic
|
||
消息内容:
|
||
{
|
||
"test_key": "{test_key}",
|
||
"test_data": "{test_data}",
|
||
"timestamp": "{timestamp}"
|
||
}
|
||
```
|
||
|
||
4. **保存节点配置**
|
||
|
||
#### 4.4 保存并运行工作流
|
||
|
||
1. 保存工作流
|
||
2. 运行工作流，输入测试数据：
|
||
```json
|
||
{
|
||
"test_key": "Hello Queue",
|
||
"test_data": "这是测试数据",
|
||
"timestamp": "2024-01-01 12:00:00"
|
||
}
|
||
```
|
||
3. 查看执行结果
|
||
|
||
## ✅ 测试检查清单
|
||
|
||
### 邮件节点测试
|
||
- [ ] 节点在工具箱中显示（"邮件"节点）
|
||
- [ ] 节点可以拖拽到画布
|
||
- [ ] 节点配置面板正确显示所有配置项
|
||
- [ ] 可以填写和修改配置
|
||
- [ ] 配置可以保存
|
||
- [ ] 工作流可以保存
|
||
- [ ] 工作流可以运行
|
||
- [ ] 变量替换提示正确显示
|
||
- [ ] HTML格式选项可以切换
|
||
|
||
### 消息队列节点测试
|
||
- [ ] 节点在工具箱中显示（"消息队列"节点）
|
||
- [ ] 节点可以拖拽到画布
|
||
- [ ] 队列类型可以切换（RabbitMQ/Kafka）
|
||
- [ ] RabbitMQ配置项正确显示
|
||
- [ ] Kafka配置项正确显示
|
||
- [ ] 配置可以保存
|
||
- [ ] 工作流可以保存
|
||
- [ ] 工作流可以运行
|
||
- [ ] 变量替换提示正确显示
|
||
|
||
### 通用测试
|
||
- [ ] 节点可以连接（连线功能）
|
||
- [ ] 节点可以删除
|
||
- [ ] 节点可以复制粘贴
|
||
- [ ] 画布缩放功能正常
|
||
- [ ] 保存状态提示正常
|
||
|
||
## 🐛 常见问题排查
|
||
|
||
### 问题1: 节点在工具箱中不显示
|
||
|
||
**可能原因**:
|
||
- 前端代码未更新
|
||
- 浏览器缓存问题
|
||
|
||
**解决方法**:
|
||
1. 刷新浏览器（Ctrl+F5 强制刷新）
|
||
2. 检查浏览器控制台是否有错误
|
||
3. 确认前端服务已重启
|
||
|
||
### 问题2: 配置面板不显示
|
||
|
||
**可能原因**:
|
||
- 节点未正确选中
|
||
- 配置面板被隐藏
|
||
|
||
**解决方法**:
|
||
1. 点击节点确保选中（节点应该高亮）
|
||
2. 检查右侧配置面板是否可见
|
||
3. 尝试刷新页面
|
||
|
||
### 问题3: 配置无法保存
|
||
|
||
**可能原因**:
|
||
- 后端API错误
|
||
- 网络连接问题
|
||
|
||
**解决方法**:
|
||
1. 检查浏览器控制台的网络请求
|
||
2. 查看是否有错误信息
|
||
3. 检查后端服务是否正常运行
|
||
|
||
### 问题4: 工作流执行失败
|
||
|
||
**可能原因**:
|
||
- 未配置真实的SMTP/RabbitMQ/Kafka服务器
|
||
- 配置信息错误
|
||
- 网络连接问题
|
||
|
||
**解决方法**:
|
||
1. 检查执行详情页面的错误信息
|
||
2. 确认外部服务配置正确
|
||
3. 查看执行日志了解详细错误
|
||
|
||
## 📸 预期界面效果
|
||
|
||
### 节点工具箱
|
||
左侧应该显示以下节点（按顺序）：
|
||
- 开始
|
||
- 输入
|
||
- LLM
|
||
- 条件
|
||
- 转换
|
||
- 循环
|
||
- Agent
|
||
- HTTP请求
|
||
- 数据库
|
||
- 文件操作
|
||
- 定时任务
|
||
- Webhook
|
||
- **邮件** ← 新节点
|
||
- **消息队列** ← 新节点
|
||
- 输出
|
||
- 结束
|
||
|
||
### 邮件节点配置面板
|
||
右侧配置面板应该显示：
|
||
- 标题："节点配置"
|
||
- 节点ID（只读）
|
||
- 节点类型（只读）
|
||
- 节点名称
|
||
- SMTP配置区域
|
||
- 邮件内容配置区域
|
||
- 附件配置区域
|
||
- 保存/复制/删除按钮
|
||
|
||
### 消息队列节点配置面板
|
||
右侧配置面板应该显示：
|
||
- 队列类型选择（下拉）
|
||
- RabbitMQ配置区域（选择RabbitMQ时）
|
||
- Kafka配置区域（选择Kafka时）
|
||
- 消息内容配置区域
|
||
- 保存/复制/删除按钮
|
||
|
||
## 🎯 测试数据示例
|
||
|
||
### 邮件节点测试数据
|
||
```json
|
||
{
|
||
"test_key": "Hello World",
|
||
"test_data": "这是测试数据",
|
||
"timestamp": "2024-01-01 12:00:00",
|
||
"user_name": "测试用户",
|
||
"order_id": "12345"
|
||
}
|
||
```
|
||
|
||
### 消息队列节点测试数据
|
||
```json
|
||
{
|
||
"test_key": "Hello Queue",
|
||
"test_data": "这是测试数据",
|
||
"timestamp": "2024-01-01 12:00:00",
|
||
"event_type": "user_action",
|
||
"user_id": "12345"
|
||
}
|
||
```
|
||
|
||
## 📝 测试记录
|
||
|
||
测试时请记录：
|
||
1. 测试时间
|
||
2. 测试环境（浏览器、操作系统）
|
||
3. 测试结果（通过/失败）
|
||
4. 遇到的问题
|
||
5. 截图（如果有）
|
||
|
||
## 🎉 测试完成
|
||
|
||
测试通过后，您可以：
|
||
1. 在实际工作流中使用这些节点
|
||
2. 配置真实的SMTP/RabbitMQ/Kafka服务器进行实际测试
|
||
3. 继续开发其他功能
|
||
|
||
---
|
||
|
||
**测试指南版本**: v1.0
|
||
**最后更新**: 2024年1月17日
|