메뉴
Writing and running Playwright E2E tests for the web app
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | playwright-e2e |
| description | Writing and running Playwright E2E tests for the web app |
Use when writing or running end-to-end tests.
Playwright is already in package.json. Install browsers:
pnpm exec playwright install chromium
playwright.config.ts at project root:
./e2ehttp://localhost:3000reuseExistingServer: true — nếu port 3000 đã chạy thì không khởi động lạipnpm exec playwright test # Run all e2e tests (headless)
pnpm exec playwright test --ui # Run with UI mode
pnpm exec playwright test --debug # Debug with inspector
pnpm exec playwright test e2e/example.spec.ts # Single file
pnpm exec playwright show-report # View HTML report
data-tour attributes)Many UI elements have data-tour attributes for easy selecting:
| Selector | Element |
|---|---|
[data-tour='tab-main-root'] | Main tab button |
[data-tour='tab-gear-root'] | Gear tab button |
[data-tour='tab-stats'] | Stats subtab |
[data-tour='tab-rotation'] | Rotation subtab |
[data-tour='player-level'] | Player level input |
[data-tour='martial-art'] | Martial art selector |
[data-tour='stat-input'] | First stat input (Agility) |
[data-tour='gear-add-open'] | Add Gear button |
[data-tour='gear-ocr'] | OCR button in gear form |
[data-tour='gear-add-submit'] | Submit gear form |
[data-tour='gear-optimize-open'] | Open optimizer button |
[data-tour='gear-optimize-recalculate'] | Recalculate button in optimizer |
[data-tour='gear-optimize-progress'] | Progress indicator |
[data-tour='gear-optimize-equip'] | Equip button for a result |
test("page loads", async ({ page }) => {
await page.goto("/");
await expect(page.locator("[data-tour='tab-main-root']")).toBeVisible();
});
test("open gear form", async ({ page }) => {
await page.goto("/");
await page.locator("[data-tour='tab-gear-root']").click();
await page.locator("[data-tour='gear-add-open']").click();
await expect(page.locator("[data-tour='gear-ocr']")).toBeVisible();
});
data-tour selectors thay vì text — ổn định hơn khi đổi ngôn ngữe2e/ dùng Playwright API, không dùng vitestpnpm dev (nhờ reuseExistingServer)--project=chromium nếu muốn chạy đúng browserModifying or adding damage calculation formulas (damageFormula.ts + damageCalculator.ts)
Adding passive skill / inner way code changes (modifier engine, skill context, types, not data)
Adding new stats to the game (constants.ts + types.ts + gear/OCR/tune files)
Editing game data through admin panel (skills, passives, inner ways, martial arts, rotations)
Running and writing tests for the project (vitest, node env, globals)
Working with gear tune features (tune variants, success rate, tune history in optimizer + UI)