@sun-asterisk/sungen 2.4.2 → 2.4.5
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/dist/cli/commands/add.d.ts.map +1 -1
- package/dist/cli/commands/add.js +7 -1
- package/dist/cli/commands/add.js.map +1 -1
- package/dist/cli/index.js +1 -1
- package/dist/generators/test-generator/code-generator.d.ts.map +1 -1
- package/dist/generators/test-generator/code-generator.js +27 -4
- package/dist/generators/test-generator/code-generator.js.map +1 -1
- package/dist/orchestrator/ai-rules-updater.d.ts.map +1 -1
- package/dist/orchestrator/ai-rules-updater.js +2 -0
- package/dist/orchestrator/ai-rules-updater.js.map +1 -1
- package/dist/orchestrator/project-initializer.d.ts +4 -0
- package/dist/orchestrator/project-initializer.d.ts.map +1 -1
- package/dist/orchestrator/project-initializer.js +20 -3
- package/dist/orchestrator/project-initializer.js.map +1 -1
- package/dist/orchestrator/screen-manager.d.ts +9 -0
- package/dist/orchestrator/screen-manager.d.ts.map +1 -1
- package/dist/orchestrator/screen-manager.js +120 -0
- package/dist/orchestrator/screen-manager.js.map +1 -1
- package/dist/orchestrator/templates/ai-instructions/claude-cmd-add-screen.md +22 -19
- package/dist/orchestrator/templates/ai-instructions/claude-cmd-create-test.md +10 -2
- package/dist/orchestrator/templates/ai-instructions/claude-cmd-review.md +5 -0
- package/dist/orchestrator/templates/ai-instructions/claude-cmd-run-test.md +25 -16
- package/dist/orchestrator/templates/ai-instructions/claude-config.md +4 -97
- package/dist/orchestrator/templates/ai-instructions/claude-skill-gherkin-syntax.md +48 -122
- package/dist/orchestrator/templates/ai-instructions/claude-skill-selector-fix.md +172 -25
- package/dist/orchestrator/templates/ai-instructions/claude-skill-tc-generation.md +62 -34
- package/dist/orchestrator/templates/ai-instructions/claude-skill-tc-review.md +19 -14
- package/dist/orchestrator/templates/ai-instructions/claude-skill-test-design-techniques.md +99 -0
- package/dist/orchestrator/templates/ai-instructions/claude-skill-viewpoint.md +151 -64
- package/dist/orchestrator/templates/ai-instructions/copilot-cmd-add-screen.md +21 -15
- package/dist/orchestrator/templates/ai-instructions/copilot-cmd-create-test.md +10 -3
- package/dist/orchestrator/templates/ai-instructions/copilot-cmd-review.md +5 -0
- package/dist/orchestrator/templates/ai-instructions/copilot-cmd-run-test.md +24 -15
- package/dist/orchestrator/templates/ai-instructions/copilot-config.md +4 -97
- package/dist/orchestrator/templates/ai-instructions/github-skill-sungen-gherkin-syntax.md +48 -122
- package/dist/orchestrator/templates/ai-instructions/github-skill-sungen-selector-fix.md +172 -25
- package/dist/orchestrator/templates/ai-instructions/github-skill-sungen-tc-generation.md +63 -29
- package/dist/orchestrator/templates/ai-instructions/github-skill-sungen-tc-review.md +19 -14
- package/dist/orchestrator/templates/ai-instructions/github-skill-sungen-test-design-techniques.md +99 -0
- package/dist/orchestrator/templates/ai-instructions/github-skill-sungen-viewpoint.md +151 -64
- package/dist/orchestrator/templates/readme.md +1 -1
- package/dist/orchestrator/templates/tsconfig.json +21 -0
- package/package.json +1 -1
- package/src/cli/commands/add.ts +8 -1
- package/src/cli/index.ts +1 -1
- package/src/generators/test-generator/code-generator.ts +29 -4
- package/src/orchestrator/ai-rules-updater.ts +2 -0
- package/src/orchestrator/project-initializer.ts +24 -3
- package/src/orchestrator/screen-manager.ts +125 -0
- package/src/orchestrator/templates/ai-instructions/claude-cmd-add-screen.md +22 -19
- package/src/orchestrator/templates/ai-instructions/claude-cmd-create-test.md +10 -2
- package/src/orchestrator/templates/ai-instructions/claude-cmd-review.md +5 -0
- package/src/orchestrator/templates/ai-instructions/claude-cmd-run-test.md +25 -16
- package/src/orchestrator/templates/ai-instructions/claude-config.md +4 -97
- package/src/orchestrator/templates/ai-instructions/claude-skill-gherkin-syntax.md +48 -122
- package/src/orchestrator/templates/ai-instructions/claude-skill-selector-fix.md +172 -25
- package/src/orchestrator/templates/ai-instructions/claude-skill-tc-generation.md +62 -34
- package/src/orchestrator/templates/ai-instructions/claude-skill-tc-review.md +19 -14
- package/src/orchestrator/templates/ai-instructions/claude-skill-test-design-techniques.md +99 -0
- package/src/orchestrator/templates/ai-instructions/claude-skill-viewpoint.md +151 -64
- package/src/orchestrator/templates/ai-instructions/copilot-cmd-add-screen.md +21 -15
- package/src/orchestrator/templates/ai-instructions/copilot-cmd-create-test.md +10 -3
- package/src/orchestrator/templates/ai-instructions/copilot-cmd-review.md +5 -0
- package/src/orchestrator/templates/ai-instructions/copilot-cmd-run-test.md +24 -15
- package/src/orchestrator/templates/ai-instructions/copilot-config.md +4 -97
- package/src/orchestrator/templates/ai-instructions/github-skill-sungen-gherkin-syntax.md +48 -122
- package/src/orchestrator/templates/ai-instructions/github-skill-sungen-selector-fix.md +172 -25
- package/src/orchestrator/templates/ai-instructions/github-skill-sungen-tc-generation.md +63 -29
- package/src/orchestrator/templates/ai-instructions/github-skill-sungen-tc-review.md +19 -14
- package/src/orchestrator/templates/ai-instructions/github-skill-sungen-test-design-techniques.md +99 -0
- package/src/orchestrator/templates/ai-instructions/github-skill-sungen-viewpoint.md +151 -64
- package/src/orchestrator/templates/readme.md +1 -1
- package/src/orchestrator/templates/tsconfig.json +21 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: add-screen
|
|
3
|
-
description: 'Add a new Sungen screen — scaffolds directories and
|
|
3
|
+
description: 'Add a new Sungen screen — scaffolds directories, helps fill spec.md, and can auto-capture a live-page screenshot via Playwright MCP'
|
|
4
4
|
argument-hint: [screen-name] [url-path]
|
|
5
|
-
allowed-tools: Read, Grep, Bash, Glob, AskUserQuestion
|
|
5
|
+
allowed-tools: Read, Grep, Bash, Glob, Edit, Write, AskUserQuestion, mcp__playwright__browser_navigate, mcp__playwright__browser_take_screenshot, mcp__playwright__browser_snapshot
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
You are adding a new Sungen screen for test generation.
|
|
@@ -25,28 +25,31 @@ Run:
|
|
|
25
25
|
sungen add --screen <screen> --path <path>
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
### 2.
|
|
28
|
+
### 2. Prepare requirements
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
Use `AskUserQuestion` to let the user choose how to prepare requirements — this is the foundation for high-quality test generation:
|
|
31
31
|
|
|
32
|
-
-
|
|
33
|
-
-
|
|
34
|
-
-
|
|
32
|
+
- **Fill `spec.md` + capture live-page screenshot** (Recommended) — best test quality
|
|
33
|
+
- **Fill `spec.md` only** — app not live yet, or no need for visuals
|
|
34
|
+
- **Capture live-page screenshot only** — spec will come later
|
|
35
|
+
- **Skip requirements prep** — proceed to `/sungen:create-test` immediately
|
|
35
36
|
|
|
36
|
-
|
|
37
|
+
**If "Fill `spec.md`" is chosen**: open `qa/screens/<screen>/requirements/spec.md` and help the user fill sections, fields, validation rules, business rules, and states.
|
|
37
38
|
|
|
38
|
-
|
|
39
|
+
**If "Capture live-page screenshot" is chosen**:
|
|
40
|
+
1. Read `baseURL` from `playwright.config.ts` (fall back to `APP_BASE_URL` env, then ask the user).
|
|
41
|
+
2. `browser_navigate` to `<baseURL><path>`.
|
|
42
|
+
3. If redirected to login → ask the user to log in manually in the MCP browser, wait for confirmation, then re-navigate. (No auth persistence needed here — that's handled by Phase 0.5 in `sungen-selector-fix` when tests run.)
|
|
43
|
+
4. `browser_take_screenshot` with `filename: "qa/screens/<screen>/requirements/ui/<screen>.png"`.
|
|
44
|
+
5. If the screen has multiple important states (empty, loaded, error, modal open), offer additional captures named `<screen>-<state>.png`.
|
|
39
45
|
|
|
40
|
-
If
|
|
46
|
+
If the user has additional UI designs (Figma exports, mockups), suggest copying them to `requirements/ui/`.
|
|
41
47
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
```
|
|
48
|
+
### 3. Next steps
|
|
49
|
+
|
|
50
|
+
Tell the user what was created, then use `AskUserQuestion` to offer next steps:
|
|
46
51
|
|
|
47
|
-
|
|
52
|
+
- **`/sungen:create-test <screen>`** — Create test cases from requirements/designs (Recommended)
|
|
53
|
+
- **Done for now** — I'll come back later
|
|
48
54
|
|
|
49
|
-
If the
|
|
50
|
-
- Fill `requirements/spec.md` with screen specs (if not done)
|
|
51
|
-
- Run `/sungen:create-test <screen>` to create test cases
|
|
52
|
-
- Run `/sungen:run-test <screen>` to generate selectors, compile, and run tests
|
|
55
|
+
If user picks `/sungen:create-test`, **you MUST use the Skill tool** to invoke it. Do NOT generate test cases yourself — the skill auto-loads `sungen-gherkin-syntax` and `sungen-tc-generation`.
|
|
@@ -20,14 +20,22 @@ Parse **screen** from `$ARGUMENTS`. If missing, ask the user.
|
|
|
20
20
|
3. **Read requirements** — check `qa/screens/<screen>/requirements/`:
|
|
21
21
|
- If `spec.md` exists → read it as PRIMARY source (sections, fields, validation rules, business rules, states).
|
|
22
22
|
- If `ui/` has images → read them for visual context (layout, element positions, states).
|
|
23
|
-
- If `
|
|
23
|
+
- If `test-viewpoint.md` exists → read it. If it only contains HTML comments (scaffold template), use `AskUserQuestion` to ask:
|
|
24
|
+
- **Fill test-viewpoint.md first** — I'll help you identify edge cases, known issues, and design decisions for this screen before generating tests
|
|
25
|
+
- **Continue without it** — generate tests from spec and other sources only
|
|
24
26
|
- Summarize what you found in requirements and present to the user.
|
|
25
27
|
4. **Screen input** (supplements requirements, or is primary source if no requirements):
|
|
26
28
|
- Use `AskUserQuestion` to ask: **Figma design** (provide Figma URL — recommended), **UI images** (screenshots/mockups in `requirements/ui/`), or **Live page scan** (optional, via Playwright MCP)?
|
|
27
29
|
- Recommend Figma or UI images first. Live page scan is optional — useful to verify specs vs actual UI or capture real data.
|
|
30
|
+
- If live page scan: `browser_navigate` → ONE `browser_snapshot`. If auth redirect → ask user to log in manually. Never use `browser_run_code` or `browser_evaluate` to inject cookies.
|
|
28
31
|
- If exploring, verify and supplement requirements — flag any discrepancies found.
|
|
29
32
|
5. Follow the `sungen-tc-generation` skill for section identification, viewpoint generation, and output format. When requirements exist, use the "Requirements-Driven Generation" strategy.
|
|
30
33
|
6. Generate or update `.feature` + `test-data.yaml` following `sungen-gherkin-syntax` and `sungen-tc-generation` skills.
|
|
31
|
-
7. Show summary
|
|
34
|
+
7. Show summary, then use `AskUserQuestion` to offer next steps:
|
|
35
|
+
|
|
36
|
+
- **`/sungen:review <screen>`** — Review syntax, coverage, viewpoint quality (Recommended)
|
|
37
|
+
- **`/sungen:run-test <screen>`** — Skip review, generate selectors and run tests now
|
|
38
|
+
- **`/sungen:create-test <screen>`** — Add more test cases for another section/viewpoint
|
|
39
|
+
- **Done for now** — I'll come back later
|
|
32
40
|
|
|
33
41
|
**No selectors.yaml** — selectors are generated during `/sungen:run-test`.
|
|
@@ -19,3 +19,8 @@ Parse **screen** from `$ARGUMENTS`. If missing, ask the user.
|
|
|
19
19
|
2. Follow the `sungen-tc-review` skill — score 3 dimensions: Syntax (30pts), Coverage (40pts), Viewpoint (30pts). Use `sungen-viewpoint` for pattern checklists.
|
|
20
20
|
3. Output review report per `sungen-tc-review` format. **>= 60%**: PASS. **< 60%**: FAIL with recommendations.
|
|
21
21
|
4. If FAIL and user confirms → update test cases following `sungen-gherkin-syntax` and `sungen-tc-generation` skills, then re-review.
|
|
22
|
+
5. After PASS (or user decides to proceed), use `AskUserQuestion` to offer next steps:
|
|
23
|
+
|
|
24
|
+
- **`/sungen:run-test <screen>`** — Generate selectors, compile, and run tests (Recommended)
|
|
25
|
+
- **`/sungen:create-test <screen>`** — Add more test cases before running
|
|
26
|
+
- **Done for now** — I'll come back later
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: run-test
|
|
3
|
-
description: '
|
|
3
|
+
description: 'Generate selectors + auth state via Playwright MCP, compile, and run Playwright tests — auto-fixes selectors on failure'
|
|
4
4
|
argument-hint: [screen-name]
|
|
5
|
-
allowed-tools: Read, Grep, Bash, Glob, Edit, AskUserQuestion
|
|
5
|
+
allowed-tools: Read, Grep, Bash, Glob, Edit, Write, AskUserQuestion, mcp__playwright__browser_navigate, mcp__playwright__browser_snapshot, mcp__playwright__browser_take_screenshot, mcp__playwright__browser_wait_for, mcp__playwright__browser_evaluate, mcp__playwright__browser_run_code, mcp__playwright__browser_storage_state, mcp__playwright__browser_set_storage_state
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
## Role
|
|
@@ -13,20 +13,29 @@ You are a **Senior Developer**. Use `sungen-selector-fix`, `sungen-selector-keys
|
|
|
13
13
|
|
|
14
14
|
Parse **screen** from `$ARGUMENTS`. If missing, ask the user.
|
|
15
15
|
|
|
16
|
-
##
|
|
16
|
+
## Pre-run (phased — per `sungen-selector-fix` skill)
|
|
17
17
|
|
|
18
|
-
1. Verify `qa/screens/<screen>/` has `.feature` + `test-data.yaml
|
|
19
|
-
2.
|
|
20
|
-
3. `sungen
|
|
21
|
-
4. `
|
|
22
|
-
5. If all pass → done
|
|
18
|
+
1. Verify `qa/screens/<screen>/` has `.feature` + `test-data.yaml`.
|
|
19
|
+
2. **Phase 0 — Selector Pre-gen**: if `selectors.yaml` is missing/empty or doesn't cover the feature file's `[Reference]`s, run Phase 0 from `sungen-selector-fix` — confirm with user, `browser_navigate` → one `browser_snapshot` → merge YAML entries.
|
|
20
|
+
3. **Phase 0.5 — Auth Persistence**: if the feature has `@auth:<role>` tags and `specs/.auth/<role>.json` is missing/expired, run Phase 0.5 from `sungen-selector-fix` — user logs in manually in MCP browser → `browser_storage_state` → `specs/.auth/<role>.json`. Offer `sungen makeauth <role>` as CLI fallback only if `browser_storage_state` isn't available in this MCP version.
|
|
21
|
+
4. Compile: `sungen generate --screen <screen>`.
|
|
23
22
|
|
|
24
|
-
##
|
|
23
|
+
## Run & Fix (phased — per `sungen-selector-fix` skill)
|
|
25
24
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
25
|
+
5. **Phase 1 — Smoke Check**: Run first 5 `@critical`/`@high` scenarios only. If failures → diagnose, fix fundamentals (page selector, auth, base @steps), re-run. Max 2 attempts. If still broken → ask user.
|
|
26
|
+
6. **Phase 2 — Priority Wave**: Run all `@critical` + `@high` scenarios. Fix only failures from this wave. Max 2 attempts. Shared selectors fixed here cascade to later phases.
|
|
27
|
+
7. **Phase 3 — Full Run**: Run all tests. Fix only **new** failures (elements unique to `@normal`/`@low`). Max 1 attempt. Don't loop on low-priority failures.
|
|
28
|
+
8. **Phase 4 — Regression**: One final full run. Report results. No more fix loops.
|
|
29
|
+
|
|
30
|
+
## Next steps
|
|
31
|
+
|
|
32
|
+
After showing results, use `AskUserQuestion` to offer next steps:
|
|
33
|
+
|
|
34
|
+
If all tests **passed**:
|
|
35
|
+
- **`/sungen:create-test <screen>`** — Add more test cases (Recommended)
|
|
36
|
+
- **Done** — All tests passed, I'm finished
|
|
37
|
+
|
|
38
|
+
If tests **failed** (after retries):
|
|
39
|
+
- **`/sungen:run-test <screen>`** — Re-run after manual fixes
|
|
40
|
+
- **`/sungen:create-test <screen>`** — Revise test cases
|
|
41
|
+
- **Done for now** — I'll fix manually later
|
|
@@ -10,8 +10,9 @@ You generate 3 files for sungen — a Gherkin compiler that produces Playwright
|
|
|
10
10
|
| `sungen-gherkin-syntax` | All 70+ step patterns, selector types, YAML key rules, tags, element types |
|
|
11
11
|
| `sungen-error-mapping` | Playwright & sungen error → fix mapping |
|
|
12
12
|
| `sungen-tc-generation` | Test case generation strategy, output format |
|
|
13
|
+
| `sungen-test-design-techniques` | EP, BVA, Decision Table, State Transition — systematic scenario generation |
|
|
13
14
|
| `sungen-tc-review` | Review scoring, quality rules, checklist |
|
|
14
|
-
| `sungen-viewpoint` |
|
|
15
|
+
| `sungen-viewpoint` | 10 UI patterns x 4 viewpoints — coverage checklists |
|
|
15
16
|
| `sungen-selector-keys` | YAML key generation from `[Reference]` names, suffixes, lookup priority |
|
|
16
17
|
| `sungen-selector-fix` | Selector generation from live page, auto-fix strategy |
|
|
17
18
|
|
|
@@ -26,6 +27,8 @@ You generate 3 files for sungen — a Gherkin compiler that produces Playwright
|
|
|
26
27
|
|
|
27
28
|
**Order:** add-screen → create-test → review → run-test.
|
|
28
29
|
|
|
30
|
+
After each command completes, use `AskUserQuestion` to present the next actions as selectable options. Never just print text — always give clickable choices so the user can continue the workflow seamlessly.
|
|
31
|
+
|
|
29
32
|
## File Structure
|
|
30
33
|
|
|
31
34
|
```
|
|
@@ -38,102 +41,6 @@ qa/screens/<screen-name>/
|
|
|
38
41
|
└── ui/ # Screenshots, mockups
|
|
39
42
|
```
|
|
40
43
|
|
|
41
|
-
## Complete Example
|
|
42
|
-
|
|
43
|
-
Given a login page, here are the 3 files you generate:
|
|
44
|
-
|
|
45
|
-
**qa/screens/login/features/login.feature**
|
|
46
|
-
```gherkin
|
|
47
|
-
@no-auth
|
|
48
|
-
Feature: Login Screen
|
|
49
|
-
|
|
50
|
-
Scenario: VP-LOGIC-001 Successful login
|
|
51
|
-
Given User is on [login] page
|
|
52
|
-
When User fill [Email] field with {{email}}
|
|
53
|
-
And User fill [Password] field with {{password}}
|
|
54
|
-
And User click [Submit] button
|
|
55
|
-
Then User see [Welcome] heading with {{welcome_text}}
|
|
56
|
-
And User see [Dashboard] link
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
**qa/screens/login/selectors/login.yaml**
|
|
60
|
-
```yaml
|
|
61
|
-
login:
|
|
62
|
-
type: 'page'
|
|
63
|
-
value: '/login'
|
|
64
|
-
|
|
65
|
-
email:
|
|
66
|
-
type: 'placeholder'
|
|
67
|
-
value: 'Enter your email'
|
|
68
|
-
|
|
69
|
-
password:
|
|
70
|
-
type: 'placeholder'
|
|
71
|
-
value: 'Enter your password'
|
|
72
|
-
|
|
73
|
-
submit:
|
|
74
|
-
type: 'role'
|
|
75
|
-
value: 'button'
|
|
76
|
-
name: 'Submit'
|
|
77
|
-
|
|
78
|
-
welcome:
|
|
79
|
-
type: 'role'
|
|
80
|
-
value: 'heading'
|
|
81
|
-
name: 'Welcome'
|
|
82
|
-
|
|
83
|
-
dashboard:
|
|
84
|
-
type: 'role'
|
|
85
|
-
value: 'link'
|
|
86
|
-
name: 'Dashboard'
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
**qa/screens/login/test-data/login.yaml**
|
|
90
|
-
```yaml
|
|
91
|
-
email: 'admin@example.com'
|
|
92
|
-
password: 'password123'
|
|
93
|
-
welcome_text: 'Welcome back'
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
## Critical Gherkin Rules (quick reference)
|
|
97
|
-
|
|
98
|
-
1. **NEVER write `is visible`** — `User see [T] type` already asserts visibility. Only use `is hidden` to assert absence.
|
|
99
|
-
2. **Use `@no-auth` for pre-login pages** (login, register, forgot-password). Use `@auth:role` for authenticated pages.
|
|
100
|
-
3. **Scenario names use VP prefix** — `VP-UI-001`, `VP-VAL-001`, `VP-LOGIC-001`, `VP-SEC-001`.
|
|
101
|
-
4. **Values use `{{snake_case}}`** — never hardcode data in `.feature`. All values go in `test-data.yaml`.
|
|
102
|
-
5. **Selectors are deferred** — `selectors.yaml` is generated during `/sungen-run-test` from the live page, NOT during `/sungen-create-test`.
|
|
103
|
-
6. **Every `{{variable}}` must exist in `test-data.yaml`** — missing variables cause compile failures.
|
|
104
|
-
7. **Assertion type is determined by element type** — input types (`field`, `textarea`, `search`, `dropdown`, `slider`, `date-picker`) → `toHaveValue()`. Everything else → `toHaveText()`. Wrong type = wrong assertion = test failure.
|
|
105
|
-
|
|
106
|
-
## Using Playwright MCP to explore pages
|
|
107
|
-
|
|
108
|
-
When exploring a page to generate test files:
|
|
109
|
-
1. Read `playwright.config.ts` for `baseURL`
|
|
110
|
-
2. Use `browser_navigate` to open `baseURL + /path`
|
|
111
|
-
3. Use `browser_snapshot` to see all elements
|
|
112
|
-
4. Generate the 3 files from the snapshot
|
|
113
|
-
|
|
114
|
-
### Allowed MCP tools
|
|
115
|
-
|
|
116
|
-
| Tool | Use for |
|
|
117
|
-
|---|---|
|
|
118
|
-
| `browser_navigate` | Open pages |
|
|
119
|
-
| `browser_snapshot` | Capture all accessible elements |
|
|
120
|
-
| `browser_click` | Interact with elements (open dialogs, dropdowns) |
|
|
121
|
-
| `browser_fill_form` | Fill form fields |
|
|
122
|
-
| `browser_evaluate` | **Read-only DOM queries only** (e.g., detect `data-testid` attributes) |
|
|
123
|
-
|
|
124
|
-
**NEVER use `browser_run_code`** — fails with `require is not defined`.
|
|
125
|
-
|
|
126
|
-
### Authentication via MCP
|
|
127
|
-
|
|
128
|
-
1. `browser_navigate` to `baseURL`
|
|
129
|
-
2. If redirected to login, ask the user to log in manually:
|
|
130
|
-
> "This page requires login. Please log in using the browser. Confirm when you're done."
|
|
131
|
-
3. Once confirmed, `browser_navigate` to the target page and take `browser_snapshot`
|
|
132
|
-
|
|
133
|
-
**Never use `sungen makeauth`.** Always let the user log in manually via the MCP browser.
|
|
134
|
-
**NEVER use `browser_evaluate` to inject cookies or localStorage** — causes size limit issues and server 500 errors. Use `browser_evaluate` ONLY for read-only DOM queries.
|
|
135
|
-
**Minimize navigations** — take one snapshot per page, do not navigate repeatedly.
|
|
136
|
-
|
|
137
44
|
## CLI Commands
|
|
138
45
|
|
|
139
46
|
```bash
|
|
@@ -27,150 +27,68 @@ AND → inherits from preceding keyword
|
|
|
27
27
|
|
|
28
28
|
## Step Patterns (70 patterns)
|
|
29
29
|
|
|
30
|
-
### Setup
|
|
30
|
+
### Setup / Form / Interaction
|
|
31
31
|
|
|
32
32
|
```
|
|
33
|
-
User is on [T] page
|
|
34
|
-
User
|
|
35
|
-
User
|
|
33
|
+
User is on [T] page | page with {{v}} | dialog
|
|
34
|
+
User fill [T] field | textarea | search | slider | date-picker with {{v}}
|
|
35
|
+
User fill [T] uploader with {{f}}
|
|
36
|
+
User clear [T] field
|
|
37
|
+
User check [T] checkbox | toggle | radio
|
|
38
|
+
User uncheck [T] checkbox | toggle
|
|
39
|
+
User select [T] dropdown with {{v}}
|
|
40
|
+
User click [T] button | tab | column | breadcrumb
|
|
41
|
+
User click [T] row with {{v}}
|
|
42
|
+
User double click [T] element
|
|
43
|
+
User hover [T] icon | row
|
|
44
|
+
User drag [T] to [T2]
|
|
45
|
+
User expand | collapse [T] row
|
|
36
46
|
```
|
|
37
47
|
|
|
38
|
-
|
|
48
|
+
**click + with {{Value}} rule**: NO value for static (`button`, `link`, `icon`, `tab`). WITH value only for dynamic lists (`row`, `item`, `card`, `option`).
|
|
39
49
|
|
|
40
|
-
|
|
41
|
-
User fill [T] field with {{v}} # text input
|
|
42
|
-
User fill [T] textarea with {{v}} # multiline input
|
|
43
|
-
User fill [T] search with {{v}} # search input
|
|
44
|
-
User fill [T] slider with {{v}} # set slider value
|
|
45
|
-
User fill [T] date picker with {{v}} # date input
|
|
46
|
-
User clear [T] field # clear input
|
|
47
|
-
User check [T] checkbox # check
|
|
48
|
-
User check [T] toggle # toggle on (same as check)
|
|
49
|
-
User check [T] radio # select radio
|
|
50
|
-
User uncheck [T] checkbox # uncheck
|
|
51
|
-
User uncheck [T] toggle # toggle off
|
|
52
|
-
User select [T] dropdown with {{v}} # select option
|
|
53
|
-
User fill [T] uploader with {{f}} # file upload
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
### Interaction
|
|
57
|
-
|
|
58
|
-
```
|
|
59
|
-
User click [T] button # click (static element, no value)
|
|
60
|
-
User click [T] row with {{v}} # click dynamic list item (row/item/card/option)
|
|
61
|
-
User click [T] tab # switch tab
|
|
62
|
-
User click [T] column # sort column
|
|
63
|
-
User click [T] breadcrumb # navigate breadcrumb
|
|
64
|
-
User double click [T] element # double click
|
|
65
|
-
User hover [T] icon # hover (must have see/click after)
|
|
66
|
-
User hover [T] row # hover row for hidden actions
|
|
67
|
-
User drag [T] to [T2] # drag and drop
|
|
68
|
-
User expand [T] row # expand (aria-expanded)
|
|
69
|
-
User collapse [T] row # collapse (aria-expanded)
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
#### click + with {{Value}} rule
|
|
73
|
-
|
|
74
|
-
- **NO value** for static elements: `button`, `link`, `icon`, `tab`, `toggle`
|
|
75
|
-
- **WITH value** only for dynamic lists: `row`, `item`, `card`, `option`
|
|
76
|
-
|
|
77
|
-
### Browser Alert (system dialog)
|
|
50
|
+
### Alert / Keyboard / Wait / Scroll
|
|
78
51
|
|
|
79
52
|
```
|
|
80
|
-
User click [OK] alert
|
|
81
|
-
User
|
|
82
|
-
User
|
|
83
|
-
User
|
|
53
|
+
User click [OK | Cancel] alert
|
|
54
|
+
User fill [T] alert with {{v}}
|
|
55
|
+
User see [message text] alert
|
|
56
|
+
User press Escape key | Enter on [T] field
|
|
57
|
+
User wait for N seconds | [T] dialog | [T] dialog is STATE | [T] page
|
|
58
|
+
User scroll to [T] section
|
|
59
|
+
User switch to [T] frame | [main] frame
|
|
84
60
|
```
|
|
85
61
|
|
|
86
62
|
> Alert steps must appear BEFORE the action that triggers the dialog.
|
|
87
63
|
|
|
88
|
-
###
|
|
64
|
+
### Assertions (8 patterns → determines Playwright assertion)
|
|
89
65
|
|
|
90
66
|
```
|
|
91
|
-
User
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
User wait for [T] dialog # wait for element
|
|
100
|
-
User wait for [T] dialog is STATE # wait for state
|
|
101
|
-
User wait for [T] dialog with {{v}} # wait for element with text
|
|
102
|
-
User wait for [T] page # wait for navigation
|
|
103
|
-
User wait for [T] message # wait for toast/feedback
|
|
104
|
-
User wait for [T] button # wait for button to appear
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
### Scroll & Frame
|
|
108
|
-
|
|
109
|
-
```
|
|
110
|
-
User scroll to [T] section # scroll into view
|
|
111
|
-
User switch to [T] frame # enter iframe
|
|
112
|
-
User switch to [main] frame # exit iframe
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
### Assertions (8 verify patterns)
|
|
116
|
-
|
|
117
|
-
```
|
|
118
|
-
# 1. Visibility
|
|
119
|
-
User see [T] message # visible (default — NEVER add "is visible")
|
|
120
|
-
User see [T] modal is hidden # hidden
|
|
121
|
-
|
|
122
|
-
# 2. Text Content (exact full match — toHaveText)
|
|
123
|
-
User see [T] message with {{v}} # exact text match
|
|
124
|
-
User see [T] header with {{v}} # heading text
|
|
125
|
-
User see [T] label with {{v}} # label text
|
|
126
|
-
|
|
127
|
-
# 3. Partial Text Match (toContainText)
|
|
128
|
-
User see [T] text contains {{v}} # partial text match
|
|
129
|
-
|
|
130
|
-
# 4. Input Value (toHaveValue)
|
|
131
|
-
User see [T] field with {{v}} # input value
|
|
132
|
-
User see [T] dropdown with {{v}} # selected value
|
|
133
|
-
User see [T] date picker with {{v}} # date value
|
|
134
|
-
User see [T] search with {{v}} # search input value
|
|
135
|
-
User see [T] slider with {{v}} # slider value
|
|
136
|
-
|
|
137
|
-
# 5. Component State
|
|
138
|
-
User see [T] button is disabled # state assertion
|
|
139
|
-
User see [T] checkbox is checked # checked state
|
|
140
|
-
User see [T] toggle is unchecked # unchecked state
|
|
141
|
-
User see [T] dialog with {{v}} is hidden # text + state combined
|
|
142
|
-
|
|
143
|
-
# 6. Attribute (toHaveAttribute — when selector YAML has `attribute` field)
|
|
144
|
-
User see [T] image with {{v}} # image src
|
|
145
|
-
User see [T] link with {{v}} # link href
|
|
146
|
-
|
|
147
|
-
# 7. Count
|
|
148
|
-
User see [T] row with {{count}} # element count
|
|
149
|
-
|
|
150
|
-
# 8. Page Context
|
|
151
|
-
User see [T] page # URL assertion
|
|
67
|
+
# 1. Visibility: User see [T] type (NEVER add "is visible") | is hidden
|
|
68
|
+
# 2. Text (toHaveText): User see [T] message | header | label with {{v}}
|
|
69
|
+
# 3. Partial (toContainText): User see [T] text contains {{v}}
|
|
70
|
+
# 4. Input (toHaveValue): User see [T] field | dropdown | date-picker | search | slider with {{v}}
|
|
71
|
+
# 5. State: User see [T] button is disabled | checkbox is checked | dialog with {{v}} is hidden
|
|
72
|
+
# 6. Attribute (toHaveAttribute): User see [T] image | link with {{v}}
|
|
73
|
+
# 7. Count: User see [T] row with {{count}}
|
|
74
|
+
# 8. Page: User see [T] page
|
|
152
75
|
```
|
|
153
76
|
|
|
154
77
|
### Table
|
|
155
78
|
|
|
156
79
|
```
|
|
157
|
-
User see [Col] column in [Table] table
|
|
158
|
-
User see [Ref] row in [Table] table with {{v}}
|
|
159
|
-
User see [Ref] row in [Table] table with {{v}} is hidden
|
|
160
|
-
User see [Table] table with {{count}}
|
|
161
|
-
User see [
|
|
162
|
-
User
|
|
163
|
-
User
|
|
164
|
-
User see [Table] table match data: # exact table match (inline DataTable)
|
|
80
|
+
User see [Col] column in [Table] table
|
|
81
|
+
User see [Ref] row in [Table] table with {{v}}
|
|
82
|
+
User see [Ref] row in [Table] table with {{v}} is hidden
|
|
83
|
+
User see [Table] table with {{count}} | is empty
|
|
84
|
+
User see [Col] column with {{v}}
|
|
85
|
+
User click [Act] button in [Table] table with {{v}}
|
|
86
|
+
User see [Table] table match data:
|
|
165
87
|
| Header1 | Header2 |
|
|
166
88
|
| {{value1}} | {{value2}} |
|
|
167
89
|
```
|
|
168
90
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
Row scope: `see [Ref] row in [Table] table with {{v}}` defines `tableRow`. Subsequent `see [Col] column with {{v}}` checks the cell in that row. With `columns` config → exact `nth(index)`, without → `filter({ hasText })`.
|
|
172
|
-
|
|
173
|
-
Table match data: `see [Table] table match data:` followed by a Cucumber DataTable. First row = headers, remaining rows = expected data. Uses **filter-based matching** — verifies rows containing expected values exist, resilient to data changes, extra rows, and row reordering. Use `{{variable}}` for cell values.
|
|
91
|
+
Row scope: `see [Ref] row in [Table] table with {{v}}` enters scope. Subsequent `see [Col] column with {{v}}` checks cell in that row. Use `table match data:` for multi-row verification.
|
|
174
92
|
|
|
175
93
|
### States
|
|
176
94
|
|
|
@@ -223,6 +141,10 @@ Options: `nth` `exact` `scope` `match` `variant` `frame` `contenteditable` `colu
|
|
|
223
141
|
| `@auto` | Standard scenario, ready for automation |
|
|
224
142
|
| `@manual` | Skip in generation |
|
|
225
143
|
| `@smoke` / `@regression` | Test suite grouping |
|
|
144
|
+
| `@critical` | Priority: system unusable if fails (login, auth, core CRUD) |
|
|
145
|
+
| `@high` | Priority: major feature broken (required validation, key business rules) |
|
|
146
|
+
| `@normal` | Priority: degraded experience (UI layout, secondary flows) |
|
|
147
|
+
| `@low` | Priority: minor/cosmetic (tooltips, hover states, empty states) |
|
|
226
148
|
| `@auth:role` | Use auth storage state for role |
|
|
227
149
|
| `@no-auth` | Disable inherited auth |
|
|
228
150
|
| `@steps:name` | Define reusable step block (base scenario) |
|
|
@@ -232,6 +154,8 @@ Options: `nth` `exact` `scope` `match` `variant` `frame` `contenteditable` `colu
|
|
|
232
154
|
|
|
233
155
|
- Tool executes **only Given→When** of `@steps` scenario (skips Then)
|
|
234
156
|
- The `Given` in `@extend` scenario is the **entry assertion** (confirms state after base steps)
|
|
157
|
+
- **Entry assertion MUST use `Given User is on [X] type`** — NEVER `Given User see [X] type`
|
|
158
|
+
- `Given` keyword ONLY allows `is on` action. `see` = `Then` only.
|
|
235
159
|
- If `@steps` scenario fails, `@extend` scenario is **skipped**
|
|
236
160
|
- Name format: `snake_case` or `kebab-case` with module prefix: `@steps:kudos__open_modal`
|
|
237
161
|
|
|
@@ -240,6 +164,8 @@ Options: `nth` `exact` `scope` `match` `variant` `frame` `contenteditable` `colu
|
|
|
240
164
|
| Error | Wrong | Correct |
|
|
241
165
|
|---|---|---|
|
|
242
166
|
| Wrong keyword | `Given User click [T] button` | `When User click [T] button` |
|
|
167
|
+
| `see` after Given | `Given User see [T] heading with {{v}}` | `Then User see [T] heading with {{v}}` (or `Given User is on [T] page` for entry assertion) |
|
|
168
|
+
| Name ≠ step type | Scenario name says "modal" but step uses `dialog` | Use the **same element type** in both: "...dialog opens" + `[X] dialog` |
|
|
243
169
|
| Wrong action for type | `When User click [T] checkbox` | `When User check [T] checkbox` |
|
|
244
170
|
| press wrong target | `When User press [Submit] button` | `When User press Enter key` |
|
|
245
171
|
| uncheck radio | `When User uncheck [Male] radio` | `When User check [Female] radio` |
|