114 lines
3.2 KiB
Markdown
114 lines
3.2 KiB
Markdown
## การใช้งาน 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 หนึ่งไหมครับ?
|