@sun-asterisk/sungen 2.1.1 → 2.2.0

package/dist/orchestrator/templates/ai-instructions/github-skill-sungen-tc-generation.md

@@ -0,0 +1,256 @@
+---
+name: sungen-tc-generation
+description: 'Exhaustive test case generation strategy — section-focused, 20+ scenarios per viewpoint per section, Gherkin + test-data only, no selectors. Use this when creating test cases for a screen with Gherkin scenarios.'
+user-invocable: false
+---
+
+## Test Case Generation Strategy
+
+### Goal
+
+Generate **focused, high-quality test cases per screen section** with **at least 20 scenarios per viewpoint category**. Output only `.feature` and `test-data.yaml` — selectors are deferred to `/sungen:make-test`.
+
+### Update Mode (existing test cases)
+
+When the `.feature` file already has scenarios, read it first and summarize what exists:
+
+> This screen already has **57 scenarios**:
+> - Section: Filters & Search — 22 scenarios (UI: 7, VAL: 8, LOGIC: 5, SEC: 2)
+> - Section: User Table — 23 scenarios (UI: 13, LOGIC: 11, SEC: 3)
+> - Section: Pagination — 12 scenarios (UI: 4, LOGIC: 6, SEC: 2)
+>
+> What would you like to do?
+> 1. **Add new sections** — keep existing, add tests for uncovered sections
+> 2. **Add viewpoints to existing sections** — e.g., more edge cases, more security tests
+> 3. **Replace all** — start fresh
+
+For options 1 and 2:
+- Read the existing scenarios to understand current coverage and the highest `VP-<CAT>-<NNN>` number
+- Continue numbering from the next available number (e.g., if last is `VP-UI-024`, start at `VP-UI-025`)
+- **Append** new scenarios to the end of the relevant section — never modify or delete existing scenarios
+- Merge new test-data variables into `test-data.yaml` without overwriting existing ones
+
+For option 3:
+- Overwrite both `.feature` and `test-data.yaml` completely
+
+### Page Exploration & Auth
+
+Use Playwright MCP to explore the live page. If the page requires authentication:
+1. `browser_navigate` to `baseURL` (from `playwright.config.ts`)
+2. If redirected to login, ask the user to log in manually:
+   > "This page requires login. Please log in using the browser. Confirm when you're done."
+3. Once confirmed, `browser_navigate` to the target page and take `browser_snapshot`
+
+**Never use `sungen makeauth`.** Always let the user log in manually via the MCP browser.
+
+### Single Screen Focus
+
+**One screen = one URL path.** Only generate test cases for elements visible on the target page.
+
+- Navigate to the target screen path — do NOT explore sibling paths (e.g., testing `/admin/users` should not scan `/admin/review`)
+- Take ONE snapshot of the target page — do not click links to navigate away
+- If a link goes to a different path, test only that the link is visible and clickable — the destination page is a SEPARATE screen
+- If a modal/dialog opens on the same page, that IS part of this screen
+- Each screen gets its own `qa/screens/<name>/` directory — never mix screens
+
+#### Detail screens with dynamic IDs
+
+For screens like `/admin/users/:id` or `/products/:slug`:
+1. Navigate to the **list page** first via MCP browser to find a real record ID
+2. Use that ID in the page selector value
+3. Use `User is on [X] page` — sungen resolves the path from the selector
+
+```yaml
+# selectors.yaml — full path with real ID (generated during make-test)
+user detail:
+  type: 'page'
+  value: '/admin/users/de42d800-0f5a-490e-9dcf-344fedbd34a5'
+```
+
+```gherkin
+Scenario: VP-UI-001 User detail displays name
+  Given User is on [User Detail] page
+  And User wait for [User Name] heading is visible
+  Then User see [User Name] heading with {{user_name}}
+```
+
+Note: the selector uses a hardcoded ID from the live page. If the record is deleted, update the ID in `selectors.yaml`.
+
+### Section-Focused Approach
+
+After exploring the page, identify distinct **sections** based on common UI patterns. Present them as a numbered list and ask the user which to focus on.
+
+#### Common Section Patterns
+
+Identify which patterns exist on the screen:
+
+| Pattern | Elements to look for |
+|---|---|
+| **Header / Navigation** | Logo, nav links, breadcrumbs, user menu, notifications, language selector |
+| **Form** | Input fields, dropdowns, checkboxes, radio buttons, date pickers, file uploads, submit/cancel buttons |
+| **Data Table** | Column headers, sortable columns, row data, row actions, bulk actions, column filters |
+| **Search & Filters** | Search input, filter dropdowns, clear/reset, active filter tags |
+| **Card Grid / List** | Cards with title/image/description, load more, infinite scroll |
+| **Pagination** | Previous/next buttons, page numbers, page size selector, total count |
+| **Tabs / Accordion** | Tab headers, tab panels, expand/collapse |
+| **Modal / Dialog** | Open trigger, close button, form inside modal, confirmation dialog |
+| **Sidebar** | Stats, quick actions, related links, mini widgets |
+| **File Upload** | Drop zone, file picker, progress bar, file list, delete |
+| **Rich Text Editor** | Toolbar, content area, formatting buttons, preview |
+| **Carousel / Slider** | Prev/next arrows, dots/indicators, auto-play, swipe |
+
+Example output:
+
+> This screen has the following sections:
+> 1. Header (logo, navigation tabs, user menu)
+> 2. Create Form (name, email, role dropdown, department, submit)
+> 3. User Table (columns: name, email, status, actions; sortable, filterable)
+> 4. Pagination (previous/next, page indicator)
+>
+> Which sections do you want to create test cases for? (e.g., "2, 3" or "all")
+
+For each selected section, generate **20+ scenarios per applicable viewpoint**. Skip viewpoint categories that don't apply.
+
+Present a test plan summary and wait for user confirmation before generating files.
+
+### Viewpoint Categories
+
+| VP Category | Description |
+|---|---|
+| **UI/UX** | Default appearance, element visibility, default states |
+| **Validation** | Input validation, error messages, edge cases |
+| **Logic** | Business logic, interactions, state changes |
+| **Security** | Auth guards, injection, permission checks |
+
+### Coverage Checklist per Section Pattern
+
+Apply the relevant checklist based on the section pattern:
+
+#### Form sections
+- **UI/UX**: All fields visible, labels correct, default values, placeholder text, required indicators
+- **Validation**: Empty submit, each required field empty, invalid format (email, phone, URL), min/max length, special chars, unicode, XSS, SQL injection, whitespace-only, boundary values
+- **Logic**: Successful submit, submit with all optional fields, edit existing record, cancel resets form, field dependencies (show/hide), auto-complete, date range validation
+- **Security**: CSRF protection, unauthorized submit, role-based field visibility, input sanitization
+
+#### Data Table sections
+- **UI/UX**: All columns visible, column headers, row data displays correctly, empty state, loading state, action buttons visible
+- **Validation**: N/A (read-only) or inline edit validation
+- **Logic**: Sort ascending/descending per sortable column, filter by each column, search within table, row action menu (edit/delete/view), bulk select, bulk action, row click navigation, column resize
+- **Security**: Cannot access other users' data, action permissions per role, data not exposed in DOM
+
+#### Search & Filter sections
+- **UI/UX**: Search field visible, filter buttons visible, clear button state
+- **Validation**: Empty search, special chars, SQL injection, XSS, very long text, unicode/emoji, whitespace, partial match, case insensitive
+- **Logic**: Apply single filter, combine multiple filters, clear single filter, clear all filters, search + filter combined, filter persists across pagination, no results state
+- **Security**: Injection via search, injection via filter params
+
+#### Pagination sections
+- **UI/UX**: Page indicator visible, previous disabled on page 1, next enabled
+- **Logic**: Next page, previous page, navigate to last page, boundary (first/last), page indicator updates, data refreshes on navigation
+- **Security**: Filters persist across pages, search persists, cannot access page beyond max
+
+#### Modal / Dialog sections
+- **UI/UX**: Modal opens, close button visible, overlay visible, form fields inside modal
+- **Validation**: Submit empty form in modal, field validation inside modal
+- **Logic**: Open modal, close with X, close with Escape, close with overlay click, submit success closes modal, submit error keeps modal open
+- **Security**: Cannot open unauthorized modals, CSRF on modal submit
+
+#### Card Grid / List sections
+- **UI/UX**: Cards display all expected fields (title, image, description, metadata), empty state, loading state
+- **Logic**: Click card navigates to detail, load more / infinite scroll, card action buttons (like, share, delete), responsive layout
+- **Security**: User-generated content sanitized, cannot access other users' cards
+
+#### Carousel / Slider sections
+- **UI/UX**: Arrows visible, indicators visible, current slide highlighted
+- **Logic**: Next slide, previous slide, wrap at end, auto-play, indicator click navigates, swipe gesture
+- **Security**: N/A
+
+#### Tabs / Accordion sections
+- **UI/UX**: All tabs visible, active tab highlighted, default tab selected
+- **Logic**: Switch tabs, content updates per tab, deep link to tab, accordion expand/collapse, only one accordion open at a time
+- **Security**: Tab content respects permissions
+
+### General Coverage Dimensions (aim for 20+ total per viewpoint)
+
+**Happy paths (3-5):** Standard flow, all optional fields, minimum required
+**Edge cases (5-8):** Empty, max length, special chars, unicode/CJK/emoji, whitespace, leading/trailing spaces, overflow
+**Boundary values (3-5):** At min/max limit, one above/below, zero/null
+**Negative cases (3-5):** Invalid format, missing required, wrong type, injection attempts
+**State transitions (2-4):** Before/after action, undo, cancel mid-flow
+**Combinatorial (2-4):** Multiple invalid fields, valid+invalid combos, different roles
+
+### SPA Wait-For Steps
+
+If the page is an SPA (Next.js, Nuxt, React Router, etc.), add a `wait for` step after navigation:
+
+```gherkin
+Given User is on [Screen] page
+And User wait for [Page Title] heading is visible
+```
+
+For scenarios needing dynamic data, add a second wait:
+
+```gherkin
+And User wait for [Data Element] button is visible
+```
+
+### Output Files
+
+**1. Feature file** — `qa/screens/<screen>/features/<screen>.feature`
+
+Group by section, then by viewpoint within each section:
+
+```gherkin
+@auth:role
+Feature: <Screen> Screen
+
+  # ============================================================
+  # Section: Create User Form
+  # ============================================================
+
+  # --- UI/UX (20+) ---
+
+  Scenario: VP-UI-001 Name field is visible
+    ...
+
+  # --- Validation (20+) ---
+
+  Scenario: VP-VAL-001 Submit with empty name
+    ...
+
+  # ============================================================
+  # Section: User Table
+  # ============================================================
+
+  # --- UI/UX (20+) ---
+
+  Scenario: VP-UI-025 Table displays all columns
+    ...
+```
+
+**Naming convention:** `VP-<CATEGORY>-<NNN>` prefix in Scenario name.
+
+**2. Test data file** — `qa/screens/<screen>/test-data/<screen>.yaml`
+
+Group variables by section:
+
+```yaml
+# ============================================================
+# Create User Form
+# ============================================================
+valid_name: 'John Doe'
+valid_email: 'john@example.com'
+empty_input: ''
+special_chars: '!@#$%^&*()'
+
+# ============================================================
+# User Table
+# ============================================================
+sort_column: 'Name'
+search_term: 'John'
+```
+
+### Do NOT Generate
+
+- `selectors.yaml` — this is created during `/sungen:make-test`
+- Playwright code — sungen compiles Gherkin to Playwright

package/dist/orchestrator/templates/playwright.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"playwright.config.d.ts","sourceRoot":"","sources":["../../../src/orchestrator/templates/playwright.config.ts"],"names":[],"mappings":"AAEA;;;GAGG;AAKH;;GAEG;;AACH,wBAkEG"}
+{"version":3,"file":"playwright.config.d.ts","sourceRoot":"","sources":["../../../src/orchestrator/templates/playwright.config.ts"],"names":[],"mappings":"AAEA;;;GAGG;AAKH;;GAEG;;AACH,wBAoEG"}

package/dist/orchestrator/templates/playwright.config.js

@@ -20,7 +20,9 @@ exports.default = (0, test_1.defineConfig)({
     /* Retry on CI only */
     retries: process.env.CI ? 2 : 0,
     /* Opt out of parallel tests on CI. */
-    workers: process.env.CI ? 1 : undefined,
+    workers: process.env.CI ? 1 : 2,
+    /* Global timeout per test */
+    timeout: 10000,
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */
     reporter: 'html',
     /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

package/dist/orchestrator/templates/playwright.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"playwright.config.js","sourceRoot":"","sources":["../../../src/orchestrator/templates/playwright.config.ts"],"names":[],"mappings":";;AAAA,2CAAyD;AAEzD;;;GAGG;AACH,+BAA+B;AAC/B,2BAA2B;AAC3B,4DAA4D;AAE5D;;GAEG;AACH,kBAAe,IAAA,mBAAY,EAAC;IAC1B,OAAO,EAAE,mBAAmB;IAC5B,oCAAoC;IACpC,aAAa,EAAE,IAAI;IACnB,iFAAiF;IACjF,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;IAC5B,sBAAsB;IACtB,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/B,sCAAsC;IACtC,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;IACvC,qEAAqE;IACrE,QAAQ,EAAE,MAAM;IAChB,wGAAwG;IACxG,GAAG,EAAE;QACH,4DAA4D;QAC5D,OAAO,EAAE,qBAAqB;QAE9B,+FAA+F;QAC/F,KAAK,EAAE,gBAAgB;KACxB;IAED,2CAA2C;IAC3C,QAAQ,EAAE;QACR;YACE,IAAI,EAAE,UAAU;YAChB,GAAG,EAAE,EAAE,GAAG,cAAO,CAAC,gBAAgB,CAAC,EAAE;SACtC;QAED;;;;;;;;;;;;;;;;;;;;;4CAqBoC;QACpC,IAAI;QACJ,4BAA4B;QAC5B,4DAA4D;QAC5D,KAAK;QACL,IAAI;QACJ,2BAA2B;QAC3B,8DAA8D;QAC9D,KAAK;KACN;IAED,yDAAyD;IACzD,eAAe;IACf,8BAA8B;IAC9B,kCAAkC;IAClC,0CAA0C;IAC1C,KAAK;CACN,CAAC,CAAC"}
+{"version":3,"file":"playwright.config.js","sourceRoot":"","sources":["../../../src/orchestrator/templates/playwright.config.ts"],"names":[],"mappings":";;AAAA,2CAAyD;AAEzD;;;GAGG;AACH,+BAA+B;AAC/B,2BAA2B;AAC3B,4DAA4D;AAE5D;;GAEG;AACH,kBAAe,IAAA,mBAAY,EAAC;IAC1B,OAAO,EAAE,mBAAmB;IAC5B,oCAAoC;IACpC,aAAa,EAAE,IAAI;IACnB,iFAAiF;IACjF,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;IAC5B,sBAAsB;IACtB,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/B,sCAAsC;IACtC,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/B,6BAA6B;IAC7B,OAAO,EAAE,KAAM;IACf,qEAAqE;IACrE,QAAQ,EAAE,MAAM;IAChB,wGAAwG;IACxG,GAAG,EAAE;QACH,4DAA4D;QAC5D,OAAO,EAAE,qBAAqB;QAE9B,+FAA+F;QAC/F,KAAK,EAAE,gBAAgB;KACxB;IAED,2CAA2C;IAC3C,QAAQ,EAAE;QACR;YACE,IAAI,EAAE,UAAU;YAChB,GAAG,EAAE,EAAE,GAAG,cAAO,CAAC,gBAAgB,CAAC,EAAE;SACtC;QAED;;;;;;;;;;;;;;;;;;;;;4CAqBoC;QACpC,IAAI;QACJ,4BAA4B;QAC5B,4DAA4D;QAC5D,KAAK;QACL,IAAI;QACJ,2BAA2B;QAC3B,8DAA8D;QAC9D,KAAK;KACN;IAED,yDAAyD;IACzD,eAAe;IACf,8BAA8B;IAC9B,kCAAkC;IAClC,0CAA0C;IAC1C,KAAK;CACN,CAAC,CAAC"}

package/dist/orchestrator/templates/playwright.config.ts

@@ -20,7 +20,9 @@ export default defineConfig({
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: process.env.CI ? 1 : 2,
+  /* Global timeout per test */
+  timeout: 10_000,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

package/dist/orchestrator/templates/readme.md

@@ -17,11 +17,17 @@ sungen generate → compiles Gherkin + selectors + data → Playwright .spec.ts
 │   ├── selectors/        # Element locator YAML mappings
 │   └── test-data/        # Test data YAML values
 ├── specs/
-│   ├── generated/        # Auto-generated Playwright tests
-│   └── .auth/            # Auth storage states
+│   └── generated/        # Auto-generated Playwright tests
+├── .claude/
+│   ├── commands/sungen/  # Claude Code slash commands
+│   └── skills/           # Claude Code auto-loaded skills
 ├── .github/
-│   └── copilot-instructions.md  # AI rules for GitHub Copilot
-└── CLAUDE.md                    # AI rules for Claude Code
+│   ├── copilot-instructions.md   # AI rules for GitHub Copilot
+│   └── prompts/                  # Copilot slash commands
+├── .vscode/
+│   └── settings.json     # Copilot auto-attach settings
+├── CLAUDE.md             # AI rules for Claude Code
+└── playwright.config.ts  # Playwright config (timeout: 10s, workers: 2)
 ```
 
 ## Workflow
@@ -32,45 +38,50 @@ Step 1                Step 2                Step 3
 │ /add-    │────────▶│ /make-tc │────────▶│ /make-   │
 │ screen   │         │          │         │ test     │
 └──────────┘         └──────────┘         └──────────┘
- Scaffold              Design TCs           Compile &
- directories           & generate           run tests
-                       3 files
+ Scaffold              Pick sections        Generate
+ directories           → design TCs         selectors
+                       → generate           → compile
+                       .feature +           → run tests
+                       test-data            → auto-fix
 ```
 
 Use AI commands (Claude Code or GitHub Copilot) to drive the workflow:
 
 ### Step 1: Add a screen
 
-| Claude Code | GitHub Copilot |
+| Claude Code | GitHub Copilot (VS Code) |
 |---|---|
-| `/sungen:add-screen login /login` | `@workspace /sungen-add-screen login /login` |
+| `/sungen:add-screen` | `/sungen-add-screen` |
 
 Scaffolds `qa/screens/<name>/` with empty feature, selectors, and test-data files, then asks if you want to create test cases.
 
 ### Step 2: Create test cases
 
-| Claude Code | GitHub Copilot |
+| Claude Code | GitHub Copilot (VS Code) |
 |---|---|
-| `/sungen:make-tc login` | `@workspace /sungen-make-tc login` |
+| `/sungen:make-tc login` | `/sungen-make-tc login` |
 
-AI acts as a **Senior QA Engineer**: explores the live page (via Playwright MCP) or analyzes static designs, gathers test viewpoints (UI/UX, Validation, Logic, Security), and generates the 3 files.
+AI acts as a **Senior QA Engineer**:
+1. Explores the live page via Playwright MCP (asks user to log in if auth needed)
+2. Identifies screen sections → asks user which to focus on
+3. Generates **20+ scenarios per viewpoint** (UI/UX, Validation, Logic, Security) for each section
+4. Confirms test plan before generating `.feature` + `test-data.yaml`
 
 ### Step 3: Compile & run tests
 
-| Claude Code | GitHub Copilot |
+| Claude Code | GitHub Copilot (VS Code) |
 |---|---|
-| `/sungen:make-test login` | `@workspace /sungen-make-test login` |
+| `/sungen:make-test login` | `/sungen-make-test login` |
 
-AI acts as a **Senior Developer**: compiles Gherkin → Playwright `.spec.ts`, runs tests, and auto-fixes selectors/test-data on failure (up to 5 attempts).
+AI acts as a **Senior Developer**:
+1. Navigates to live page, takes snapshot, verifies DOM properties
+2. Generates `selectors.yaml` from exact accessible names
+3. Compiles Gherkin → Playwright `.spec.ts`
+4. Runs tests, auto-fixes selectors on failure (up to 5 attempts)
 
-### Auth setup (if needed)
+### Auth setup
 
-If any page requires authentication, run manually before Step 2:
-
-```bash
-sungen makeauth admin --url <baseURL>
-# Opens browser → login manually → saves specs/.auth/admin.json
-```
+If any page requires authentication, the AI will ask you to **log in manually via the MCP browser** during Step 2 or Step 3. No separate auth command needed.
 
 ### Manual CLI commands
 
@@ -85,7 +96,24 @@ npx playwright test --ui                     # Interactive mode
 
 ---
 
-## Gherkin Guide
+## VS Code Copilot Setup
+
+Add to `.vscode/settings.json` to auto-load Gherkin syntax when editing `.feature` files:
+
+```json
+{
+  "github.copilot.chat.codeGeneration.instructions": [
+    {
+      "file": ".github/prompts/sungen-gherkin-syntax.prompt.md",
+      "applyTo": "**/*.feature"
+    }
+  ]
+}
+```
+
+---
+
+## Gherkin Quick Reference
 
 ### Syntax
 
@@ -97,101 +125,50 @@ User <action> [<Target>] <type> with {{<Value>}}
 - `{{Value}}` → test data reference → lookup in `test-data/*.yaml`
 - `<type>` → element type: button, link, field, heading, text, etc.
 
-### Pattern Shapes (17 total)
-
-#### Actions
-
-| Pattern | Example |
-|---|---|
-| Simple click | `User click [Submit] button` |
-| Click with data | `User click [Teammate] button with {{name}}` |
-| Fill field | `User fill [Email] field with {{email}}` |
-| Check/Uncheck | `User check [Remember me] checkbox` |
-| Select dropdown | `User select [Country] dropdown with {{country}}` |
-| Upload file | `User upload [Avatar] file with {{path}}` |
-| Double click | `User double click [Cell] element` |
-| Hover | `User hover [Info] icon` |
-| Clear | `User clear [Search] field` |
-
-#### Keyboard
-
-| Pattern | Example |
-|---|---|
-| Global key | `User press Escape key` |
-| Key on element | `User press Enter on [Search] field` |
-
-#### Navigation
-
-| Pattern | Example |
-|---|---|
-| Open page | `User is on [login] page` |
-| See page (URL) | `User see [dashboard] page` |
-
-#### Wait
-
-| Pattern | Example |
-|---|---|
-| Wait timeout | `User wait for 3 seconds` |
-| Wait element | `User wait for [Modal] dialog` |
-| Wait hidden | `User wait for [Loading] spinner is hidden` |
-| Wait with data | `User wait for [Dialog] dialog with {{title}}` |
-
-#### Assertions
-
-| Pattern | Example |
-|---|---|
-| See element | `User see [Welcome] heading` |
-| See with value | `User see [Title] heading with {{title}}` |
-| State check | `User see [Submit] button is disabled` |
-| State + data | `User see [Panel] dialog with {{title}} is hidden` |
-| Text contains | `User see [Message] text contains {{partial}}` |
-
-States: `hidden`, `visible`, `disabled`, `enabled`, `checked`, `unchecked`, `focused`, `empty`
-
-#### Table
+### Key Patterns
 
 | Pattern | Example |
 |---|---|
-| Row exists | `User see [Users] table has row with {{name}}` |
-| No row | `User see [Users] table has no row with {{name}}` |
-| Row count | `User see [Users] table has {{count}} rows` |
-| Column exists | `User see [Users] table has [Email] column` |
-| Cell by filter | `User see [Users] table row with {{name}} has [Status] with {{status}}` |
-| Cell by index | `User see [Users] table row 1 [Name] cell with {{name}}` |
-| Action in row | `User click [Edit] in [Users] table row with {{name}}` |
-| Empty table | `User see [Users] table is empty` |
-
-#### Scope
-
-| Pattern | Example |
-|---|---|
-| Scroll | `User scroll to [Footer] section` |
-| Frame enter | `User switch to [Payment] frame` |
-| Frame exit | `User switch to [main] frame` |
+| Navigate | `User is on [login] page` |
+| Click | `User click [Submit] button` |
+| Fill | `User fill [Email] field with {{email}}` |
+| Assert visible | `User see [Welcome] heading is visible` |
+| Assert text | `User see [Title] heading with {{title}}` |
+| Assert state | `User see [Submit] button is disabled` |
+| Wait for | `User wait for [Modal] dialog is visible` |
+| Table row | `User see [Users] table has row with {{name}}` |
+| Table column | `User see [Users] table has [Email] column` |
+
+States: `hidden` `visible` `disabled` `enabled` `checked` `unchecked` `focused` `empty` `loading` `selected`
 
 ### Tags
 
 | Tag | Purpose |
 |---|---|
 | `@auth:role` | Use Playwright storage state for auth |
+| `@no-auth` | Disable inherited auth for this scenario |
 | `@steps:name` | Define reusable step group |
 | `@extend:name` | Inherit steps from another scenario |
 | `@manual` | Skip scenario in generation |
 
-### Selector YAML
+### YAML Selector Keys
+
+Keys are **lowercase with spaces**, Unicode preserved:
+- `[Search Content]` → `search content:`
+- `[Thời gian]` → `thời gian:`
+- Same label, different types → `add campaign--button:` / `add campaign--text:`
+
+### Selector Types
 
 ```yaml
-submit.button:
-  type: 'role'              # testid, role, text, label, placeholder, locator, page
-  value: 'button'           # role name, testid value, CSS selector, etc.
-  name: 'Submit'            # accessible name
-  nth: 0                    # element index, 0-indexed (omit for strict mode)
-  exact: true               # exact name match (avoid "Submit" matching "Submit Form")
-  scope: 'desktop navigation'  # scope to parent landmark
-  match: 'exact'            # exact text match for getByText
+search:
+  type: 'placeholder'        # testid, role, placeholder, label, text, locator, page
+  value: 'Search users'      # placeholder text, role name, CSS selector, etc.
+  name: 'Search'             # accessible name (for role type)
+  nth: 0                     # element index (for multiple matches)
 ```
 
-Locator priority: `data-testid` > `role+name` > `label` > `text` > `CSS`
+Priority: `data-testid` > `role+name` > `placeholder` > `label` > `text` > `CSS locator`
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sun-asterisk/sungen",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Deterministic E2E Test Compiler - Gherkin + Selectors → Playwright tests",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/cli/index.ts

@@ -16,7 +16,7 @@ async function main() {
   program
     .name('sungen')
     .description('Deterministic E2E Test Compiler — Gherkin + Selectors → Playwright')
-    .version('2.1.1');
+    .version('2.2.0');
 
   // Global options
   program

package/src/generators/test-generator/adapters/playwright/templates/steps/actions/fill-action.hbs

@@ -1 +1 @@
-await {{> locator}}.fill('{{fillValue}}');
+await {{> locator}}.fill('{{escapeQuotes fillValue}}');

package/src/generators/test-generator/adapters/playwright/templates/steps/actions/fill-editor-action.hbs

@@ -1,3 +1,3 @@
 const editorLocator = {{> locator}};
 await editorLocator.click();
-await editorLocator.pressSequentially('{{fillValue}}');
+await editorLocator.pressSequentially('{{escapeQuotes fillValue}}');

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/checked-assertion.hbs

@@ -1,2 +1 @@
-await page.waitForLoadState('networkidle');
 await expect({{> locator}}).toBeChecked();

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/column-cell-assertion.hbs

@@ -1,3 +1,2 @@
-await page.waitForLoadState('networkidle');
 const {{columnIndexVar}} = (await page.getByRole('columnheader').allTextContents()).findIndex(h => h.includes('{{columnName}}'));
 await expect(page.getByRole('row').nth({{rowNth}}).getByRole('cell').nth({{columnIndexVar}})).toHaveText('{{dataValue}}');

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/contain-text-assertion.hbs

@@ -1,2 +1 @@
-await page.waitForLoadState('networkidle');
 await expect({{> locator}}).toContainText('{{expectedText}}');

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/count-assertion.hbs

@@ -1,2 +1 @@
-await page.waitForLoadState('networkidle');
 await expect({{> locator}}).toHaveCount({{expectedCount}});

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/disabled-assertion.hbs

@@ -1,2 +1 @@
-await page.waitForLoadState('networkidle');
 await expect({{> locator}}).toBeDisabled();

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/disabled-with-filter-assertion.hbs

@@ -1,2 +1 @@
-await page.waitForLoadState('networkidle');
 await expect({{> locator-base}}.filter({ hasText: /^{{escapeRegex dataValue}}$/ }){{> locator-nth}}).toBeDisabled();

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/disabled-with-role-variable-assertion.hbs

@@ -1,4 +1,3 @@
-await page.waitForLoadState('networkidle');
 {{#if name}}
 await expect(page.getByRole('{{role}}', { name: '{{escapeQuotes name}}'{{#if exact}}, exact: true{{/if}} }).filter({ hasText: /^{{escapeRegex dataValue}}$/ }){{#if (gte nth 0)}}.nth({{nth}}){{/if}}).toBeDisabled();
 {{else}}

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/disabled-with-variable-assertion.hbs

@@ -1,2 +1 @@
-await page.waitForLoadState('networkidle');
 await expect(page.getByText('{{escapeQuotes selectorRef}}').filter({ hasText: {{#if (eq selectorValue "")}}/.*{{escapeRegex dataValue}}$/{{else}}'{{escapeQuotes dataValue}}'{{/if}} }){{#if (gte nth 0)}}.nth({{nth}}){{/if}}).toBeDisabled();

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/empty-assertion.hbs

@@ -1,2 +1 @@
-await page.waitForLoadState('networkidle');
 await expect({{> locator}}).toBeEmpty();

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/enabled-assertion.hbs

@@ -1,2 +1 @@
-await page.waitForLoadState('networkidle');
 await expect({{> locator}}).toBeEnabled();

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/focused-assertion.hbs

@@ -1,2 +1 @@
-await page.waitForLoadState('networkidle');
 await expect({{> locator}}).toBeFocused();

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/have-text-assertion.hbs

@@ -1,2 +1 @@
-await page.waitForLoadState('networkidle');
 await expect({{> locator}}).toHaveText('{{expectedText}}');

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/hidden-dialog-heading-assertion.hbs

@@ -1,2 +1 @@
-await page.waitForLoadState('networkidle');
 await expect(page.getByRole('dialog').getByRole('heading', { name: '{{escapeQuotes dataValue}}' })).toBeHidden();

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/hidden-with-filter-assertion.hbs

@@ -1,2 +1 @@
-await page.waitForLoadState('networkidle');
 await expect({{> locator-base}}.filter({ hasText: /^{{escapeRegex dataValue}}$/ }){{> locator-nth}}).toBeHidden();

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/hidden-with-role-variable-assertion.hbs

@@ -1,4 +1,3 @@
-await page.waitForLoadState('networkidle');
 {{#if name}}
 await expect(page.getByRole('{{role}}', { name: '{{escapeQuotes name}}'{{#if exact}}, exact: true{{/if}} }).filter({ hasText: /^{{escapeRegex dataValue}}$/ }){{#if (gte nth 0)}}.nth({{nth}}){{/if}}).toBeHidden();
 {{else}}

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/hidden-with-variable-assertion.hbs

@@ -1,2 +1 @@
-await page.waitForLoadState('networkidle');
 await expect(page.getByText('{{escapeQuotes selectorRef}}').filter({ hasText: {{#if (eq selectorValue "")}}/.*{{escapeRegex dataValue}}$/{{else}}'{{escapeQuotes dataValue}}'{{/if}} }){{#if (gte nth 0)}}.nth({{nth}}){{/if}}).toBeHidden();

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/is-hidden-assertion.hbs

@@ -1,2 +1 @@
-await page.waitForLoadState('networkidle');
 await expect({{> locator}}).toBeHidden();

package/src/generators/test-generator/adapters/playwright/templates/steps/assertions/label-value-assertion.hbs

@@ -1,2 +1 @@
-await page.waitForLoadState('networkidle');
 await expect(page.getByText(/{{#if label}}{{escapeRegex label}}\s*{{else}}(?:^|\s){{/if}}{{escapeRegex dataValue}}$/)).toBeVisible();