add-e2e-test

Files (1)

• SKILL.md

SKILL.md (first lines)

> **Tool mapping (OpenCode):** This skill uses:
> - `question` tool for user prompts (not `AskUserQuestion`)
> - `task` tool for subagents (not `Agent` or `Task` subagent syntax)
> - `skill({ name: "..." })` to load other skills (not `Skill(skill="...", args="...")`)
> - `codegraph_explore`, `codegraph_search`, `codegraph_context` for codebase exploration (preferred)
> - `todowrite` for phase/progress tracking
> - `grep`, `glob`, `read`, `bash` as fallback when `.codegraph/` is not initialized
>
> **Context rule:** This skill supersedes any prior skill instructions. Follow ONLY these instructions now. Read the user's goal and any mode/include/skip from the conversation context.

Read `mode=`, `include=`, and `skip=` from the conversation context. Default to the mode specified in this skill if not provided.

# Add E2E Test

Browser tests are expensive — slow, flaky-prone, and dependent on a live server. They earn their cost only when they exercise the real user path. Anything that can be tested at the unit or integration layer should be tested there instead.

---

## Phase 1 — Confirm Scope

Use `todowrite` to mark this phase as in_progress. Mark it completed when done.

Confirm the flow with the user in one sentence: which page does the user start on, what action do they take, what observable outcome proves it worked? If any of those three are vague, ask before writing the test.

If the flow is essentially a function call dressed up as a UI interaction (e.g., "test that this util returns the right value"), redirect: that's a unit test, not an e2e test.

**Exit:** start URL, user action, observable outcome are written down.

---

## Phase 2 — Detect Playwright

Use `todowrite` to mark this phase as in_progress. Mark it completed when done.

Check, in order:

1. `@playwright/test` in `package.json` devDependencies → installed.
2. `playwright.config.ts` / `.js` / `.mts` at repo root → configured.
3. `tests/` or `e2e/` directory with existing `*.spec.ts` files → conventions to inherit.

If Playwright is not installed:

```
Playwright not detected.
Proposed setup: npm init playwright@latest
This will:
  - install @playwright/test
  - create playwright.config.ts
  - create example tests in tests/
  - download browser binaries (~170MB)
Approve? (y/n)
```

Use the `question` tool to ask. Wait for `y`. Do not auto-install. If the user declines, stop.

**Exit:** Playwright is installed and configured; the test directory is identified.

---

## Phase 3 — Inherit Conventions

Use `todowrite` to mark this phase as in_progress. Mark it completed when done.

Read 1–2 existing spec files. Extract:

- Where tests live (`tests/`, `e2e/`, colocated)
- File naming (`<flow>.spec.ts`, `<flow>.e2e.ts`)
- Fixture / setup pattern (`test.beforeEach`, `auth.setup.ts`, `playwright/fixtures.ts`)
- Auth strategy (`storageState` from a setup project, login-per-test, cookies set in fixtures)
- baseURL handling (env var, hardcoded, project-specific)

If no existing tests, defaults:
- Tests live in `tests/` (or `e2e/` if `tests/` is unit tests).
- File: `<flow>.spec.ts`.
- Auth: if the flow needs a logged-in user, create `tests/auth.setup.ts` that logs in once and saves `storageState`, referenced from `playwright.config.ts`.

**Exit:** convention notes recorded.

---

## Phase 4 — Smoke Test (HARD GATE)

Use `todowrite` to mark this phase as in_progress. Mark it completed when done.

Before writing the real flow, write **one** trivial Playwright test:

```ts
test('app loads', async ({ page }) => {
  await page.goto('/')
  await expect(page).toHaveTitle(/.+/)
})
```

Start the dev server (or rely on `webServer` config), run the smoke test:

```bash
npx playwright test <path-to-smoke> --reporter=list
```

It must pass. If it fails: stop. Debug the baseURL, the dev server start, the webServer config — do not write more tests against a broken harness.

**Exit:** one smoke test passes against the running app.

---

## Phase 5 — Write the Flow

Use `todowrite` to mark this phase as in_progress. Mark it completed when done.

Build the test from the user's three sentences:

```ts
test('<observable outcome>', async ({ page }) => {
  await page.goto('<start url>')

  // user actions — prefer role-based selectors
  await page.getByLabel('Email').fill('test@example.com')
  await page.getByLabel('Password').fill('correct-horse')
  await page.getByRole('button', { name: 'Sign in' }).click()

From Acauhi99/opencode-agent-system, MIT.

More from Acauhi99/opencode-agent-system