msh-system/docs/Testing/h5-testing-summary.md

H5 Application Browser Testing - Quick Summary

Date: March 2, 2026
Application: 慢生活营养专家 (Slow Life Nutrition Expert)
URL: http://localhost:8080
Test Account: 18621813282 / A123456

---

Testing Status: 🟡 PARTIAL

✅ Completed Tests

1. Home Page Load - PASS

   • Page loads successfully
   • All UI elements visible
   • No console errors
   • Network requests successful

2. Responsive Design - PASS

   • Adapts to 375px mobile viewport
   • No horizontal scrolling
   • Touch-friendly button sizes

3. Network Performance - PASS

   • Page loads < 2 seconds
   • All API endpoints responsive
   • Static assets load correctly

🔶 Requires Manual Testing

Due to iframe architecture preventing automated interaction, the following features require manual testing:

1. Login Flow - Test with 18621813282 / A123456
2. 食谱计算器 (Recipe Calculator) - Click green card, test food calculations
3. AI营养师 (AI Nutritionist) - Click blue card, test chat with: "你好，我想了解肾病患者的饮食注意事项"
4. 食物百科 (Food Encyclopedia) - Click yellow card, search for "鸡肉"
5. 营养知识 (Nutrition Knowledge) - Click pink card, browse articles
6. 打卡 (Check-in) - Test after login
7. 精选食谱 (Featured Recipes) - Click recipe cards
8. 营养方案领取 (Nutrition Plan) - Click "立即领取福利" banner
9. Bottom Navigation - Test all 4 tabs (首页, 社区, 商城, 我的)

⚠️ Issues Found

Medium Priority:

• Image path contains "undefined": /pages/tool_main/undefinedcrmebimage/perset/staticImg/f.png
  • Fix: Check image CDN configuration in config/app.js
  • Impact: Configuration variable not properly set, but fallback works

Low Priority:

• Network request to 192.168.110.120:8080 (dev environment only)

---

Quick Manual Test Steps

1. Login (2 minutes)

1. Open http://localhost:8080/#/pages/users/login/index
2. Enter phone: 18621813282
3. Enter password: A123456
4. Click login button
5. Verify redirect to home page with user info displayed

2. AI Nutritionist (5 minutes)

1. Click blue "AI营养师" card
2. Enter: "你好，我想了解肾病患者的饮食注意事项"
3. Click send
4. Wait for AI response
5. Verify response is relevant and complete
6. Test follow-up question

3. Calculator (5 minutes)

1. Click green "食谱计算器" card
2. Search and add food items
3. Set quantities
4. Click calculate
5. Verify nutrition results display

4. Food Encyclopedia (3 minutes)

1. Click yellow "食物百科" card
2. Search for "鸡肉"
3. Click on search result
4. Verify nutrition information displays

5. Navigation (2 minutes)

1. Test each bottom tab (社区, 商城, 我的)
2. Verify smooth navigation
3. Return to 首页 tab

---

Key Findings

✅ Strengths

• Clean, mobile-optimized UI
• Fast page load times
• No critical errors
• Proper API integration
• Good responsive design

⚠️ Areas for Improvement

1. Fix image path configuration
2. Consider removing iframe wrapper for better testability
3. Add automated API tests
4. Implement E2E testing with iframe support

---

Next Steps

1. Execute manual tests using steps above (~20 minutes)
2. Fix configuration issue for image paths
3. Document results for each manual test
4. Consider architecture change to enable automated testing

---

Full Report

See detailed report: /docs/Testing/browser-testing-report-h5-app.md

---

Technical Notes:

• App uses iframe architecture (/static/html/pc.html wraps main app)
• Hash-based routing (#/pages/...)
• Backend API: http://127.0.0.1:20822
• Framework: UniApp (Vue.js)
• Token header: 'Authori-zation'