scottpan
4be53dcd1b
- 添加 Gemini 2.5 Flash 对话接口（流式+非流式） - 添加 NanoBanana 图像生成/编辑接口 - 添加 Sora2 视频生成接口（文生视频、图生视频、去水印） - 移除 models-integration 子项目（功能已迁移至主后端） - 新增测试文档和 Playwright E2E 配置 - 更新前端页面和 API 接口 - 更新后端配置和日志处理
329 lines
8.7 KiB
Markdown
329 lines
8.7 KiB
Markdown
# Browser Testing Documentation - H5 慢生活营养专家
|
||
|
||
This directory contains comprehensive testing documentation for the H5 mobile web application.
|
||
|
||
## 📁 Documentation Files
|
||
|
||
### ⚡ [QUICKSTART.md](./QUICKSTART.md) ⭐⭐⭐ **START HERE**
|
||
**2-Minute Quick Start Guide**
|
||
|
||
Get testing in 5 minutes:
|
||
- Choose your role (PM/QA/Dev/Engineer)
|
||
- Verify prerequisites
|
||
- Start testing immediately
|
||
- Quick commands and troubleshooting
|
||
- Pro tips
|
||
|
||
**Use this for:** Getting started fast, new team members, quick reference
|
||
|
||
---
|
||
|
||
### 0. [execution-summary.md](./execution-summary.md) ⭐ **Project Status**
|
||
**Executive Summary & Project Status**
|
||
|
||
Complete overview including:
|
||
- What was accomplished in Phase 1
|
||
- Key findings and challenges
|
||
- Test results summary
|
||
- Next steps for all stakeholders
|
||
- Resource overview
|
||
- Success criteria
|
||
|
||
**Use this for:** Project status, stakeholder updates, getting oriented
|
||
|
||
---
|
||
|
||
### 1. [browser-testing-report-h5-app.md](./browser-testing-report-h5-app.md)
|
||
**Comprehensive Technical Report** (18 sections, ~8,000 words)
|
||
|
||
Detailed technical analysis including:
|
||
- Complete test environment setup
|
||
- Automated testing results
|
||
- Manual testing procedures for each feature
|
||
- Performance analysis
|
||
- Security observations
|
||
- Known issues and recommendations
|
||
- Technical architecture details
|
||
- API endpoints documentation
|
||
|
||
**Use this for:** Technical review, development reference, detailed debugging
|
||
|
||
---
|
||
|
||
### 2. [h5-testing-summary.md](./h5-testing-summary.md)
|
||
**Quick Summary Report** (~2 pages)
|
||
|
||
Executive summary including:
|
||
- Testing status at a glance
|
||
- Quick test results
|
||
- Critical issues
|
||
- 5-minute quick test steps for each feature
|
||
- Key findings
|
||
- Next steps
|
||
|
||
**Use this for:** Quick reference, management reporting, status updates
|
||
|
||
---
|
||
|
||
### 3. [manual-testing-checklist.md](./manual-testing-checklist.md)
|
||
**Printable Testing Checklist** (14 test sections, ~50 checkboxes per feature)
|
||
|
||
Interactive checklist including:
|
||
- Pre-test setup verification
|
||
- Step-by-step test procedures
|
||
- Checkboxes for each test step
|
||
- Space for notes and issues
|
||
- Final assessment form
|
||
- Pass/Fail tracking
|
||
|
||
**Use this for:** Hands-on manual testing, QA execution, test documentation
|
||
|
||
---
|
||
|
||
### 4. [PLAYWRIGHT-E2E.md](./PLAYWRIGHT-E2E.md) ⭐ **E2E 自动化**
|
||
**Playwright H5 自动化测试运行说明**
|
||
|
||
- 启动前端 H5 与后端后，使用 `npx playwright test` 运行测试
|
||
- 测试演示账号：手机号 18621813282，密码 A123456
|
||
- 覆盖 pages/tool_main/index 及子页面（含社区、打卡、食谱计算器、AI 营养师、食物百科、营养知识等）
|
||
|
||
**适用：** 本地/CI 跑 E2E、回归测试、自动化演示
|
||
|
||
---
|
||
|
||
### 5. [iframe-testing-workaround.md](./iframe-testing-workaround.md)
|
||
**Technical Guide for Iframe Testing Challenges**
|
||
|
||
Workarounds and solutions including:
|
||
- Problem explanation with architecture diagram
|
||
- Why automated testing fails
|
||
- 4 different solution approaches
|
||
- Code examples for each solution
|
||
- Implementation priority guide
|
||
- Short-term and long-term recommendations
|
||
|
||
**Use this for:** Developers, test automation engineers, architectural decisions
|
||
|
||
---
|
||
|
||
## 🎯 Testing Overview
|
||
|
||
### Application Details
|
||
- **Name:** 慢生活营养专家 (Slow Life Nutrition Expert)
|
||
- **Type:** UniApp H5 Mobile Web Application
|
||
- **URL:** http://localhost:8080
|
||
- **Backend:** http://127.0.0.1:20822
|
||
- **Framework:** UniApp (Vue.js based)
|
||
- **Viewport:** 375px × 667px (Mobile)
|
||
|
||
### Test Account
|
||
- **Phone:** 18621813282
|
||
- **Password:** A123456
|
||
|
||
---
|
||
|
||
## 📊 Current Testing Status
|
||
|
||
### ✅ Automated Tests Completed (20%)
|
||
- [x] Home page load verification
|
||
- [x] UI element presence check
|
||
- [x] Responsive design validation
|
||
- [x] Network request monitoring
|
||
- [x] Console error checking
|
||
- [x] Performance benchmarking
|
||
|
||
### 🔶 Manual Tests Required (80%)
|
||
- [ ] Login flow
|
||
- [ ] 食谱计算器 (Recipe Calculator)
|
||
- [ ] AI营养师 (AI Nutritionist)
|
||
- [ ] 食物百科 (Food Encyclopedia)
|
||
- [ ] 营养知识 (Nutrition Knowledge)
|
||
- [ ] 打卡 (Check-in)
|
||
- [ ] 精选食谱 (Featured Recipes)
|
||
- [ ] 营养方案领取 (Nutrition Plan)
|
||
- [ ] Bottom navigation
|
||
- [ ] Cross-feature navigation
|
||
|
||
---
|
||
|
||
## 🚦 Quick Start Guide
|
||
|
||
### For QA Testers
|
||
1. **Read:** [h5-testing-summary.md](./h5-testing-summary.md) (5 minutes)
|
||
2. **Print:** [manual-testing-checklist.md](./manual-testing-checklist.md)
|
||
3. **Setup:**
|
||
- Ensure backend server running at http://127.0.0.1:20822
|
||
- Open browser to http://localhost:8080
|
||
- Resize browser to 375px width
|
||
4. **Test:** Follow checklist step by step
|
||
5. **Document:** Fill in checkboxes and notes as you test
|
||
|
||
### For Developers
|
||
1. **Review:** [browser-testing-report-h5-app.md](./browser-testing-report-h5-app.md)
|
||
2. **Fix:** Known issue with image path configuration (Section 15)
|
||
3. **Consider:** Architecture change to enable automated testing (Section 16)
|
||
4. **Implement:** API automated tests (Section 16)
|
||
|
||
### For Project Managers
|
||
1. **Read:** [h5-testing-summary.md](./h5-testing-summary.md)
|
||
2. **Review:** Issues Found section
|
||
3. **Assign:** Manual testing to QA team
|
||
4. **Track:** Using manual testing checklist
|
||
5. **Plan:** Next steps from summary
|
||
|
||
---
|
||
|
||
## 🔍 Known Issues
|
||
|
||
### Priority: Medium
|
||
**Image Path Configuration**
|
||
- **File:** Main page user card
|
||
- **Issue:** Path contains "undefined": `/pages/tool_main/undefinedcrmebimage/perset/staticImg/f.png`
|
||
- **Impact:** Minor - fallback image works
|
||
- **Fix:** Check `config/app.js` image CDN URL configuration
|
||
|
||
### Priority: Low
|
||
**Dev Environment Network Request**
|
||
- **Issue:** Request to 192.168.110.120:8080 in network logs
|
||
- **Impact:** None - dev environment only
|
||
- **Fix:** Not required
|
||
|
||
---
|
||
|
||
## 🛠️ Technical Challenges
|
||
|
||
### Iframe Architecture Limitation
|
||
The application uses an iframe-based architecture where:
|
||
- PC wrapper: `/static/html/pc.html`
|
||
- Mobile content: Loaded inside iframe at `/`
|
||
|
||
**Impact:** Automated browser testing tools cannot interact with iframe content.
|
||
|
||
**Solutions:**
|
||
1. **Short-term:** Manual testing (current approach)
|
||
2. **Medium-term:** Use E2E framework with iframe support (Cypress, Playwright)
|
||
3. **Long-term:** Remove iframe wrapper for direct H5 access
|
||
|
||
---
|
||
|
||
## 📈 Testing Metrics
|
||
|
||
### Time Estimates
|
||
- **Automated Testing:** 10 minutes (completed)
|
||
- **Manual Testing (Full):** 2-3 hours
|
||
- **Manual Testing (Quick):** 20 minutes
|
||
- **Issue Documentation:** 30 minutes
|
||
|
||
### Coverage
|
||
- **UI Components:** 100% visually verified
|
||
- **API Endpoints:** 100% reachable
|
||
- **Interactive Features:** 0% automated, 100% requires manual testing
|
||
- **Navigation:** Partially tested
|
||
- **Performance:** Benchmarked
|
||
|
||
---
|
||
|
||
## 🎓 Testing Methodology
|
||
|
||
### Phase 1: Automated Browser Testing (Completed)
|
||
- Page load verification
|
||
- Visual inspection via screenshots
|
||
- Network monitoring
|
||
- Console error checking
|
||
- Performance measurement
|
||
|
||
### Phase 2: Manual Feature Testing (In Progress)
|
||
- Step-by-step feature walkthrough
|
||
- User flow validation
|
||
- Error handling verification
|
||
- Edge case testing
|
||
|
||
### Phase 3: Integration Testing (Pending)
|
||
- Cross-feature workflows
|
||
- Authentication flow
|
||
- Data persistence
|
||
- API error scenarios
|
||
|
||
### Phase 4: Performance Testing (Pending)
|
||
- Load time optimization
|
||
- API response times
|
||
- Memory usage
|
||
- Concurrent user handling
|
||
|
||
---
|
||
|
||
## 📚 Related Documentation
|
||
|
||
### Application Documentation
|
||
- Main README: `/msh_single_uniapp/README.md`
|
||
- Configuration: `/msh_single_uniapp/config/app.js`
|
||
- Page Routes: `/msh_single_uniapp/pages.json`
|
||
|
||
### Other Test Reports
|
||
- AI Nutritionist Test Report: `/docs/Testing/ai-nutritionist-test-report.md`
|
||
|
||
---
|
||
|
||
## 🔄 Testing Workflow
|
||
|
||
```
|
||
1. Automated Testing (Browser Tools)
|
||
↓
|
||
2. Document Findings
|
||
↓
|
||
3. Manual Testing (QA Team)
|
||
↓
|
||
4. Update Test Reports
|
||
↓
|
||
5. Developer Fixes Issues
|
||
↓
|
||
6. Regression Testing
|
||
↓
|
||
7. Production Release
|
||
```
|
||
|
||
---
|
||
|
||
## 📞 Support & Questions
|
||
|
||
For questions about:
|
||
- **Testing procedures:** Review manual-testing-checklist.md
|
||
- **Technical issues:** Review browser-testing-report-h5-app.md
|
||
- **Quick status:** Review h5-testing-summary.md
|
||
|
||
---
|
||
|
||
## 📅 Version History
|
||
|
||
### Version 1.0 - March 2, 2026
|
||
- Initial comprehensive testing documentation
|
||
- Automated browser testing completed
|
||
- Manual testing procedures documented
|
||
- Known issues identified
|
||
- Ready for QA team manual testing
|
||
|
||
---
|
||
|
||
## ✅ Next Actions
|
||
|
||
### Immediate (This Week)
|
||
1. [ ] Execute manual testing using checklist
|
||
2. [ ] Fix image path configuration issue
|
||
3. [ ] Document manual test results
|
||
|
||
### Short-term (This Month)
|
||
1. [ ] Implement automated API tests
|
||
2. [ ] Set up E2E testing framework
|
||
3. [ ] Performance optimization based on findings
|
||
|
||
### Long-term (This Quarter)
|
||
1. [ ] Consider iframe architecture refactoring
|
||
2. [ ] Implement continuous testing pipeline
|
||
3. [ ] Add visual regression testing
|
||
|
||
---
|
||
|
||
**Last Updated:** March 2, 2026
|
||
**Status:** Ready for Manual Testing Phase
|
||
**Test Coverage:** 20% Automated, 80% Pending Manual
|