Menu
Writing and running Playwright E2E tests for the web app
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Modifying 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)
| 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 browser