メニュー
Execute Playwright E2E tests for QraftBox. Handles Nix environment setup, test execution, result directory management, and output analysis. Use when running, debugging, or analyzing E2E tests.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | e2e-test |
| description | Execute Playwright E2E tests for QraftBox. Handles Nix environment setup, test execution, result directory management, and output analysis. Use when running, debugging, or analyzing E2E tests. |
| allowed-tools | Bash, Read, Write, Glob, Grep |
This skill provides guidelines for efficiently executing, debugging, and managing Playwright E2E tests for QraftBox.
Apply this skill when:
nix-shell -p nodejs_22 --run "npx playwright test"
nix-shell -p nodejs_22 --run "npx playwright test -g 'E2E-01-01'"
nix-shell -p nodejs_22 --run "npx playwright test e2e/visual-verification.spec.ts"
nix-shell -p nodejs_22 --run "npx playwright test --project=chromium"
nix-shell -p nodejs_22 --run "npx playwright test --project=tablet"
E2E_RUN_ID=manual_test nix-shell -p nodejs_22 --run "npx playwright test"
nix-shell -p nodejs_22 --run "npx playwright test --headed"
nix-shell -p nodejs_22 --run "npx playwright test --debug"
Playwright requires Node.js (NOT Bun). Always execute via nix-shell -p nodejs_22:
# CORRECT
nix-shell -p nodejs_22 --run "npx playwright test"
# WRONG - Bun cannot run Playwright
bun run playwright test
bunx playwright test
PLAYWRIGHT_BROWSERS_PATH automatically via direnv / nix developPLAYWRIGHT_BROWSERS_PATH manuallychromium-1200; the config sets executablePath accordinglyThe playwright.config.ts manages the dev server automatically:
| Setting | Value |
|---|---|
| Command | bun run src/main.ts --port 7155 |
| Health check | http://localhost:7155/api/health |
reuseExistingServer | false (always starts fresh) |
| Timeout | 30 seconds |
No manual server startup is needed. Playwright starts and stops the server.
NOTE: If port 7155 is already in use, tests will fail. Kill any existing process on that port first:
lsof -ti:7155 | xargs kill -9 2>/dev/null || true
Each test run creates a timestamped directory under e2e-result/:
e2e-result/ # <-- gitignored
{runId}/ # e.g., 20260208_143022
screenshots/ # Visual verification screenshots
01-app-initial-load.png
02-file-tree-initial.png
03-diff-sbs-initial.png
...
results/ # Playwright test artifacts (traces, videos)
report/ # HTML report (open with: npx playwright show-report)
yyyyMMdd_HHmmss (e.g., 20260208_143022)E2E_RUN_ID env var for custom namingprocess.env["E2E_RUN_DIR"]The following directories are already gitignored in .gitignore:
# E2E test outputs
e2e-result/
playwright-report/
test-results/
No E2E results will ever be committed. Each run is ephemeral.
nix-shell -p nodejs_22 --run "npx playwright show-report e2e-result/{runId}/report"
Screenshots are saved to e2e-result/{runId}/screenshots/. View them directly or use Read tool for image files.
ls -td e2e-result/*/ | head -1
playwright.config.ts - Defines projects, browser settings, and output directories.
| File | Purpose |
|---|---|
e2e/visual-verification.spec.ts | Main visual verification test suite |
e2e/tsconfig.json | TypeScript config for E2E tests |
design-docs/specs/design-e2e-test-plan.md - Full test plan with all test case definitions.
| Project | Browser | Viewport | Purpose |
|---|---|---|---|
chromium | Desktop Chrome | Default (1280x720) | Standard desktop testing |
tablet | Desktop Chrome | 1194x834, touch | Tablet/responsive testing |
These tests follow a non-destructive testing policy:
Verify the Nix environment is active and provides the browser:
echo $PLAYWRIGHT_BROWSERS_PATH
ls $PLAYWRIGHT_BROWSERS_PATH/chromium-1200/chrome-linux64/chrome
lsof -ti:7155 | xargs kill -9 2>/dev/null || true
bun run src/main.ts --port 7155curl http://localhost:7155/api/healthplaywright.config.ts if neededEnsure Node.js dependencies are installed:
bun install
The config uses reuseExistingServer: false, so Playwright always starts a fresh server. If issues persist, manually kill any lingering processes on port 7155.
e2e/visual-verification.spec.ts (or create new spec files under e2e/)E2E-{suite}-{case} (e.g., E2E-21-01)screenshot() helper for consistent screenshot naminggetContextId() helper for API tests that need a workspace contextdesign-docs/specs/design-e2e-test-plan.md with new test cases1. Run tests: nix-shell -p nodejs_22 --run "npx playwright test"
2. Check output: ls -td e2e-result/*/ | head -1
3. View report: nix-shell -p nodejs_22 --run "npx playwright show-report e2e-result/{runId}/report"
4. View screenshots: ls e2e-result/{runId}/screenshots/
Execute QraftBox release operations end-to-end using Taskfile tasks, including GitHub Release and npm publish. Use when users ask to release, publish a version, or run post-merge release operations.
Use when writing TypeScript code that interacts with dependencies, handles credentials, executes child processes, or manages configuration. Provides Shai-Hulud supply chain attack countermeasures at the code level including safe dependency usage, credential handling, subprocess hardening, and runtime integrity patterns.
Use when installing, updating, or auditing npm dependencies with Bun. Provides Shai-Hulud supply chain attack countermeasures including bunfig.toml hardening, lockfile verification, trustedDependencies management, and CI/CD pipeline security.
Use when creating, publishing, or maintaining npm packages with Bun. Provides Shai-Hulud supply chain attack countermeasures including npm token management, 2FA enforcement, provenance signing, trusted publishing via GitHub Actions, and pre-publish security checklists.
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.
Use when creating or organizing design documents. Provides directory structure, file naming, and content guidelines for design specs and references.