메뉴
E2E test writing workflow using Playwright. Use when creating a new E2E test suite for a feature. Ensures POM usage, proper locators, and verification. Trigger phrases: write playwright test, create e2e suite, test e2e.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | playwright-suite |
| description | E2E test writing workflow using Playwright. Use when creating a new E2E test suite for a feature. Ensures POM usage, proper locators, and verification. Trigger phrases: write playwright test, create e2e suite, test e2e. |
| argument-hint | Tên tính năng hoặc ScreenCode cần test (e.g. auth_login, ADMIN_LOGIN) |
Viết một bộ test E2E hoàn chỉnh cho một tính năng, áp dụng Page Object Model (POM) và đảm bảo test chạy thành công.
.github/knowledge/playwright-lessons.md trước để áp dụng các bài học phòng tránh lỗi lặp lại.demo_docs/tests/ITa/ hoặc demo_docs/tests/ITb/.demo_docs/fe/[Design][LIST] SCREEN_DanhSachManHinh.md và FE screen spec tương ứng.demo_source_fe/src/App.jsx.Docs-Code Mismatch thay vì tự chọn route.Playwright Chunk Plan từ danh sách TC trong tài liệu..spec.ts riêng.list-filter-pagination, profile-edit, role-status, create-delete, permission-auth, security-error, concurrency.{feature}.{chunk-index}-{chunk-name}.spec.ts, ví dụ admin-users.01-list-filter.spec.ts.demo_playwright/page-objects/ (ví dụ: LoginPage.js).constructor (ưu tiên getByRole, getByLabel).async login(email, password)).demo_playwright/tests/ITa_functional/ (nếu là ITa) hoặc demo_playwright/tests/ITb_scenarios/ (nếu là ITb). Nếu tổng TC > 10, tạo nhiều spec theo Playwright Chunk Plan, mỗi file khoảng 8-10 TC.captureEvidence từ ../../utils/evidence.test.beforeAll để gọi DB hoặc API setup).test() tương ứng 1-1 với các TC ID trong file Markdown. Truyền đúng Data ID vào test. Mỗi spec file chỉ được chứa tối đa 10 block test() nghiệp vụ; nếu cần helper/setup chung, tách vào fixture/helper để tránh phình file.[UI] (chỉ assert giao diện, không chờ API) và [API] (phải dùng page.waitForResponse để assert status code và response body).DB Confirmation Matrix trong tài liệu.await captureEvidence(page, testInfo, 'Tên-Bước') trước và sau các action chính để lưu lại bằng chứng UI.demo_playwright/.GET http://localhost:3000/api/categories / GET http://localhost:3000/api/posts.GET http://localhost:5173/ hoặc baseURL trong demo_playwright/playwright.config.ts.BLOCKED: FE/BE not available, không chạy full suite và không tính là bug app/test code..github/knowledge/playwright-lessons.md: route trace từ docs/code, assertion gate không phụ thuộc text tiếng Việt có dấu, fail fast khi API/environment treo.npx playwright test tests/{ITa_functional|ITb_scenarios}/{tên-file}.spec.ts.-g "Tên TC") cho đến khi PASS.npx playwright show-report. Chỉ cần verify, phân tích log/trace, fix test code và chạy lại. Nếu là bug app thì tổng hợp report 1 lần ở cuối. User sẽ tự mở report nếu cần.### Files created/modified
- demo_playwright/page-objects/...
- demo_playwright/tests/...
### Test Scenarios
1. ...
2. ...
### Phân tích kết quả (Test Execution Report)
- Tổng số TC: X
- PASS: Y
- Environment Gate: PASS | BLOCKED (FE/BE URL đã kiểm tra)
- Smoke Test: PASS | FAIL (case đã chạy)
- FAIL do Bug App: Z (Liệt kê chi tiết bug: TC ID, Expected, Actual)
- Lỗi Test Code đã fix: (Liệt kê các lỗi test code đã phát hiện và fix trong quá trình chạy)
Sau khi hoàn thành skill này, PHẢI ghi log vào reports/AGENT_EXECUTION_LOG.md trước khi báo cáo kết quả.
Dùng template sau (copy và điền vào):
### [YYYY-MM-DD HH:mm:ss] - {be-agent | fe-agent | test-agent | playwright-agent | docs-agent}
- **Task**: {Mô tả ngắn gọn việc vừa làm}
- **Skill Used**: {tên skill này}
- **Target Feature**: {key trong PROJECT_MANIFEST.yml, ví dụ: auth_login}
- **Files Processed**:
- `path/to/file` [Modified]
- `path/to/file` [Verified/Unchanged]
- **Status**: SUCCESS | FAILED | PARTIAL
- **Notes**: {Ghi chú: findings, residual risks, việc chưa làm}
⚠️ Nếu bị interrupt, ghi
Status: PARTIALvà ghi rõ đã làm đến bước nào. ⚠️ Sau khi ghi log, cập nhậtcycle_checkpointtrongPROJECT_MANIFEST.yml.
Frontend implementation workflow for Blog Du Lịch. Use when building React screens, components, auth flow, route guards, or fixing UI bugs. Loads screen specs, checklist, and component patterns. Trigger phrases: implement screen, React page, frontend component, auth context, protected route, admin UI, home page, category page, post form.
Backend implementation workflow for Blog Du Lịch. Use when implementing a new API endpoint, fixing backend logic, adding middleware, or updating DB schema. Loads checklist, spec-reading procedure, and review criteria. Trigger phrases: implement backend, create endpoint, fix API, add route, backend feature, controller, migration.
Test writing workflow for Blog Du Lịch backend. Use when writing Jest + Supertest tests, adding test cases for new endpoints, creating test helpers or factories, checking coverage. Trigger phrases: write test, add test, test suite, jest, supertest, coverage, unit test, integration test, test auth, test posts.
Workflow tạo tài liệu Test Case ITb (Scenario Integration). Sử dụng khi cần định nghĩa kịch bản kiểm thử luồng nghiệp vụ xuyên suốt qua nhiều màn hình và role. Trigger phrases: tạo test case itb, viết test case luồng, doc itb.
Workflow tạo tài liệu Workflow Design (Business Flow). Sử dụng để tổng hợp logic từ các tài liệu FE/BE rời rạc thành một luồng nghiệp vụ xuyên suốt, làm đầu vào chuẩn cho việc viết Test Case ITb. Trigger phrases: tạo workflow, viết luồng nghiệp vụ, doc workflow.
Workflow review tài liệu Workflow Design. Sử dụng để kiểm tra tính hợp lý của luồng nghiệp vụ, phát hiện các dead-end, thiếu sót rẽ nhánh hoặc mâu thuẫn với tài liệu FE/BE. Trigger phrases: review workflow, kiểm tra luồng nghiệp vụ.