Cline rules

1# Playwright workshop — project rules (Cline)
2 
3This repo is the **Nordic Conference Playwright workshop**. App under test is **TodoMVC** at `https://demo.playwright.dev/todomvc` (set as `baseURL` in `playwright.config.ts`).
4 
5House style + workflow guidance live as on-demand skills under `.clinerules/skills/`.
6 
7## Skills available (load on-demand when relevant)
8 
9- `playwright-mcp-workflow` — orchestrator: when to use the test MCP, when to invoke an agent, when to just edit files. Read first for any Playwright task.
10- `playwright-page-object` — when/how to use POM. Has a TodoMVC example at `.clinerules/skills/playwright-page-object/examples/todo.page.ts` — directly relevant to this project.
11- `playwright-locators` — locator priority + auto-wait + web-first assertions
12- `playwright-fixtures-auth` — custom fixtures, storage state, test isolation
13- `playwright-debugging` — UI mode, codegen, trace viewer, page.pause
14- `playwright-bug-hunting` — broken-image audits, console/5xx guards, a11y
15- `playwright-network-mocking` — page.route, HAR record/replay
16- `playwright-api-testing` — request fixture, hybrid UI + API tests
17 
18## MCP gotcha — must read
19 
20The MCP server `playwright-test` (`npx playwright run-test-mcp-server`) is a **test runner** MCP, not a raw browser driver. Every `browser_*` call must live inside a Playwright test context.
21 
22**Before any `browser_*` call in a free-form session, call `planner_setup_page` first.** Otherwise the server returns *"must setup test before interacting with the page."*
23 
24When invoking a Test Agent (planner/generator/healer in `.claude/agents/`), the agent's own setup tool handles this automatically.
25 
26## Reference code in this repo
27 
28- `tests/todo.spec.ts` — current example spec (add a todo item)
29- `tests/seed.spec.ts` — seed test used by Test Agents (created by `init-agents`)
30- `playwright.config.ts` — `baseURL: https://demo.playwright.dev`, trace on first retry, screenshot + video on failure
31- `specs/` — where the Planner agent saves test plans
32 
33No `pages/`, `tests/fixtures.ts`, or auth flow exists yet — those are patterns attendees build during the workshop. The skill examples (TodoMVC `todo.page.ts`, fixture/auth patterns) show the target style.
34 
35## House style — quick anchors
36 
37- **Locators**: `getByRole` → `getByLabel` → `getByPlaceholder` → `getByTestId`. The existing test uses `getByPlaceholder` and `getByTestId` — both good. Avoid CSS chains / positional XPath.
38- **Waits**: never `page.waitForTimeout()`; let `await expect(locator)...` do the waiting.
39- **Auth**: prefer fixtures + `storageState` files over re-logging in each test (NB: TodoMVC has no auth — relevant pattern when attendees move to apps that do).
40- **Assertions**: web-first only — `await expect(locator).toX(...)`, never `expect(await locator.textContent()).toBe(...)`.
41 
42For session flow, exercises, and the Cline-specific setup steps attendees follow, see `.roo/WORKSHOP_GUIDE.md`.
43 
44## Keeping Roo and Cline skills in sync
45 
46`.roo/skills/` is the canonical location; `.clinerules/skills/` is a mirror so Cline picks them up. After editing any SKILL.md, run `npm run skills:sync` to update the mirror, or `npm run skills:check` to confirm they match.
47