@andwhy/e2e-pipeline 0.13.2 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -10
- package/dist/bin/init.js +29 -5
- package/dist/utils/copy.d.ts +15 -1
- package/dist/utils/copy.js +152 -91
- package/package.json +6 -3
- package/plugin/.claude-plugin/plugin.json +18 -0
- package/plugin/agents/playwright-test-generator.md +273 -0
- package/plugin/agents/playwright-test-healer.md +159 -0
- package/plugin/agents/playwright-test-planner.md +135 -0
- package/plugin/hooks/hooks.json +16 -0
- package/plugin/hooks/session-context.md +9 -0
- package/plugin/hooks/session-start.mjs +49 -0
- package/plugin/skills/playwright-test-pipeline/SKILL.md +545 -0
- package/templates/github/prompts/checkly-heal.md +10 -3
- package/templates/github/workflows/checkly-deploy.yml +19 -52
- package/templates/github/workflows/checkly-heal.yml +20 -419
- package/templates/github/workflows/pr-playwright-tests.yml +17 -143
- package/templates/claude/rules/playwright-workflow.md +0 -219
- package/templates/claude/skills/playwright-test-pipeline/SKILL.md +0 -286
|
@@ -0,0 +1,545 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: playwright-test-pipeline
|
|
3
|
+
description: Guides the full workflow for creating and maintaining Playwright
|
|
4
|
+
end-to-end tests with the planner/generator/healer agents — setup check,
|
|
5
|
+
Plan → Generate → Heal, local runs, Checkly preview validation, and
|
|
6
|
+
deployment. Use when the user wants to create, extend, or fix e2e/Playwright
|
|
7
|
+
tests, asks to "test" a page/feature/flow, or asks how the test pipeline
|
|
8
|
+
works.
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# Playwright Test Pipeline
|
|
12
|
+
|
|
13
|
+
You are guiding a person through this project's test pipeline. They may not
|
|
14
|
+
know it exists — narrate briefly at each phase, and pause at the marked
|
|
15
|
+
decision points. The delegation rules, the project test rules, and the exact
|
|
16
|
+
prompt templates for the agents are all in this skill; follow them, do not
|
|
17
|
+
improvise your own prompts to the agents.
|
|
18
|
+
|
|
19
|
+
Setup and workflow docs (for humans): https://app.notion.com/p/31ff837b6270805d8922c4a7c7beb6b0
|
|
20
|
+
|
|
21
|
+
## Delegation rules (always)
|
|
22
|
+
|
|
23
|
+
- When the user says "Use the playwright-test-planner/generator/healer agent",
|
|
24
|
+
or the pipeline reaches a step owned by one of them, delegate via the
|
|
25
|
+
**Agent** tool with the matching `subagent_type`. The agents ship with the
|
|
26
|
+
`e2e-pipeline` plugin and register under their namespaced names:
|
|
27
|
+
`e2e-pipeline:playwright-test-planner`, `e2e-pipeline:playwright-test-generator`,
|
|
28
|
+
`e2e-pipeline:playwright-test-healer` (the plain name also resolves when it
|
|
29
|
+
is unique in the session).
|
|
30
|
+
- **Never call the `playwright-test` MCP tools directly** from the
|
|
31
|
+
orchestrating session. They belong to the agents.
|
|
32
|
+
- **Do not implement Playwright specs in the orchestrating turn.** Writing or
|
|
33
|
+
editing `*.spec.js` / `*.spec.ts` test bodies yourself bypasses replay, the
|
|
34
|
+
generator's MCP tools, and the project rules. Generation goes through the
|
|
35
|
+
generator; failing tests go through the healer.
|
|
36
|
+
- **Plans:** read `tests/e2e/<feature>/<name>.plan.md` yourself and pass its
|
|
37
|
+
contents in the Agent prompt. **Never ask the user to paste the plan** into
|
|
38
|
+
chat.
|
|
39
|
+
|
|
40
|
+
| Trigger phrase in user prompt | `subagent_type` | Purpose |
|
|
41
|
+
| ---------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
|
|
42
|
+
| "Use the playwright-test-planner agent to …" | `e2e-pipeline:playwright-test-planner` | Explores the live site, discovers real selectors/DOM, writes a `tests/e2e/<name>.plan.md` |
|
|
43
|
+
| "Use the playwright-test-generator agent to …" | `e2e-pipeline:playwright-test-generator` | Reads a plan, replays steps in a browser, writes or extends `tests/e2e/<group>.spec.js` or `.spec.ts` (**Project test rules** §7–8) |
|
|
44
|
+
| "Use the playwright-test-healer agent to …" | `e2e-pipeline:playwright-test-healer` | Runs tests, debugs failures, fixes code, re-runs until green |
|
|
45
|
+
|
|
46
|
+
## Phase 0 — Setup (always first)
|
|
47
|
+
|
|
48
|
+
Verify, in order:
|
|
49
|
+
|
|
50
|
+
1. The three agents are available in this session. A repo is in one of two
|
|
51
|
+
states, and both are fine:
|
|
52
|
+
- **Plugin:** the agents are listed for the Agent tool as
|
|
53
|
+
`e2e-pipeline:playwright-test-planner`,
|
|
54
|
+
`e2e-pipeline:playwright-test-generator` and
|
|
55
|
+
`e2e-pipeline:playwright-test-healer`. They come from the `e2e-pipeline`
|
|
56
|
+
plugin, which the repo enables through `.claude/settings.json`
|
|
57
|
+
(`enabledPlugins` → `e2e-pipeline@andwhy`).
|
|
58
|
+
- **Original flow (repo scaffolded before 0.14.0):** the agents are files
|
|
59
|
+
under `.claude/agents/playwright-test-*.md` and are listed by their plain
|
|
60
|
+
names `playwright-test-planner`, `playwright-test-generator`,
|
|
61
|
+
`playwright-test-healer`. Use those names for `subagent_type` wherever
|
|
62
|
+
this skill writes the `e2e-pipeline:` form. Do not suggest migrating to
|
|
63
|
+
the plugin unless the user asks; the repo works as it is.
|
|
64
|
+
2. `.mcp.json` at project root defines the `playwright-test` server, pointed
|
|
65
|
+
at `playwright.mcp.config.{ts,mjs}` (which must exist — it lets the MCP run
|
|
66
|
+
seeds that `testIgnore` hides from normal runs)
|
|
67
|
+
3. A `playwright.config.{ts,mjs}` and `checkly.config.{ts,mjs}` exist
|
|
68
|
+
|
|
69
|
+
### If the agents are missing but the repo is otherwise set up
|
|
70
|
+
|
|
71
|
+
Check `.claude/settings.json` for the `e2e-pipeline@andwhy` entry.
|
|
72
|
+
|
|
73
|
+
- **Entry present, agents absent:** the plugin has not loaded in this
|
|
74
|
+
session. On a developer machine that means the session started before the
|
|
75
|
+
settings were committed or the folder was trusted — the plugin installs at
|
|
76
|
+
the next session start, so tell the user to restart and re-ask. In a
|
|
77
|
+
claude.ai/code cloud session the repo's plugin settings are not loaded at
|
|
78
|
+
all; say so plainly and stop — do not run the scaffold again, it will not
|
|
79
|
+
help, and do not improvise (see the hard stop below).
|
|
80
|
+
- **Entry absent, repo copies present** (`.claude/agents/playwright-test-*.md`
|
|
81
|
+
exist): original flow, nothing is missing — continue with the plain agent
|
|
82
|
+
names. Migrating to the plugin is the user's decision; when they ask, the
|
|
83
|
+
scaffold with `--force` as below writes the plugin entry and removes the
|
|
84
|
+
copies, which would otherwise shadow the plugin's agents.
|
|
85
|
+
- **Entry absent, no repo copies:** the pipeline is not installed here. Run
|
|
86
|
+
the scaffold as below.
|
|
87
|
+
|
|
88
|
+
### If anything is missing, install it — do not just bounce the user
|
|
89
|
+
|
|
90
|
+
Say what is missing, then offer to run the scaffold. Do not run it without
|
|
91
|
+
agreement: it installs dependencies and writes files.
|
|
92
|
+
|
|
93
|
+
**Always pass `--format` explicitly.** Without it the CLI opens an interactive
|
|
94
|
+
prompt, and in a non-interactive shell that prompt resolves empty and the CLI
|
|
95
|
+
exits silently having done nothing — it looks like it worked. Pick the format
|
|
96
|
+
from the repo: `ts` when there is a `tsconfig.json`, otherwise `mjs`.
|
|
97
|
+
|
|
98
|
+
```bash
|
|
99
|
+
pnpm dlx @andwhy/e2e-pipeline init --format ts # or --format mjs
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Add `--force` only when updating an existing install. It regenerates the
|
|
103
|
+
package-owned files (`.mcp.json`, `playwright.mcp.config.*`), removes
|
|
104
|
+
pre-plugin copies of the agents, rules and skill from `.claude/`, and never
|
|
105
|
+
touches the configs or the workflows. Add `--update-workflows` as well when
|
|
106
|
+
the repo still carries the full-length workflows from before 0.14.0: it
|
|
107
|
+
replaces them with the short callers of the pipeline's reusable workflows
|
|
108
|
+
and removes the prompt and script copies only those old workflows read.
|
|
109
|
+
|
|
110
|
+
Then read the output back to the user: what was created, what was skipped,
|
|
111
|
+
what was removed, and any warning it printed (it flags workflows from
|
|
112
|
+
before 0.14.0 and names the flag that replaces them; have the user review
|
|
113
|
+
that diff, since a repo customization becomes a `with:` input in the
|
|
114
|
+
caller).
|
|
115
|
+
Docs: https://app.notion.com/p/31ff837b6270805d8922c4a7c7beb6b0
|
|
116
|
+
|
|
117
|
+
**After a mid-session install, a restart is required — this is a hard stop.**
|
|
118
|
+
Claude Code installs plugins and registers subagents and `.mcp.json` servers
|
|
119
|
+
at session start, so the planner/generator/healer and the `playwright-test`
|
|
120
|
+
browser tools do not exist in the session that just scaffolded them. Do NOT
|
|
121
|
+
work around this: no inlining an agent definition into a general-purpose
|
|
122
|
+
agent, no hand-writing plans or specs from source code — without the browser
|
|
123
|
+
tools that produces unverified selectors, which is exactly what this pipeline
|
|
124
|
+
exists to prevent. Finish Phase 0 (configs, reachable URL), then tell the
|
|
125
|
+
user to restart the session and re-ask; Phase 0 will pass and planning starts
|
|
126
|
+
for real.
|
|
127
|
+
|
|
128
|
+
### Then finish the configuration before planning
|
|
129
|
+
|
|
130
|
+
The scaffold writes templates, not a working setup. Walk these with the user:
|
|
131
|
+
|
|
132
|
+
1. `playwright.config` — `baseURL` for local runs.
|
|
133
|
+
2. `checkly.config` — real `projectName` and `logicalId`, the production
|
|
134
|
+
domain(s) in `environmentVariables`, `testCommand` (see Phase 5), and the
|
|
135
|
+
check-suite `name` — that is what teammates see in the Checkly dashboard
|
|
136
|
+
and in alerts. **Ask the user what to call it** unless the repo makes it
|
|
137
|
+
obvious (a single clear brand or product name); do not silently invent
|
|
138
|
+
one. Also set
|
|
139
|
+
`installCommand: "pnpm install --ignore-scripts"` — Checkly's runner gets a
|
|
140
|
+
bundle of test files, not the repo, so a project postinstall (codegen etc.)
|
|
141
|
+
fails there on missing files. Placeholder values (`my-app`, `example.com`)
|
|
142
|
+
left in place will block Phase 4; local work is unaffected.
|
|
143
|
+
3. A reachable URL for the planner: a running dev server or a deployed
|
|
144
|
+
environment. **Confirm this before Phase 1** — the planner explores a live
|
|
145
|
+
page, and pointing it at an empty or unreachable app produces a plan that
|
|
146
|
+
asserts nothing useful.
|
|
147
|
+
4. **Repository secrets for the workflows**: if the scaffold just created
|
|
148
|
+
`.github/workflows/`, tell the user now — not at merge time — to add the
|
|
149
|
+
repository secrets (GitHub → Settings → Secrets and variables → Actions).
|
|
150
|
+
You cannot add them; a person must. Without them the first PR push and the
|
|
151
|
+
first merge fail CI in ways that look like pipeline bugs.
|
|
152
|
+
- `CHECKLY_API_KEY` — 1Password ("Checkly") first; else Checkly → User
|
|
153
|
+
Settings → API keys. The key is shown once, at creation — tell the user
|
|
154
|
+
to save it to 1Password immediately.
|
|
155
|
+
- `CHECKLY_ACCOUNT_ID` — Checkly → Account Settings → General; also in
|
|
156
|
+
1Password.
|
|
157
|
+
- `VERCEL_AUTOMATION_BYPASS_SECRET` — Vercel → project → Settings →
|
|
158
|
+
Deployment Protection → Protection Bypass for Automation. Per project —
|
|
159
|
+
never copied from another repo.
|
|
160
|
+
- `SLACK_WEBHOOK_URL` — the **org-shared** e2e-channel webhook: paste the
|
|
161
|
+
value from 1Password ("e2e Slack webhook"). Same value in every repo;
|
|
162
|
+
do not walk the user through creating a Slack app or webhook — routing
|
|
163
|
+
to the project channel happens via a Slack rule in Phase 5.
|
|
164
|
+
- `ANTHROPIC_API_KEY` usually needs **no action**: it is an
|
|
165
|
+
organization-level secret inherited by every repo — do not walk the
|
|
166
|
+
user through adding it up front. But it can fail to reach a repo
|
|
167
|
+
(org-secret scoping, or a stale stored value): if a heal run's agent
|
|
168
|
+
step fails to authenticate, have the user add a repository-level
|
|
169
|
+
`ANTHROPIC_API_KEY` — a repo secret with the same name overrides the
|
|
170
|
+
organization one.
|
|
171
|
+
5. **Existing tests under `tests/`** (unit, a11y — the scaffold lists them as
|
|
172
|
+
"outside tests/e2e"): leave `testDir` at `./tests/e2e` and give that suite
|
|
173
|
+
its own Playwright project with its own `testDir` if it should run under
|
|
174
|
+
Playwright at all. **Never widen `testDir` to `./tests`** — that runs the
|
|
175
|
+
other suite in every browser project and mixes the suites. Checkly is
|
|
176
|
+
pinned to `tests/e2e` by `testCommand` either way.
|
|
177
|
+
|
|
178
|
+
## Project test rules
|
|
179
|
+
|
|
180
|
+
These rules apply to **all** agents (generator, healer, and orchestrator).
|
|
181
|
+
Include them verbatim in every Agent prompt to the generator or healer.
|
|
182
|
+
|
|
183
|
+
1. Every logical step MUST have a numbered comment above it
|
|
184
|
+
(e.g. `// 1. Navigate to the homepage`). Preserve existing step comments
|
|
185
|
+
when editing. Add them if missing.
|
|
186
|
+
|
|
187
|
+
2. Never hardcode domains. Use `page.goto("/")` and derive the origin from the
|
|
188
|
+
live page URL.
|
|
189
|
+
|
|
190
|
+
3. Every `test.describe` block MUST include a `beforeEach` that runs shared preview setup
|
|
191
|
+
from `tests/e2e/helpers/preview-consent-setup.js` or `.ts` (`prepareVercelPreviewPage`, and when tests
|
|
192
|
+
start after consent, `gotoPathAndAcceptCookies(page, baseURL, path)` with the correct
|
|
193
|
+
relative path). The scaffold ships `prepareVercelPreviewPage` — it exchanges
|
|
194
|
+
`VERCEL_AUTOMATION_BYPASS_SECRET` for Vercel's deployment-protection bypass cookie on the
|
|
195
|
+
first navigation and is a plain `goto` when the variable is unset. Extend the file with
|
|
196
|
+
project consent logic; do not reinvent it. The helper file extension must match rule 7.
|
|
197
|
+
|
|
198
|
+
4. Never hardcode a single locale's URL pattern. Use a locale config map keyed
|
|
199
|
+
by bare hostname and resolve at runtime. Preview hosts (`*.vercel.app`) are
|
|
200
|
+
never in the map and must fall back to the primary production domain's
|
|
201
|
+
config (overridable via `PREVIEW_LOCALE_HOST`) — an exact-match-only lookup
|
|
202
|
+
skips the whole suite on every PR run.
|
|
203
|
+
|
|
204
|
+
5. After all tests pass locally, verify with
|
|
205
|
+
`BASE_URL=<dev-url> pnpm playwright test` via the terminal tool. If failures
|
|
206
|
+
occur, fix and re-run until green.
|
|
207
|
+
|
|
208
|
+
**Local runs always pin `BASE_URL` on the command line** to the dev server
|
|
209
|
+
confirmed during setup (usually `http://localhost:3000`) — never rely on the
|
|
210
|
+
ambient environment. Repos commonly export `BASE_URL` for the app's own
|
|
211
|
+
purposes, pointed at the deployed site; an unpinned run silently targets
|
|
212
|
+
production, which does not contain the working tree's changes (the feature
|
|
213
|
+
under test, any `data-testid` additions). Deployed URLs enter the pipeline
|
|
214
|
+
only at preview validation and Checkly, always passed explicitly.
|
|
215
|
+
|
|
216
|
+
6. **Test root:** Paths in this skill assume the default `tests/e2e/`, which keeps e2e specs
|
|
217
|
+
clear of unit tests in the same repo. **The repo wins over this default.** Check
|
|
218
|
+
`playwright.config.{ts,mjs}` for `testDir` and list existing `*.spec.*`; if the **e2e**
|
|
219
|
+
specs already live somewhere else (`tests/` flat, `e2e/`, `src/__tests__/`), write there
|
|
220
|
+
instead and read every `tests/e2e/…` path below as that directory. Never split a suite
|
|
221
|
+
across two roots. A non-e2e suite under `tests/` (unit, a11y) is **not** that signal:
|
|
222
|
+
leave `testDir` on the e2e root and give that suite its own Playwright project with its
|
|
223
|
+
own `testDir` — never widen `testDir` to cover both, which runs the other suite in every
|
|
224
|
+
browser project.
|
|
225
|
+
|
|
226
|
+
7. **Spec language (generators only):** Repositories differ — some teams use **JavaScript**
|
|
227
|
+
for Playwright tests (`.spec.js`), others use **TypeScript** (`.spec.ts`). List
|
|
228
|
+
`tests/e2e/**/*.spec.*` and match the prevailing extension. If there are no specs yet, default
|
|
229
|
+
to `.spec.js` unless the project README or the user specifies TypeScript for tests. Helpers
|
|
230
|
+
and seeds must use the same language as specs. Do not add `.spec.ts` in a repo that already
|
|
231
|
+
uses `.spec.js` everywhere (and vice versa).
|
|
232
|
+
|
|
233
|
+
8. **Feature groups (target layout):** Prefer **one spec file per feature group** (e.g.
|
|
234
|
+
`tests/e2e/map/map.spec.js`) with a single `test.describe('<Group name>', …)` and **multiple**
|
|
235
|
+
`test()` blocks — one per plan scenario — sharing one `beforeEach`. Do not default to one
|
|
236
|
+
file per scenario unless scenarios are unrelated. Prefer **lean** tests: assert user-visible
|
|
237
|
+
outcomes and regressions, not every intermediate DOM detail from the plan. Numbered
|
|
238
|
+
comments on **main** user steps only.
|
|
239
|
+
|
|
240
|
+
## Phase 1 — Plan
|
|
241
|
+
|
|
242
|
+
Trigger when: user wants to create tests for a new feature, page, or user flow.
|
|
243
|
+
|
|
244
|
+
1. Ask, if not already clear: which page/flow, which URL, and whether the
|
|
245
|
+
suite targets multiple domains (check `checkly.config` for the list).
|
|
246
|
+
2. Use the **Agent** tool with `subagent_type: "e2e-pipeline:playwright-test-planner"`,
|
|
247
|
+
passing the URL and user flow description in the `prompt` (template below).
|
|
248
|
+
3. The planner saves output to `tests/e2e/<feature>/<name>.plan.md`.
|
|
249
|
+
4. **Decision point:** present the saved plan scenario-by-scenario and ask
|
|
250
|
+
what to keep, drop, or adjust. Do not generate before the user responds.
|
|
251
|
+
|
|
252
|
+
Prompt to forward:
|
|
253
|
+
|
|
254
|
+
```
|
|
255
|
+
Create a test plan for: <FEATURE NAME>
|
|
256
|
+
|
|
257
|
+
Navigate to <URL> and explore the following user flow:
|
|
258
|
+
<USER'S FLOW STEPS>
|
|
259
|
+
|
|
260
|
+
While exploring, verify:
|
|
261
|
+
- Actual selectors (see **Locator strategy** under *Robustness patterns* below)
|
|
262
|
+
- Whether cookie consent or login gates appear
|
|
263
|
+
- DOM structure of key interactive elements
|
|
264
|
+
- If the suite targets **multiple domains**, explore **each** domain the tests will run against
|
|
265
|
+
(see *Multi-domain / multi-locale testing* — the plan must reflect every distinct host or market)
|
|
266
|
+
|
|
267
|
+
Generate a seed file at tests/e2e/<feature>/seed.spec.js or seed.spec.ts (same extension as
|
|
268
|
+
the rest of this repo's specs — see Project test rules §7) that handles the common setup
|
|
269
|
+
(navigation, cookie/auth consent, waiting for key elements) discovered during exploration.
|
|
270
|
+
|
|
271
|
+
Save the plan to tests/e2e/<feature>/<name>.plan.md using planner_save_plan.
|
|
272
|
+
All URLs must use relative paths — never localhost or absolute domains.
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
## Phase 2 — Generate
|
|
276
|
+
|
|
277
|
+
Trigger when: a `tests/e2e/<name>.plan.md` exists and the user wants generated test code.
|
|
278
|
+
|
|
279
|
+
**You (the orchestrating agent) own this step end-to-end.** The human does **not** need to
|
|
280
|
+
invoke the generator separately for each scenario or plan section — you chain **Agent** calls
|
|
281
|
+
to `playwright-test-generator` until the feature group is implemented (see **Important rules**).
|
|
282
|
+
|
|
283
|
+
1. Read `tests/e2e/<feature>/<name>.plan.md` yourself to get the full plan content; never ask the user to paste it.
|
|
284
|
+
2. Use the **Agent** tool with `subagent_type: "e2e-pipeline:playwright-test-generator"` — **once per scenario**
|
|
285
|
+
if building incrementally, **or** pass the **full plan** and all scenarios for the group in one
|
|
286
|
+
prompt if the generator can emit the whole file (**Project test rules** §8)
|
|
287
|
+
3. Pass the **plan content** in the `prompt` (the generator subagent cannot read arbitrary paths from disk)
|
|
288
|
+
4. Include the **project test rules** above in the prompt
|
|
289
|
+
5. If the plan contains a "Recommended data-testid additions" table, include it verbatim — the generator adds those attributes before replaying steps
|
|
290
|
+
6. Target **one spec file per feature group** (e.g. `tests/e2e/map/map.spec.js`) with a shared
|
|
291
|
+
`test.describe` and **multiple** `test()` blocks — merge with `edit` between runs if needed
|
|
292
|
+
7. Tell the user which spec file is being written and when each scenario lands.
|
|
293
|
+
|
|
294
|
+
Prompt to forward (example — adjust per repo):
|
|
295
|
+
|
|
296
|
+
```
|
|
297
|
+
Implement tests from the plan for this feature group. Target layout: one file, one describe, multiple tests (see project test rules §8).
|
|
298
|
+
|
|
299
|
+
- Group / describe: "<TOP-LEVEL PLAN HEADING e.g. Map>"
|
|
300
|
+
- File: tests/e2e/<feature>/<group>.spec.js (or `.spec.ts` per project)
|
|
301
|
+
- Seed: <SEED FILE PATH FROM PLAN>
|
|
302
|
+
- Viewport: <WIDTH>x<HEIGHT>
|
|
303
|
+
|
|
304
|
+
<plan>
|
|
305
|
+
<PASTE full plan OR the scenario block(s) you are implementing this run>
|
|
306
|
+
</plan>
|
|
307
|
+
|
|
308
|
+
If recommended data-testid additions exist, add them to source components before replaying steps.
|
|
309
|
+
|
|
310
|
+
After the spec is written or updated, run
|
|
311
|
+
BASE_URL=<dev-url> pnpm playwright test tests/e2e/<feature>/ (pin the dev server per rule 5).
|
|
312
|
+
|
|
313
|
+
## Project test rules (follow these strictly)
|
|
314
|
+
|
|
315
|
+
<COPY the Project test rules section above into this prompt>
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
## Phase 3 — Run and heal
|
|
319
|
+
|
|
320
|
+
1. Run `BASE_URL=<dev-url> pnpm playwright test tests/e2e/<feature>/`, pinning
|
|
321
|
+
the dev server confirmed in Phase 0. Phases 1–3 always target local: the
|
|
322
|
+
working tree's changes (the feature, any `data-testid` additions) exist
|
|
323
|
+
nowhere else, and an ambient `BASE_URL` export would silently point the run
|
|
324
|
+
at the deployed site. Deployed URLs enter only at Phase 4, always explicit.
|
|
325
|
+
2. Green → Phase 4. Red → use the **Agent** tool with
|
|
326
|
+
`subagent_type: "e2e-pipeline:playwright-test-healer"`, passing the test file path and
|
|
327
|
+
the project test rules (template below). If the healer marks anything
|
|
328
|
+
`test.fixme()`, surface it explicitly — the user decides whether that is
|
|
329
|
+
acceptable.
|
|
330
|
+
|
|
331
|
+
Prompt to forward (always include the rules block):
|
|
332
|
+
|
|
333
|
+
```
|
|
334
|
+
Run and fix the tests in tests/e2e/<name>.spec.js (or `.ts` per project)
|
|
335
|
+
|
|
336
|
+
If any tests fail:
|
|
337
|
+
|
|
338
|
+
- Debug each failure
|
|
339
|
+
- Examine the page state, selectors, and assertions
|
|
340
|
+
- Fix the test code
|
|
341
|
+
- Re-run until all tests pass locally
|
|
342
|
+
|
|
343
|
+
## Project test rules (follow these strictly)
|
|
344
|
+
|
|
345
|
+
<COPY the Project test rules section above into this prompt>
|
|
346
|
+
```
|
|
347
|
+
|
|
348
|
+
## Important rules
|
|
349
|
+
|
|
350
|
+
- **Always delegate via the Agent tool.** Never call `playwright-test/*` tools directly.
|
|
351
|
+
- **Always plan before generating.** Use the planner to discover real selectors first.
|
|
352
|
+
- **Always read the plan file** before passing to the generator. The generator runs in
|
|
353
|
+
isolation — include the plan or scenario steps in the prompt.
|
|
354
|
+
- **You implement the full generate phase.** After plan approval, **you** invoke the
|
|
355
|
+
generator subagent **as many times as needed** (typically once per scenario, sequentially)
|
|
356
|
+
or supply the full multi-scenario prompt — **without** asking the user to run the generator
|
|
357
|
+
for each plan section. A single user request such as "Implement the tests from this plan" is enough.
|
|
358
|
+
- **Run generator subagent calls sequentially.** Never parallel — the MCP browser server is shared.
|
|
359
|
+
- **Do not interrupt.** Sending a message while a generator is running aborts it.
|
|
360
|
+
Wait for completion before proceeding.
|
|
361
|
+
- **data-testid additions are owned by the generator.** When the plan includes a
|
|
362
|
+
"Recommended data-testid additions" table, the generator subagent adds those
|
|
363
|
+
attributes to source components before replaying steps. The orchestrator must
|
|
364
|
+
forward the table verbatim in the generator prompt and must NOT edit source
|
|
365
|
+
components itself.
|
|
366
|
+
- **Present the plan for review** after planning. Unless the user narrows scope, **proceed
|
|
367
|
+
to generate all scenarios** for the agreed feature group (see **Project test rules** §8).
|
|
368
|
+
- **Generator and healer self-verify locally** with
|
|
369
|
+
`BASE_URL=<dev-url> pnpm playwright test` (pinned per **Project test rules** §5).
|
|
370
|
+
Cloud validation via `checkly pw-test` is a separate human step after pushing.
|
|
371
|
+
Only invoke the healer if a generated test fails locally.
|
|
372
|
+
- **Base URL**: local runs pin `BASE_URL=<dev-url>` on the command (**Project
|
|
373
|
+
test rules** §5); the config's localhost fallback is a safety net, not a
|
|
374
|
+
guarantee, because an exported `BASE_URL` overrides it silently.
|
|
375
|
+
- **Plan files** are saved at `tests/e2e/<feature>/<name>.plan.md`.
|
|
376
|
+
- **Test files** follow **Project test rules** §7–8 — typically `tests/e2e/<feature>/<group>.spec.js`
|
|
377
|
+
or `.spec.ts` with one `describe` and multiple tests.
|
|
378
|
+
|
|
379
|
+
## Phase 4 — Preview validation (before merge)
|
|
380
|
+
|
|
381
|
+
1. Auth check (first authenticated command in the pipeline): run
|
|
382
|
+
`pnpm checkly whoami`. If not logged in, have the user run
|
|
383
|
+
`pnpm checkly login` — it opens a browser flow, and the shared team
|
|
384
|
+
credentials are in 1Password (search "Checkly"). Local Playwright runs
|
|
385
|
+
never need this, and CI does not either — it uses the `CHECKLY_API_KEY` /
|
|
386
|
+
`CHECKLY_ACCOUNT_ID` repository secrets.
|
|
387
|
+
2. **Decision point:** ask for the preview deployment URL, and settle how
|
|
388
|
+
Checkly's runners get through Vercel deployment protection. Preferred: the
|
|
389
|
+
project's automation bypass secret (Vercel project settings → Deployment
|
|
390
|
+
Protection; value in 1Password) — the scaffolded helper exchanges it for
|
|
391
|
+
Vercel's bypass cookie on first navigation. Fallback when the project has
|
|
392
|
+
no secret: a share link ("Anyone with the link") as the preview URL.
|
|
393
|
+
3. Run: `pnpm checkly pw-test --env BASE_URL="<preview-url>" --env VERCEL_AUTOMATION_BYPASS_SECRET="<secret>" -- tests/e2e/<feature>/`
|
|
394
|
+
(omit the second `--env` on the share-link fallback). Never write the
|
|
395
|
+
secret into `checkly.config` — deployed monitors run against production
|
|
396
|
+
and do not need it.
|
|
397
|
+
4. Failures here but not locally are usually cloud-environment issues
|
|
398
|
+
(timeouts, consent gates) — heal with that framing, then re-run.
|
|
399
|
+
|
|
400
|
+
The user can skip this phase; note that cloud behavior then goes unverified
|
|
401
|
+
until after merge.
|
|
402
|
+
|
|
403
|
+
## Phase 5 — Merge and deployment
|
|
404
|
+
|
|
405
|
+
The scaffold ships three workflows (seeded once — existing ones are never
|
|
406
|
+
overwritten, except by an explicit `init --update-workflows`). Each is a
|
|
407
|
+
short caller of the matching reusable workflow in the pipeline repository,
|
|
408
|
+
so pipeline releases update the behavior without a change in the repo:
|
|
409
|
+
|
|
410
|
+
- `.github/workflows/pr-playwright-tests.yml` — runs the suite against the
|
|
411
|
+
PR's own Vercel preview on every push (`deployment_status` trigger, so the
|
|
412
|
+
preview is already live and contains the PR's changes), and comments the
|
|
413
|
+
result on the PR.
|
|
414
|
+
- `.github/workflows/checkly-deploy.yml` — when a **production deployment
|
|
415
|
+
succeeds** (`deployment_status` trigger), deploys the checks as Checkly
|
|
416
|
+
monitors. Not on merge: monitors must match what production serves, and a
|
|
417
|
+
merge that adds tests for new `data-testid`s would go red until the release
|
|
418
|
+
carrying them is live — with gated releases that gap can be days. A
|
|
419
|
+
`workflow_dispatch` fallback allows manual runs.
|
|
420
|
+
- `.github/workflows/checkly-heal.yml` — a failing deployed monitor
|
|
421
|
+
dispatches here (via the webhook alert channel below). An agent triages
|
|
422
|
+
first: a production regression or anything needing a behavioral app change
|
|
423
|
+
alerts Slack immediately; a stale test gets fixed and a flaky test gets
|
|
424
|
+
hardened — including behavior-neutral test hooks (`data-testid`) in app
|
|
425
|
+
source when the robust fix needs them — and opened as a PR that a human
|
|
426
|
+
must review. Test-only fixes are verified against production and on
|
|
427
|
+
Checkly's infrastructure; app-side hooks are validated by the PR's own
|
|
428
|
+
preview run (pr-playwright-tests). Inert until the webhook exists.
|
|
429
|
+
|
|
430
|
+
**Before the first merge, the repo needs secrets** (values in 1Password):
|
|
431
|
+
`CHECKLY_API_KEY` and `CHECKLY_ACCOUNT_ID` for the deploy and auto-heal,
|
|
432
|
+
`VERCEL_AUTOMATION_BYPASS_SECRET` for the PR run through deployment
|
|
433
|
+
protection, `SLACK_WEBHOOK_URL` for auto-heal notifications
|
|
434
|
+
(`ANTHROPIC_API_KEY` is inherited from the organization — nothing to add
|
|
435
|
+
unless a heal run fails to authenticate; then a repo-level secret of the
|
|
436
|
+
same name overrides it, see Phase 0).
|
|
437
|
+
If the scaffold just created the workflows, say so explicitly and list the
|
|
438
|
+
secrets — a merge without them fails CI and looks like a pipeline bug.
|
|
439
|
+
|
|
440
|
+
After merge, monitors update once the production deployment goes live — the
|
|
441
|
+
user verifies in the Checkly dashboard (https://app.checklyhq.com/); nothing
|
|
442
|
+
to run by hand. Manual fallback if a repo deleted the deploy workflow:
|
|
443
|
+
`pnpm checkly test --record`, then `pnpm checkly deploy` (requires the
|
|
444
|
+
Phase 4 login).
|
|
445
|
+
|
|
446
|
+
**Alert notifications are not automatic — walk the user through the
|
|
447
|
+
auto-heal webhook.** A failing monitor only shows in the Checkly dashboard
|
|
448
|
+
until an alert channel exists. The alert channel for these suites is a
|
|
449
|
+
**webhook into the auto-heal workflow**, not a direct Slack channel: the
|
|
450
|
+
team's Slack message is written by the pipeline *after* triage (regression
|
|
451
|
+
vs. stale test), so it carries a diagnosis and, for stale tests, the fix PR.
|
|
452
|
+
Set up once per project:
|
|
453
|
+
|
|
454
|
+
1. Confirm the `SLACK_WEBHOOK_URL` repository secret from Phase 0 exists —
|
|
455
|
+
the workflow escalates nothing without it. (`ANTHROPIC_API_KEY` comes
|
|
456
|
+
from the organization automatically — but if the dry run in step 6 ends
|
|
457
|
+
agent-failed with an authentication error, override it with a repo-level
|
|
458
|
+
secret of the same name, per Phase 0.)
|
|
459
|
+
2. The shared `GH_DISPATCH_TOKEN` secret exists in Checkly and covers this
|
|
460
|
+
repo. This is **one-time organization setup, not yours to perform**: the
|
|
461
|
+
token (`checkly-heal-dispatch`, a fine-grained PAT) is created once and
|
|
462
|
+
maintained by its owner, named in 1Password — see "One-time organization
|
|
463
|
+
setup" in the usage guide
|
|
464
|
+
(https://app.notion.com/p/32df837b627080748719c0f94a3aeaaf). Your only
|
|
465
|
+
per-project concern: if this repo is not yet on the token's repository
|
|
466
|
+
list, the webhook channel's test (step 3) fails with a 404 — then ask
|
|
467
|
+
the token owner to widen it (a one-minute edit on their side; the token
|
|
468
|
+
value doesn't change). Do not walk the user through creating a PAT or a
|
|
469
|
+
Checkly secret.
|
|
470
|
+
3. Checkly → Alert channels → "Add more channels" → **Webhook**:
|
|
471
|
+
- Method `POST`, URL
|
|
472
|
+
`https://api.github.com/repos/<org>/<repo>/dispatches`
|
|
473
|
+
- Headers: `Authorization: Bearer {{GH_DISPATCH_TOKEN}}` and
|
|
474
|
+
`Accept: application/vnd.github+json`
|
|
475
|
+
- Body (Checkly's editor lists the available variables — confirm the
|
|
476
|
+
names there):
|
|
477
|
+
|
|
478
|
+
```json
|
|
479
|
+
{
|
|
480
|
+
"event_type": "checkly-alert",
|
|
481
|
+
"client_payload": {
|
|
482
|
+
"check_name": "{{CHECK_NAME}}",
|
|
483
|
+
"check_id": "{{CHECK_ID}}",
|
|
484
|
+
"result_id": "{{CHECK_RESULT_ID}}",
|
|
485
|
+
"result_link": "{{RESULT_LINK}}",
|
|
486
|
+
"alert_type": "{{ALERT_TYPE}}"
|
|
487
|
+
}
|
|
488
|
+
}
|
|
489
|
+
```
|
|
490
|
+
|
|
491
|
+
- Notify on **failure**; enable **reminders** while a check stays failing
|
|
492
|
+
— a reminder re-fires the webhook, the workflow dedupes repeats, and a
|
|
493
|
+
lost first delivery gets retried by the next one. Recovery/degraded
|
|
494
|
+
notifications are ignored by the workflow either way.
|
|
495
|
+
4. Subscriptions: **only the current check**, and **uncheck** "Automatically
|
|
496
|
+
subscribe newly created checks to this alert channel".
|
|
497
|
+
5. **Do not also subscribe a Slack alert channel to these suites.** The
|
|
498
|
+
pipeline is the single alert path; a parallel raw Checkly alert double-pings
|
|
499
|
+
the channel and trains people to ignore one of them.
|
|
500
|
+
6. **One Slack Workflow Builder rule** routes this project's messages from
|
|
501
|
+
the shared e2e channel to the project channel. All notifications post to
|
|
502
|
+
the e2e channel tagged `[e2e:<repo-name>]`; the rule matches the **full
|
|
503
|
+
bracketed tag** — never a short name like `gbk`, which collides with
|
|
504
|
+
other text — and sends the message to the project channel. The sent
|
|
505
|
+
message's template is just the message-text variable (plus the
|
|
506
|
+
link-to-original variable when available, so threads happen on the
|
|
507
|
+
original) — no static prefix text. Have the user add a **second
|
|
508
|
+
manager** to the rule and record it in the rule registry in the e2e
|
|
509
|
+
channel's canvas.
|
|
510
|
+
7. Dry run: GitHub → Actions → "Checkly auto-heal" → Run workflow, with the
|
|
511
|
+
suite's check name. Confirm the run completes and the message shows up in
|
|
512
|
+
the e2e channel and, via the rule, in the project channel (a passing
|
|
513
|
+
check should end as "not reproducible" — summary only, no message — so a
|
|
514
|
+
real dry run is easiest right after any genuine failure).
|
|
515
|
+
|
|
516
|
+
What the user should expect afterwards: a failing monitor produces either a
|
|
517
|
+
`checkly-heal` PR plus a Slack note (stale or flaky test — **review
|
|
518
|
+
required, the PR is never merged automatically**; PRs carrying app-side test
|
|
519
|
+
hooks say so and point at their preview run for validation), or a Slack
|
|
520
|
+
escalation (regression, fix needs a behavioral app change, agent failed). A
|
|
521
|
+
transient blip that doesn't reproduce stays silent by design.
|
|
522
|
+
|
|
523
|
+
## Checkly auto-heal (CI, not this session)
|
|
524
|
+
|
|
525
|
+
Failing deployed monitors are handled by `.github/workflows/checkly-heal.yml`:
|
|
526
|
+
it triages first (production regression → Slack alert; stale test → fix; flaky
|
|
527
|
+
test → harden), may add behavior-neutral test hooks (`data-testid`) to app
|
|
528
|
+
source when the robust fix needs them, and opens a `checkly-heal` PR a human
|
|
529
|
+
must review — app-side hooks are validated by the PR's own preview run. The
|
|
530
|
+
repo's workflow file is a short caller; the triage logic, the agent prompt
|
|
531
|
+
and the healer methodology come from the pipeline's reusable workflow and
|
|
532
|
+
the published package, not from this repo or this plugin. If a user asks
|
|
533
|
+
about a `checkly-heal` PR, that workflow authored it; reviewing one means
|
|
534
|
+
verifying the updated test still describes correct production behavior, not
|
|
535
|
+
that it merely passes.
|
|
536
|
+
|
|
537
|
+
## Conventions to uphold
|
|
538
|
+
|
|
539
|
+
The generator and healer enforce spec-level rules themselves. At the pipeline
|
|
540
|
+
level, additionally keep to:
|
|
541
|
+
|
|
542
|
+
- One spec file per feature group; one `describe`, multiple `test()` blocks
|
|
543
|
+
- Commit specs, plans, seeds, **and** any `data-testid` source edits together
|
|
544
|
+
- Never commit with locally failing tests — heal first or `test.fixme()` with
|
|
545
|
+
the user's sign-off
|
|
@@ -13,9 +13,16 @@ team. You never push, never open PRs, never send notifications.
|
|
|
13
13
|
- `.checkly-heal/result.json` — the raw Checkly check result when the API call
|
|
14
14
|
succeeded: error message, failing test and step, stack trace. May be absent;
|
|
15
15
|
proceed without it if so.
|
|
16
|
-
- `.
|
|
17
|
-
robustness rules.
|
|
18
|
-
|
|
16
|
+
- `.checkly-heal/healer.md` — the `playwright-test-healer` agent definition:
|
|
17
|
+
debugging practice and robustness rules. The workflow copies it here from
|
|
18
|
+
the published pipeline package. Follow its methodology; ignore its
|
|
19
|
+
frontmatter (`tools:` names browser tools this run does not have — use
|
|
20
|
+
`pnpm playwright test` and the trace output instead). The overrides below
|
|
21
|
+
take precedence over anything it says. If the file is absent (a workflow
|
|
22
|
+
from before 0.14.0 that never wrote it), apply the same principles from
|
|
23
|
+
your own knowledge: resilient locators, root causes over timeouts, minimal
|
|
24
|
+
edits — and say in the outcome details that the methodology file was
|
|
25
|
+
missing.
|
|
19
26
|
|
|
20
27
|
## Overrides for this run
|
|
21
28
|
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
name: Deploy Checkly checks
|
|
2
2
|
|
|
3
|
-
# Deploys the e2e suite as Checkly monitors when PRODUCTION
|
|
4
|
-
# merge
|
|
5
|
-
#
|
|
6
|
-
#
|
|
7
|
-
#
|
|
8
|
-
#
|
|
9
|
-
#
|
|
10
|
-
#
|
|
11
|
-
#
|
|
3
|
+
# Deploys the e2e suite as Checkly monitors when a PRODUCTION deployment
|
|
4
|
+
# succeeds (not on merge — monitors must match what production serves).
|
|
5
|
+
# The work happens in the pipeline's reusable workflow, so a pipeline
|
|
6
|
+
# release updates it without a change here. This file owns the triggers.
|
|
7
|
+
# Needs repo secrets CHECKLY_API_KEY, CHECKLY_ACCOUNT_ID (1Password, "Checkly").
|
|
8
|
+
# Alternative trigger, if the repo prefers deploying on merge: replace
|
|
9
|
+
# deployment_status with
|
|
10
|
+
# push:
|
|
11
|
+
# branches: [main]
|
|
12
|
+
# paths: ["tests/e2e/**", "playwright.config.*", "checkly.config.*"]
|
|
13
|
+
# The reusable workflow deploys on any non-deployment_status event.
|
|
12
14
|
on:
|
|
13
15
|
deployment_status:
|
|
14
16
|
workflow_dispatch:
|
|
@@ -19,46 +21,11 @@ concurrency:
|
|
|
19
21
|
|
|
20
22
|
jobs:
|
|
21
23
|
deploy:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
- name: Check out the deployed ref
|
|
31
|
-
uses: actions/checkout@v5
|
|
32
|
-
with:
|
|
33
|
-
ref: ${{ github.event.deployment.ref || github.ref }}
|
|
34
|
-
|
|
35
|
-
- name: Set up pnpm
|
|
36
|
-
uses: pnpm/action-setup@v4
|
|
37
|
-
|
|
38
|
-
- name: Set up Node
|
|
39
|
-
uses: actions/setup-node@v5
|
|
40
|
-
with:
|
|
41
|
-
node-version: 22
|
|
42
|
-
cache: pnpm
|
|
43
|
-
|
|
44
|
-
# --ignore-scripts: only the tests are bundled; project postinstall
|
|
45
|
-
# hooks are not needed and may want CMS tokens CI does not have.
|
|
46
|
-
- name: Install dependencies
|
|
47
|
-
run: pnpm install --frozen-lockfile --ignore-scripts
|
|
48
|
-
|
|
49
|
-
# --force skips the interactive confirmation prompt.
|
|
50
|
-
- name: Deploy checks to Checkly
|
|
51
|
-
env:
|
|
52
|
-
CHECKLY_API_KEY: ${{ secrets.CHECKLY_API_KEY }}
|
|
53
|
-
CHECKLY_ACCOUNT_ID: ${{ secrets.CHECKLY_ACCOUNT_ID }}
|
|
54
|
-
run: pnpm exec checkly deploy --force
|
|
55
|
-
|
|
56
|
-
- name: Write result to job summary
|
|
57
|
-
if: always()
|
|
58
|
-
run: |
|
|
59
|
-
{
|
|
60
|
-
echo "## Checkly deploy"
|
|
61
|
-
echo ""
|
|
62
|
-
echo "- Ref: \`${{ github.event.deployment.ref || github.ref }}\`"
|
|
63
|
-
echo "- Triggered by a successful production deployment"
|
|
64
|
-
} >> "$GITHUB_STEP_SUMMARY"
|
|
24
|
+
uses: why-agency/why-e2e-pipeline/.github/workflows/reusable-checkly-deploy.yml@main
|
|
25
|
+
# Per-repo settings, defaults shown. Uncomment to change.
|
|
26
|
+
# with:
|
|
27
|
+
# node_version: "22"
|
|
28
|
+
# pnpm_version: ""
|
|
29
|
+
# install_command: pnpm install --frozen-lockfile --ignore-scripts
|
|
30
|
+
# validate_before_deploy: false # `checkly test` before deploying
|
|
31
|
+
secrets: inherit
|