106 lines
3.7 KiB
Markdown
106 lines
3.7 KiB
Markdown
|
---
|
|||
|
|
title: 前端整体交互测试报告
|
|||
|
|
author: AI Assistant
|
|||
|
|
date: 2026-02-21
|
|||
|
|
status: draft
|
|||
|
|
category: 测试
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 前端整体交互测试报告
|
|||
|
|
|
|||
|
|
## 一、测试目标
|
|||
|
|
|
|||
|
|
第一步：对 `http://localhost:5173/` 前端页面进行逐页面、按钮与输入控件的基础交互测试。
|
|||
|
|
第二步：检查是否存在明显样式崩坏、按钮不可点击或无响应的情况。
|
|||
|
|
第三步：记录控制台错误与异常行为，形成后续修复依据。
|
|||
|
|
|
|||
|
|
## 二、测试范围
|
|||
|
|
|
|||
|
|
- 页面范围：底部导航 5 个页面（日历、统计、账单、预算、设置）
|
|||
|
|
- 控件范围：可见按钮、链接、开关、输入/文本域/下拉框（不含上传功能）
|
|||
|
|
- 非目标：不做业务流程深度验证、不做上传功能测试、不做截图对比
|
|||
|
|
|
|||
|
|
## 三、测试环境与前置条件
|
|||
|
|
|
|||
|
|
- 地址：`http://localhost:5173/`
|
|||
|
|
- 工具：Playwright（自动化点击与输入）
|
|||
|
|
- 说明：已跳过文件上传输入控件（`input[type=file]`）
|
|||
|
|
|
|||
|
|
## 四、测试方法
|
|||
|
|
|
|||
|
|
第一步：通过底部导航依次进入 5 个页面。
|
|||
|
|
第二步：对每个页面所有 `button`、`a`、`.van-switch` 进行点击。
|
|||
|
|
第三步：对可编辑输入控件执行填入与清空。
|
|||
|
|
第四步：记录页面路由变化与控制台异常。
|
|||
|
|
|
|||
|
|
## 五、测试结果概览
|
|||
|
|
|
|||
|
|
- 样式检查：未发现明显崩坏（基于 DOM 与可见结构的自动化判断）
|
|||
|
|
- 点击响应：大多数按钮可触发交互或弹窗
|
|||
|
|
- 控制台异常：存在路由错误与 Vue 警告（详见第七节）
|
|||
|
|
|
|||
|
|
## 六、逐页面结果
|
|||
|
|
|
|||
|
|
### 1) 日历页 `/calendar-v2`
|
|||
|
|
|
|||
|
|
| 项目 | 结果 | 备注 |
|
|||
|
|
| --- | --- | --- |
|
|||
|
|
| 按钮点击 | 通过 | 存在未命名按钮，点击后跳转至 `/balance?tab=message` |
|
|||
|
|
| 链接点击 | 无 | 未检测到 `a` 标签 |
|
|||
|
|
| 输入控件 | 无 | 未检测到输入控件 |
|
|||
|
|
| 样式 | 正常 | 未见崩坏 |
|
|||
|
|
|
|||
|
|
### 2) 统计页 `/statistics-v2`
|
|||
|
|
|
|||
|
|
| 项目 | 结果 | 备注 |
|
|||
|
|
| --- | --- | --- |
|
|||
|
|
| 按钮点击 | 通过 | 包含“取消/确认”按钮 |
|
|||
|
|
| 链接点击 | 无 | 未检测到 `a` 标签 |
|
|||
|
|
| 输入控件 | 无 | 未检测到输入控件 |
|
|||
|
|
| 样式 | 正常 | 未见崩坏 |
|
|||
|
|
|
|||
|
|
### 3) 账单页 `/balance`
|
|||
|
|
|
|||
|
|
| 项目 | 结果 | 备注 |
|
|||
|
|
| --- | --- | --- |
|
|||
|
|
| 按钮点击 | 通过 | 存在大量“删除”按钮，点击可触发确认弹窗 |
|
|||
|
|
| 链接点击 | 无 | 未检测到 `a` 标签 |
|
|||
|
|
| 输入控件 | 无 | 未检测到输入控件 |
|
|||
|
|
| 样式 | 正常 | 未见崩坏 |
|
|||
|
|
|
|||
|
|
### 4) 预算页 `/budget-v2`
|
|||
|
|
|
|||
|
|
| 项目 | 结果 | 备注 |
|
|||
|
|
| --- | --- | --- |
|
|||
|
|
| 按钮点击 | 通过 | 包含“取消/确认”按钮 |
|
|||
|
|
| 链接点击 | 无 | 未检测到 `a` 标签 |
|
|||
|
|
| 输入控件 | 无 | 未检测到输入控件 |
|
|||
|
|
| 样式 | 正常 | 未见崩坏 |
|
|||
|
|
|
|||
|
|
### 5) 设置页 `/setting`
|
|||
|
|
|
|||
|
|
| 项目 | 结果 | 备注 |
|
|||
|
|
| --- | --- | --- |
|
|||
|
|
| 按钮点击 | 通过 | 包含“取消/确认”按钮 |
|
|||
|
|
| 开关点击 | 通过 | `.van-switch` 可点击切换 |
|
|||
|
|
| 输入控件 | 跳过 | `input[type=file]` 按要求跳过 |
|
|||
|
|
| 样式 | 正常 | 未见崩坏 |
|
|||
|
|
|
|||
|
|
## 七、控制台异常记录
|
|||
|
|
|
|||
|
|
- Vue 警告：Invalid prop type check failed
|
|||
|
|
- Vue 警告：Unhandled error during execution（出现多次）
|
|||
|
|
- 路由错误：No match for {"name":"statistics","params":...}
|
|||
|
|
|
|||
|
|
## 八、结论与建议
|
|||
|
|
|
|||
|
|
- 结论：基础可见交互大多可点击，页面样式未见明显崩坏，但存在控制台错误与警告，需优先排查。
|
|||
|
|
- 建议：
|
|||
|
|
1. 修复路由名称与参数不匹配问题（统计页相关）。
|
|||
|
|
2. 排查触发弹窗/确认按钮时的异常栈（Vue Unhandled error）。
|
|||
|
|
3. 如需“功能正常且符合逻辑”的强结论，建议补充关键业务流程的人工验证。
|
|||
|
|
|
|||
|
|
## 更新日志
|
|||
|
|
|
|||
|
|
- 2026-02-21：首次生成前端整体交互测试报告（自动化点击/输入）。
|