690504:1641 Update specs [skip ci]

2026-05-04 16:41:50 +07:00
parent 42a6d24318
commit 3575f3073b
106 changed files with 5813 additions and 259 deletions
@@ -0,0 +1,113 @@
+## การใช้งาน Playwright ใน LCBP3-DMS
+
+จากการตรวจสอบ spec มี test strategy ที่รองรับ Playwright:
+
+### 1. **Test Strategy** (จาก [05-04-testing-strategy.md](cci:7://file:///e:/np-dms/lcbp3/specs/05-Engineering-Guidelines/05-04-testing-strategy.md:0:0-0:0))
+
+**Stack**:
+- **Backend**: Jest (Unit + Integration + E2E)
+- **Frontend**: Vitest (Unit) + **Playwright** (E2E)
+
+### 2. **Setup Playwright**
+
+```bash
+# ติดตั้ง Playwright browsers
+npx playwright install chromium
+
+# หรือติดตั้งทั้งหมด
+npx playwright install
+```
+
+### 3. **MCP Server สำหรับ Windsurf**
+
+เพิ่มใน [.windsurfrc](cci:7://file:///e:/np-dms/lcbp3/.windsurfrc:0:0-0:0):
+
+```json
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp@latest"]
+    }
+  }
+}
+```
+
+**Restart Windsurf** แล้วจะเห็น Playwright MCP panel
+
+### 4. **การใช้งานผ่าน Windsurf Cascade**
+
+เมื่อ MCP พร้อมแล้ว สามารถใช้คำสั่ง:
+
+- **Open browser**: `Navigate to http://localhost:3000`
+- **Take screenshot**: `Take a screenshot of the current page`
+- **Click element**: `Click the "Submit" button`
+- **Fill form**: `Type "test@example.com" into the email field`
+- **Verify**: `Check if "Success" message is visible`
+
+### 5. **E2E Test Script Example**
+
+สร้างไฟล์ `e2e/workflow-adr021.spec.ts`:
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('ADR-021 workflow transition with attachment', async ({ page }) => {
+  // 1. Login
+  await page.goto('http://localhost:3000/login');
+  await page.fill('[name="email"]', 'test@example.com');
+  await page.fill('[name="password"]', 'password');
+  await page.click('button[type="submit"]');
+
+  // 2. Navigate to RFA detail
+  await page.goto('http://localhost:3000/rfas/test-uuid');
+
+  // 3. Verify IntegratedBanner
+  await expect(page.locator('[data-testid="integrated-banner"]')).toBeVisible();
+  await expect(page.locator('[data-testid="priority-badge"]')).toHaveText('HIGH');
+
+  // 4. Upload attachment
+  await page.setInputFiles('[data-testid="file-dropzone"]', 'test.pdf');
+
+  // 5. Submit approval
+  await page.click('[data-testid="approve-button"]');
+
+  // 6. Verify success
+  await expect(page.locator('[data-testid="success-toast"]')).toBeVisible();
+});
+```
+
+### 6. **Run E2E Tests**
+
+```bash
+cd frontend
+
+# Run all E2E tests
+npx playwright test
+
+# Run specific test
+npx playwright test e2e/workflow-adr021.spec.ts
+
+# Run with UI mode (debug)
+npx playwright test --ui
+
+# Run headed (see browser)
+npx playwright test --headed
+```
+
+### 7. **Generate Test Report**
+
+```bash
+npx playwright show-report
+```
+
+### 8. **ถ้าใช้ MCP ผ่าน Windsurf**
+
+Cascade จะมี tool ให้ใช้:
+- `browser_navigate` - เปิด URL
+- `browser_click` - คลิก element
+- `browser_type` - พิมพ์ข้อความ
+- `browser_take_screenshot` - ถ่าย screenshot
+- `browser_evaluate` - รัน JavaScript
+
+ต้องการให้ช่วย setup หรือสร้าง E2E test สำหรับ feature ใด feature หนึ่งไหมครับ?