# Quick Start Guide - Browser Testing

**⏱️ Read this in:** 2 minutes  
**Then start testing in:** 5 minutes

---

## 🎯 What You Need to Know

### The Situation
- ✅ App loads and runs correctly
- ✅ Visual elements verified  
- ⚠️ Manual testing needed due to iframe architecture
- 📋 Comprehensive documentation ready

### The Challenge
The app uses an iframe wrapper that prevents automated clicking/typing. Solution: **Manual testing** with our detailed checklist.

---

## 🚀 Get Started in 3 Steps

### Step 1: Choose Your Role (30 seconds)

**👨‍💼 Project Manager?**  
→ Read: [`execution-summary.md`](./execution-summary.md)  
→ Do: Assign QA team to manual testing

**🧪 QA Tester?**  
→ Read: [`h5-testing-summary.md`](./h5-testing-summary.md)  
→ Do: Print and use [`manual-testing-checklist.md`](./manual-testing-checklist.md)

**👨‍💻 Developer?**  
→ Read: [`browser-testing-report-h5-app.md`](./browser-testing-report-h5-app.md) Section 15  
→ Do: Fix image path config issue

**🔧 Test Engineer?**  
→ Read: [`iframe-testing-workaround.md`](./iframe-testing-workaround.md)  
→ Do: Implement Solution 2 (direct access)

---

### Step 2: Verify Prerequisites (2 minutes)

```bash
# 1. Check backend is running
curl http://127.0.0.1:20822/api/front/login/config
# Should return JSON response

# 2. Check frontend is running  
curl http://localhost:8080
# Should return HTML

# 3. Test account credentials
Phone: 18621813282
Password: A123456
```

---

### Step 3: Start Testing (5 minutes to first test)

#### Quick Test (5 minutes)
```
1. Open browser → http://localhost:8080
2. Resize window to 375px wide
3. Click "立即登录"
4. Enter: 18621813282 / A123456
5. Click login
✓ Success = User info displays
```

#### Full Test (2-3 hours)
Use the manual testing checklist with 14 sections covering all features.

---

## 📊 What Was Already Done

### ✅ Completed (Phase 1)
- Browser automated testing
- Visual verification
- Network monitoring  
- Performance benchmarking
- Issue identification
- Documentation creation

### 🔶 Your Task (Phase 2)  
- Manual feature testing
- Document findings
- Report issues

---

## 📝 Test Account

**Phone:** 18621813282  
**Password:** A123456

**Use this to test:**
- Login flow
- AI Nutritionist chat
- Recipe calculator  
- Food encyclopedia
- Check-in feature
- All logged-in features

---

## 🎯 Main Features to Test

1. **Login** (Critical) - 2 min
2. **AI营养师** (High) - 5 min  
3. **食谱计算器** (High) - 5 min
4. **食物百科** (Medium) - 3 min
5. **营养知识** (Medium) - 3 min
6. **Bottom Nav** (Critical) - 2 min

**Total Quick Test:** ~20 minutes  
**Total Comprehensive:** 2-3 hours

---

## 🐛 Known Issues

### To Fix:
**Image Path Config**
- Location: Main page user card
- Issue: Contains "undefined" in path
- Impact: Minor (fallback works)
- Fix: Update `config/app.js`

### No Action Needed:
- Dev network request to 192.168.110.120 (expected)

---

## 📁 Documentation Map

```
Testing/
├── 🎯 execution-summary.md    ← Project status
├── 📘 browser-testing-report... ← Full technical details  
├── 📄 h5-testing-summary.md   ← Quick 2-page overview
├── ✅ manual-testing-checklist... ← Step-by-step checklist
├── 🔧 iframe-testing-workaround... ← Solutions for devs
└── 📖 README.md               ← Documentation overview
```

**Rule of thumb:**
- Need quick info? → `h5-testing-summary.md`
- Testing now? → `manual-testing-checklist.md`  
- Want details? → `browser-testing-report-h5-app.md`
- Fixing issues? → `iframe-testing-workaround.md`
- Project overview? → `execution-summary.md`

---

## ⚡ Quick Commands

```bash
# Open app
open http://localhost:8080

# Check backend status
curl http://127.0.0.1:20822/api/front/login/config

# View logs (if needed)
tail -f msh_crmeb_22/front_log/20822/log_debug.log

# Start backend (if not running)
cd msh_crmeb_22
# [your start command]

# Start frontend (if not running)
cd msh_single_uniapp  
npm run serve
```

---

## 🆘 Troubleshooting

**Problem: Page shows "加载中..." forever**
- **Solution:** Refresh page, check backend is running

**Problem: Can't click anything**
- **Solution:** Expected! Use manual testing (that's the point of Phase 2)

**Problem: API errors in console**
- **Solution:** Check backend at http://127.0.0.1:20822 is running

**Problem: Login fails**  
- **Solution:** Verify credentials: 18621813282 / A123456

**Problem: Don't know where to start**
- **Solution:** Read `h5-testing-summary.md` (5 minutes)

---

## 💡 Pro Tips

1. **Use DevTools:** Press F12 to see console, network, etc.
2. **Take Screenshots:** Document issues as you find them
3. **Test on Real Device:** Better UX verification than browser
4. **Follow Checklist:** Don't skip steps
5. **Document Everything:** Future you will thank present you

---

## 📞 Next Steps

### Today:
- [ ] Read this guide (done! ✓)
- [ ] Verify prerequisites  
- [ ] Run quick test (5 min)
- [ ] Read h5-testing-summary.md

### This Week:
- [ ] Complete manual testing checklist
- [ ] Document all findings
- [ ] Report critical issues
- [ ] Fix image path config

### This Month:
- [ ] Review long-term solutions
- [ ] Consider test automation
- [ ] Plan architecture improvements

---

## ✅ Success Checklist

You're ready to test when you have:
- [ ] Backend running (http://127.0.0.1:20822)
- [ ] Frontend running (http://localhost:8080)
- [ ] Test credentials (18621813282 / A123456)
- [ ] Browser resized to ~375px width
- [ ] Manual testing checklist open/printed
- [ ] This guide read (almost done!)

---

**Time to First Test:** 5 minutes  
**Time to Complete:** 2-3 hours  
**Documentation:** Complete ✅  
**Ready to Start:** Yes! 🚀

---

**Go to:** [`manual-testing-checklist.md`](./manual-testing-checklist.md) to begin testing!