scottpan
4be53dcd1b
- 添加 Gemini 2.5 Flash 对话接口（流式+非流式） - 添加 NanoBanana 图像生成/编辑接口 - 添加 Sora2 视频生成接口（文生视频、图生视频、去水印） - 移除 models-integration 子项目（功能已迁移至主后端） - 新增测试文档和 Playwright E2E 配置 - 更新前端页面和 API 接口 - 更新后端配置和日志处理
133 lines
4.8 KiB
Markdown
133 lines
4.8 KiB
Markdown
# Playwright H5 自动化测试说明
|
||
|
||
本文说明如何使用 Playwright 对 **pages/tool_main/index** 及其子页面进行 H5 端到端自动化测试。
|
||
|
||
---
|
||
|
||
## 环境要求
|
||
|
||
- Node.js（项目根目录已安装 `@playwright/test`、`playwright`）
|
||
- 前端 H5 开发服务（默认 `http://localhost:8080`）
|
||
- 后端 API 服务（默认 `http://127.0.0.1:20822`）
|
||
|
||
---
|
||
|
||
## 演示账号
|
||
|
||
| 项目 | 值 |
|
||
|----------|-------------|
|
||
| 手机号 | 18621813282 |
|
||
| 登录密码 | A123456 |
|
||
|
||
---
|
||
|
||
## 运行步骤
|
||
|
||
### 1. 启动后端
|
||
|
||
确保后端服务已启动并监听 `http://127.0.0.1:20822`（具体启动方式以项目文档为准）。
|
||
|
||
### 2. 启动前端 H5
|
||
|
||
在 **msh_single_uniapp** 或项目根目录中启动 H5 开发服务，使前端在 **http://localhost:8080** 可访问。例如：
|
||
|
||
```bash
|
||
# 若在 msh_single_uniapp 下有 dev:h5 脚本
|
||
cd msh_single_uniapp && npm run dev:h5
|
||
|
||
# 或项目根目录提供的启动命令（如 npm run serve 等）
|
||
# 以实际 package.json 中脚本为准
|
||
```
|
||
|
||
保持该终端运行，勿关闭。
|
||
|
||
### 3. 运行 Playwright 测试
|
||
|
||
在 **项目根目录**（即包含 `playwright.config.ts` 的目录）执行：
|
||
|
||
```bash
|
||
# 一键执行全部 E2E 测试（需先启动前端 H5 + 后端）
|
||
npx playwright test
|
||
|
||
# 安装浏览器（首次或升级后执行一次）
|
||
npx playwright install chromium
|
||
|
||
# 仅运行 tool_main 相关用例
|
||
npx playwright test tests/e2e/tool-main.spec.ts
|
||
|
||
# 带 UI 模式（可单步调试）
|
||
npx playwright test tests/e2e/tool-main.spec.ts --ui
|
||
|
||
# 指定用例名运行
|
||
npx playwright test -g "TC-001"
|
||
npx playwright test -g "登录"
|
||
```
|
||
|
||
---
|
||
|
||
## 测试范围（tool_main 及子页面）
|
||
|
||
| 用例编号 | 说明 |
|
||
|----------|------|
|
||
| TC-001 | 页面加载：主界面核心元素可见（用户卡片、四大功能、精选食谱、健康知识、营养方案） |
|
||
| TC-002 | 用户卡片：已登录时不显示「请点击登录」 |
|
||
| TC-003 | 登录流程：手机号+密码登录成功（演示账号 UI 登录） |
|
||
| TC-004 | 食谱计算器：进入页面并填写参数 |
|
||
| TC-005 | AI 营养师：进入页面并发送消息 |
|
||
| TC-006 | 食物百科：进入并搜索「鸡肉」、切换分类、进入食物详情 |
|
||
| TC-007 | 营养知识：进入并切换 Tab（营养素 / 饮食指南 / 科普文章） |
|
||
| TC-008 | 打卡功能：进入打卡页并查看状态、积分规则 |
|
||
| TC-009 | 精选食谱：列表展示并进入详情、点击「更多」 |
|
||
| TC-010 | 营养方案：点击「立即领取福利」跳转 |
|
||
| TC-011 | 健康知识：列表展示并进入详情、点击「更多」进入营养知识 |
|
||
| TC-012 | 下拉刷新：刷新后核心元素仍可见 |
|
||
| TC-013 | 页面错误检查：主界面无严重 JS 错误 |
|
||
| TC-014 | 社区子页：tool_main/community 打卡社区 Tab（推荐/最新/关注/热门）与列表 |
|
||
|
||
子页面覆盖：**tool_main/index**、**tool_main/community**，以及从首页入口进入的 **pages/tool/** 下页面（打卡、食谱计算器、AI 营养师、食物百科、营养知识、食谱详情、会员福利等）。
|
||
|
||
---
|
||
|
||
## 配置说明
|
||
|
||
- **配置文件**：项目根目录 `playwright.config.ts`
|
||
- **用例目录**：`tests/e2e/`
|
||
- **主用例文件**：`tests/e2e/tool-main.spec.ts`
|
||
- **Base URL**：`http://localhost:8080`（H5 使用 hash 路由 `/#/pages/...`）
|
||
- **视口**：移动端 375×667，模拟手机浏览器
|
||
|
||
大部分用例通过后端 API 登录后向页面注入 token，再访问 tool_main；**TC-003** 单独验证从登录页输入演示账号完成整条登录流程。
|
||
|
||
---
|
||
|
||
## 报告与产物
|
||
|
||
- **HTML 报告**：`tests/e2e/reports/`，失败时可用 `npx playwright show-report tests/e2e/reports` 查看
|
||
- **截图**：失败或用例内截图保存在 `tests/e2e/screenshots/`
|
||
- **测试结果/录屏**：`tests/e2e/test-results/`（如开启 video/trace）
|
||
|
||
---
|
||
|
||
## 常见问题
|
||
|
||
1. **连接被拒绝 / 超时**
|
||
确认前端已启动且可在浏览器访问 `http://localhost:8080`，以及后端 `http://127.0.0.1:20822` 可访问。
|
||
|
||
2. **登录失败或 TC-003 失败**
|
||
确认演示账号 18621813282 / A123456 在后端可用，且接口 `POST /api/front/login` 返回 200 与有效 token。
|
||
|
||
3. **元素找不到 / 超时**
|
||
H5 为 UniApp 编译产物，部分类名或结构可能随版本变化；若页面有 iframe 包装，需保证访问的 URL 与视口能使主内容直接暴露（如移动端直连 `/#/pages/...`）。
|
||
|
||
4. **仅跑部分用例**
|
||
使用 `-g "关键字"` 或指定文件：
|
||
`npx playwright test tests/e2e/tool-main.spec.ts -g "TC-014"`
|
||
|
||
5. **TC-003 登录流程失败**
|
||
该用例模拟真实 UI 登录（不注入 token），若登录页有图形验证、协议勾选或跳转逻辑与预期不符可能失败。可暂时排除：
|
||
`npx playwright test --grep-invert "TC-003"`
|
||
|
||
---
|
||
|
||
**最后更新**：2026-03-02
|