# 🚀 DOING: Playwright Visual Test — Screenshot & Smoke Test UI + Product

## 📁 Folders & Files liên quan
```
backend/
├── static/
│   ├── mock-fe/index.html              ← TEST: Chatbot chính (search SP)
│   ├── user-simulator/user-simulator.html  ← TEST: User Simulator UI
│   ├── prompt-optimizer/prompt-optimizer.html ← TEST: Prompt Optimizer UI
│   ├── reaction-simulator/reaction-simulator.html ← TEST: Reaction Simulator UI
│   ├── regression-test/regression-test.html ← TEST: Regression Test UI
│   ├── stress-test/stress-test.html     ← TEST: Stress Test UI
│   ├── live-monitor/live-monitor.html   ← TEST: Live Monitor UI
│   ├── social-inbox/index.html          ← TEST: Social Inbox UI
│   ├── content-approval/index.html      ← TEST: Content Approval UI
│   ├── content-calendar/index.html      ← TEST: Content Calendar UI
│   ├── content-composer/index.html      ← TEST: Content Composer UI
│   └── home/index.html                 ← TEST: Dashboard Home
├── server.py                            ← REF: PORT config, static serving
└── api/
    └── agent_chat/chat_route.py         ← TEST: POST /api/agent/chat-dev (SP search)
plan/
├── doings/22_playwright_visual_test.md  ← THIS FILE
└── done/                                ← Move completed doings here
```

## 📌 Context
- **Status:** 🚧 In Progress
- **Tool:** MCP Playwright (browser automation + screenshot)
- **Server:** `http://localhost:{PORT}` (check .env for PORT, default 5000)

## 🎯 Goal
Dùng MCP Playwright để:
1. Chụp screenshot tất cả trang giao diện → verify render OK (không lỗi layout, JS error)
2. Smoke test luồng search sản phẩm trên chatbot mock-fe
3. Lưu screenshots vào `plan/screenshots/` để review

## ⚠️ Active Trade-offs
- Chỉ test visual render (no end-to-end functional test)
- Server phải chạy trước khi test (`python server.py`)
- Screenshots chỉ mang tính verify lần đầu — không phải CI/CD

---

## 📋 Execution Checklist

### Phase 0: Khởi động Server (~2m)
- [x] Task 0.1: Chạy server backend: `cd backend && python server.py`
- [x] Task 0.2: Verify `http://localhost:5000/health` trả về `{"status": "ok"}`
- [x] Task 0.3: Tạo thư mục `plan/screenshots/` nếu chưa có

### Phase 1: Screenshot tất cả Dashboard Pages (~15m)
> Dùng MCP Playwright: navigate → wait load → screenshot → save

- [x] Task 1.1: 📸 `http://localhost:5000/home/index.html` → `plan/screenshots/01_dashboard_home.png`
- [x] Task 1.2: 📸 `http://localhost:5000/static/mock-fe/index.html` → `plan/screenshots/02_chatbot_mockfe.png`
- [x] Task 1.3: 📸 `http://localhost:5000/static/user-simulator/user-simulator.html` → `plan/screenshots/03_user_simulator.png`
- [x] Task 1.4: 📸 `http://localhost:5000/static/prompt-optimizer/prompt-optimizer.html` → `plan/screenshots/04_prompt_optimizer.png`
- [x] Task 1.5: 📸 `http://localhost:5000/static/reaction-simulator/reaction-simulator.html` → `plan/screenshots/05_reaction_simulator.png`
- [x] Task 1.6: 📸 `http://localhost:5000/static/regression-test/regression-test.html` → `plan/screenshots/06_regression_test.png`
- [x] Task 1.7: 📸 `http://localhost:5000/static/stress-test/stress-test.html` → `plan/screenshots/07_stress_test.png`
- [x] Task 1.8: 📸 `http://localhost:5000/static/live-monitor/live-monitor.html` → `plan/screenshots/08_live_monitor.png`
- [x] Task 1.9: 📸 `http://localhost:5000/static/social-inbox/index.html` → `plan/screenshots/09_social_inbox.png`
- [x] Task 1.10: 📸 `http://localhost:5000/static/content-approval/index.html` → `plan/screenshots/10_content_approval.png`
- [x] Task 1.11: 📸 `http://localhost:5000/static/content-calendar/index.html` → `plan/screenshots/11_content_calendar.png`
- [x] Task 1.12: 📸 `http://localhost:5000/static/content-composer/index.html` → `plan/screenshots/12_content_composer.png`

### Phase 2: Verify — Kiểm tra giao diện (~5m)
- [x] Task 2.1: Review screenshots — check lỗi layout/broken CSS/missing images
- [x] Task 2.2: Check console log cho JS errors (nếu Playwright hỗ trợ)
- [x] Task 2.3: Ghi nhận pages nào bị lỗi render vào `plan/screenshots/REPORT.md`

### Phase 3: Smoke Test Search SP (~10m)
> Dùng MCP Playwright trên chatbot mock-fe

- [x] Task 3.1: Navigate `http://localhost:5000/static/mock-fe/index.html`
- [x] Task 3.2: Type vào input "áo phông nam Canifa" → click Send
- [x] Task 3.3: Wait 10s cho response → 📸 screenshot kết quả → `plan/screenshots/13_sp_search_result.png`
- [x] Task 3.4: Verify có sản phẩm hiện ra (text check: "Canifa" or product card visible)
- [x] Task 3.5: Type "đầm nữ công sở" → Send → 📸 → `plan/screenshots/14_sp_search_dam.png`
- [x] Task 3.6: Type "chính sách đổi trả" → Send → 📸 → `plan/screenshots/15_sp_policy.png`

### Phase 4: Report (~5m)
- [x] Task 4.1: Tạo `plan/screenshots/REPORT.md` tổng hợp:
  - ✅ Pages render OK
  - ❌ Pages bị lỗi (nếu có)
  - 📦 SP search kết quả
- [x] Task 4.2: Nếu tất cả pass → move file này sang `plan/done/22_playwright_visual_test.md`

## 🔄 Sub-Doings
_None yet_

## ✅ Completion Gate
- [x] All tasks [x] | [x] Sub-Doings resolved | [x] Screenshots saved | [x] Report created

---
_Started: 2026-05-10 | Updated: 2026-05-10_
