@sun-asterisk/sungen 2.2.1 → 2.2.3

package/docs/gherkin-dictionary.md

@@ -193,20 +193,22 @@ TABLE_COL_EXPR := ("has")? TARGET_EXPR ("cell")? (DATA_EXPR)?
 # ─── Terminals ────────────────────────────────────────────────
 TARGET_EXPR  := "[" IDENTIFIER "]" (ELEMENT_TYPE)?
 ELEMENT_TYPE := "button"|"link"|"field"|"heading"|"text"|"image"|"checkbox"
-              | "radio"|"switch"|"dropdown"|"option"|"dialog"|"modal"|"menu"
-              | "menuitem"|"tab"|"tabpanel"|"list"|"listitem"|"table"|"row"
-              | "cell"|"column"|"columnheader"|"region"|"section"|"nav"
-              | "banner"|"header"|"footer"|"alert"|"spinner"|"progressbar"
-              | "slider"|"tree"|"treeitem"|"tooltip"|"icon"|"uploader"
-              | "file"|"frame"|"iframe"|"textarea"|"page"
+              | "radio"|"switch"|"toggle"|"dropdown"|"option"|"dialog"|"modal"
+              | "drawer"|"menu"|"menuitem"|"tab"|"tabpanel"|"list"|"listitem"
+              | "table"|"row"|"cell"|"column"|"columnheader"|"region"|"section"
+              | "nav"|"banner"|"header"|"footer"|"alert"|"spinner"|"progressbar"
+              | "slider"|"tree"|"treeitem"|"tooltip"|"icon"|"uploader"|"tag"
+              | "file"|"frame"|"iframe"|"textarea"|"page"|"search"|"date-picker"
+              | "badge"|"breadcrumb"|"overlay"|"step"|"card"|"item"|"key"
+              | "message"|"label"
 DATA_EXPR    := "with" "{{" IDENTIFIER "}}"
 STATE_EXPR   := "is" STATE
 STATE        := "hidden"|"visible"|"disabled"|"enabled"|"checked"
               | "unchecked"|"focused"|"empty"|"loading"|"selected"
               | "sorted ascending"|"sorted descending"
-ACTION       := "click"|"fill"|"select"|"check"|"uncheck"|"toggle"
+ACTION       := "click"|"fill"|"select"|"check"|"uncheck"
               | "upload"|"hover"|"drag"|"clear"|"see"|"press"|"expand"
-              | "collapse"|"double click"
+              | "collapse"|"double click"|"toggle"
 KEY          := "Enter"|"Escape"|"Tab"|"Backspace"|"Delete"|"Space"
               | "ArrowUp"|"ArrowDown"|"ArrowLeft"|"ArrowRight"
               | "Home"|"End"|"PageUp"|"PageDown"
@@ -281,7 +283,11 @@ if action == 'fill':      code = locator.fill(value)
 if action == 'select':    code = locator.selectOption(value) or click+click
 if action == 'upload':    code = locator.setInputFiles(value)
 if action == 'click':     code = page.getByText(value).click() or locator.filter({hasText}).click()
-if action == 'see':       code = expect(locator).toBeVisible() with text check
+if action == 'see':
+  if type in (field, textarea, search, dropdown, slider, date-picker):
+    code = expect(locator).toHaveValue(value)    # input types → toHaveValue
+  else:
+    code = expect(locator).toHaveText(value)     # text types → toHaveText (exact match)
 ```
 
 **Playwright output:**
@@ -306,11 +312,14 @@ await page.getByLabel('Avatar').setInputFiles('specs/storage/avatar.png');
 // click with text filter
 await page.getByText('Nguyễn Thanh Tùng').click();
 
-// see heading with value
-await expect(page.getByRole('heading', { name: 'Hệ thống giải thưởng SAA 2025' })).toBeVisible();
+// see heading with value → toHaveText (exact match)
+await expect(page.getByRole('heading', { name: 'Welcome' })).toHaveText('Welcome back, Admin');
 
-// see text with exact match
-await expect(page.getByText('5.000.000 VNĐ', { exact: true })).toBeVisible();
+// see field with value → toHaveValue (input types)
+await expect(page.getByPlaceholder('Email')).toHaveValue('user@example.com');
+
+// see message with value → toHaveText (text types)
+await expect(page.getByText('Error')).toHaveText('Invalid credentials');
 ```
 
 ---
@@ -834,6 +843,49 @@ await row.getByRole('button', { name: 'Expand' }).click();
 
 ---
 
+## Browser Alert (System Dialog)
+
+For native browser dialogs (`window.alert`, `window.confirm`, `window.prompt`):
+
+```gherkin
+# Alert steps must appear BEFORE the action that triggers the dialog
+When User click [OK] alert              # accept
+And User click [Delete] button           # triggers the alert
+
+When User click [Cancel] alert           # dismiss
+And User click [Delete] button
+
+When User fill [Name] alert with {{v}}   # fill prompt + accept
+And User click [Rename] button
+
+Then User see [Are you sure?] alert      # assert dialog message
+```
+
+**Compiler rule:**
+```
+click [OK/Accept/Yes/Confirm] alert  → page.once('dialog', d => d.accept())
+click [Cancel/Dismiss/No] alert      → page.once('dialog', d => d.dismiss())
+fill [T] alert with {{v}}           → page.once('dialog', d => d.accept(value))
+see [text] alert                     → Promise-based dialog.message() check
+```
+
+**Playwright output:**
+```typescript
+// accept alert (register BEFORE triggering action)
+page.once('dialog', dialog => dialog.accept());
+await page.getByRole('button', { name: 'Delete' }).click();
+
+// dismiss alert
+page.once('dialog', dialog => dialog.dismiss());
+await page.getByRole('button', { name: 'Delete' }).click();
+
+// fill prompt
+page.once('dialog', dialog => dialog.accept('New name'));
+await page.getByRole('button', { name: 'Rename' }).click();
+```
+
+---
+
 ## Dialog Scope
 
 When a dialog is opened, subsequent steps are scoped within it:
@@ -902,7 +954,9 @@ await frame.getByRole('button', { name: 'Pay' }).click();
 | `switch` / `toggle` | `switch` | `getByRole('switch')` |
 | `dropdown` / `select` | `combobox` | `getByRole('combobox')` |
 | `option` | `option` | `getByRole('option')` |
-| `dialog` / `modal` | `dialog` | `getByRole('dialog')` |
+| `search` | `searchbox` | `getByRole('searchbox')` |
+| `slider` | `slider` | `getByRole('slider')` |
+| `dialog` / `modal` / `drawer` | `dialog` | `getByRole('dialog')` |
 | `menu` | `menu` | `getByRole('menu')` |
 | `menuitem` | `menuitem` | `getByRole('menuitem')` |
 | `tab` | `tab` | `getByRole('tab')` |
@@ -917,7 +971,7 @@ await frame.getByRole('button', { name: 'Pay' }).click();
 | `nav` / `navigation` | `navigation` | `getByRole('navigation')` |
 | `banner` / `header` | `banner` | `getByRole('banner')` |
 | `footer` | `contentinfo` | `getByRole('contentinfo')` |
-| `alert` | `alert` | `getByRole('alert')` |
+| `alert` | `alertdialog` | `getByRole('alertdialog')` or `page.on('dialog')` for browser alerts |
 | `spinner` / `progressbar` | `progressbar` | `getByRole('progressbar')` |
 | `slider` | `slider` | `getByRole('slider')` |
 | `tree` | `tree` | `getByRole('tree')` |
@@ -982,6 +1036,8 @@ collapse        → .getByRole('button', {name:'Collapse'}).click()
 
 ```
 see             → expect(locator).toBeVisible()
+see with {{v}}  → expect(locator).toHaveText(value)       # text types (message, header, label, row...)
+see with {{v}}  → expect(locator).toHaveValue(value)      # input types (field, textarea, search, dropdown, slider, date-picker)
 see ... hidden  → expect(locator).toBeHidden()
 see ... visible → expect(locator).toBeVisible()
 see ... enabled → expect(locator).toBeEnabled()
@@ -995,7 +1051,6 @@ see ... selected→ expect(locator).toHaveAttribute('aria-selected', 'true')
 see ... sorted ascending  → expect(locator).toHaveAttribute('aria-sort', 'ascending')
 see ... sorted descending → expect(locator).toHaveAttribute('aria-sort', 'descending')
 contains        → expect(locator).toContainText(value)
-has text        → expect(locator).toHaveText(value)
 has (attribute) → expect(locator).toHaveAttribute(attr, value)
 has ... rows    → expect(locator.getByRole('row')).toHaveCount(N)
 has ... column  → expect(locator.getByRole('columnheader', {name})).toBeVisible()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sun-asterisk/sungen",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "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.2.1');
+    .version('2.2.3');
 
   // Global options
   program

package/src/generators/gherkin-parser/index.ts

@@ -146,7 +146,7 @@ export class GherkinParser {
       elementType = elementTypeMatch ? elementTypeMatch[1].toLowerCase() : undefined;
     } else {
       // Extract final word if it's a known type (page, button, field, etc)
-      const finalWordMatch = text.match(/\b(page|button|field|link|text|checkbox|radio|select|dropdown|modal|dialog|message|error|warning|success|alert|table|list|list-item|listitem|row)\b$/i);
+      const finalWordMatch = text.match(/\b(page|button|field|link|text|checkbox|radio|select|dropdown|modal|dialog|drawer|message|error|warning|success|alert|table|list|list-item|listitem|row|search|option|slider|toggle|tab|breadcrumb|overlay|step|section|card|item|icon|image|header|label|badge|tooltip|tag|menuitem|cell|column|uploader|date-picker|key)\b$/i);
       elementType = finalWordMatch ? finalWordMatch[1].toLowerCase() : undefined;
     }
 

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

@@ -0,0 +1 @@
+page.once('dialog', dialog => dialog.accept());

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

@@ -0,0 +1 @@
+page.once('dialog', dialog => dialog.dismiss());

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

@@ -0,0 +1 @@
+page.once('dialog', dialog => dialog.accept('{{escapeQuotes fillValue}}'));

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

@@ -0,0 +1,8 @@
+const dialogPromise{{stepCounter}} = new Promise<string>(resolve => {
+  page.once('dialog', dialog => {
+    resolve(dialog.message());
+    dialog.accept();
+  });
+});
+// Trigger the dialog action, then:
+// expect(await dialogPromise{{stepCounter}}).toContain('{{escapeQuotes dataValue}}');

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

@@ -0,0 +1 @@
+await expect({{> locator}}).toHaveValue('{{escapeQuotes dataValue}}');

package/src/generators/test-generator/patterns/assertion-patterns.ts

@@ -6,6 +6,30 @@ import { StepPattern, StepTemplateData } from './types';
  * Uses template engine for framework-agnostic code generation
  */
 export const assertionPatterns: StepPattern[] = [
+  // Browser alert text assertion: "see [Are you sure?] alert"
+  {
+    name: 'alert-text-assertion',
+    matcher: (step: ParsedStep) =>
+      (step.text.includes('see') || step.text.includes('sees')) &&
+      step.elementType === 'alert' &&
+      !!step.selectorRef,
+    resolver: (step, context): StepTemplateData => {
+      let dataValue = step.selectorRef || '';
+      if (step.dataRef) {
+        try {
+          dataValue = context.dataResolver.resolveData(step.dataRef, context.featureName);
+        } catch {
+          dataValue = `\${${step.dataRef}}`;
+        }
+      }
+      return {
+        templateName: 'alert-text-assertion',
+        data: { dataValue, stepCounter: context.stepCounter },
+        comment: `Assert browser alert contains "${step.selectorRef}"`,
+      };
+    },
+    priority: 21,
+  },
   // Column cell assertion: "see [Department] column 1 with {{value}}" -> check table cell text
   {
     name: 'column-cell-assertion',
@@ -218,6 +242,7 @@ export const assertionPatterns: StepPattern[] = [
   // Pattern: Then User see [error] message with {{fail_message}}
   // If selector YAML has empty value, uses variable-only matching
   // If selector has value, combines both (static text + variable)
+  // Input types → toHaveValue, everything else → toHaveText
   {
     name: 'see-with-variable',
     matcher: (step: ParsedStep) =>
@@ -227,6 +252,12 @@ export const assertionPatterns: StepPattern[] = [
       !!step.dataRef &&
       step.text.includes('with'),
     generator: (step, context) => {
+      // Input element types use toHaveValue instead of toHaveText
+      const INPUT_TYPES = new Set([
+        'field', 'textarea', 'search', 'dropdown', 'slider', 'date-picker',
+        'input', 'textbox', 'editor', 'select', 'combobox',
+      ]);
+
       // Resolve data variable value
       let dataValue: string;
       try {
@@ -235,19 +266,42 @@ export const assertionPatterns: StepPattern[] = [
         dataValue = `\${${step.dataRef}}`;
       }
 
-      // Label-value pattern: "User see [X] label with {{Y}}"
-      // Uses regex getByText to match container with both label and value text
+      // Resolve selector from YAML with feature context
+      let resolved: any = {};
+      try {
+        resolved = context.selectorResolver.resolveSelector(
+          step.selectorRef!,
+          context.featureName,
+          step.elementType,
+          step.nth
+        );
+      } catch (error) {
+        // Selector not in YAML or context issue - will use variable-only
+      }
+
+      // --- Input types: toHaveValue ---
+      if (step.elementType && INPUT_TYPES.has(step.elementType)) {
+        const code = context.templateEngine.renderStep('have-value-assertion', {
+          ...resolved,
+          dataValue,
+        });
+        return {
+          code,
+          comment: `Assert ${step.selectorRef} has value ${step.dataRef}`,
+        };
+      }
+
+      // --- Label-value pattern: "User see [X] label with {{Y}}" ---
       if (step.elementType === 'label' && step.dataRef) {
-        // Check if selector override has empty value — if so, omit label from regex
         let label: string | undefined = step.selectorRef;
         try {
-          const resolved = context.selectorResolver.resolveSelector(
+          const labelResolved = context.selectorResolver.resolveSelector(
             step.selectorRef!,
             context.featureName,
             step.elementType,
             step.nth
           );
-          if (resolved.value !== undefined && resolved.value.trim() === '') {
+          if (labelResolved.value !== undefined && labelResolved.value.trim() === '') {
             label = undefined;
           }
         } catch {
@@ -264,93 +318,67 @@ export const assertionPatterns: StepPattern[] = [
         };
       }
 
-      // Resolve selector from YAML with feature context
-      let resolved: any = {};
-      try {
-        resolved = context.selectorResolver.resolveSelector(
-          step.selectorRef!,
-          context.featureName,
-          step.elementType,
-          step.nth
-        );
-      } catch (error) {
-        // Selector not in YAML or context issue - will use variable-only
-      }
-
-      const escapedVariable = dataValue.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&');
-
-      // Check if it's a locator strategy - use locator with filter
-      if (resolved.strategy === 'locator') {
-        const code = context.templateEngine.renderStep('visible-with-locator-variable-assertion', {
-          ...resolved,
+      // --- Dialog role: check heading inside dialog ---
+      if (resolved.strategy === 'role' && resolved.role === 'dialog') {
+        const code = context.templateEngine.renderStep('visible-dialog-heading-assertion', {
           dataValue,
-          nth: resolved.nth,
         });
         return {
           code,
-          comment: `Assert ${step.selectorRef} with value ${step.dataRef}`,
+          comment: `Assert ${step.selectorRef} dialog with heading ${step.dataRef}`,
         };
       }
 
-      // Check if it's a role-based selector with data
-      if (resolved.strategy === 'role' && resolved.role) {
-        // Dialog role: check heading inside dialog instead of filter on full text content
-        if (resolved.role === 'dialog') {
-          const code = context.templateEngine.renderStep('visible-dialog-heading-assertion', {
-            dataValue,
-          });
-          return {
-            code,
-            comment: `Assert ${step.selectorRef} dialog with heading ${step.dataRef}`,
-          };
-        }
-
+      // --- Image role: images have no text, use name ---
+      if (resolved.strategy === 'role' && resolved.role === 'img') {
         const hasName = resolved.name && resolved.name.trim();
-        // For img role: images have no text content, so put dataValue in name instead of filter
-        const isImgRole = resolved.role === 'img';
         const code = context.templateEngine.renderStep('visible-with-role-variable-assertion', {
           role: resolved.role,
-          name: isImgRole ? (hasName ? resolved.name : dataValue) : (hasName ? resolved.name : undefined),
-          dataValue: isImgRole ? undefined : dataValue,
+          name: hasName ? resolved.name : dataValue,
           exact: resolved.exact || false,
           nth: resolved.nth,
         });
         return {
           code,
-          comment: `Assert ${step.selectorRef} with value ${step.dataRef}`,
+          comment: `Assert ${step.selectorRef} image with name ${step.dataRef}`,
         };
       }
 
-      const selectorValue = resolved.value || '';
-
-      // If selector has a value in YAML, combine with variable
-      // Otherwise use variable-only
-      if (selectorValue && selectorValue.trim()) {
-        // Has selector value - combine both
-        const code = context.templateEngine.renderStep('visible-with-value-assertion', {
-          value: selectorValue,
-          dataValue,
-          dataRef: step.dataRef,
-          nth: resolved.nth,
-          exact: resolved.exact || false,
+      // --- Everything else: toHaveText (exact full match) ---
+      // Locator strategy
+      if (resolved.strategy === 'locator') {
+        const code = context.templateEngine.renderStep('have-text-assertion', {
+          ...resolved,
+          expectedText: dataValue,
         });
         return {
           code,
-          comment: `Assert ${step.selectorRef} with value ${step.dataRef}`,
+          comment: `Assert ${step.selectorRef} has text ${step.dataRef}`,
         };
-      } else {
-        // Empty selector - use variable only
-        const code = context.templateEngine.renderStep('visible-with-variable-assertion', {
-          selectorRef: step.selectorRef,
-          selectorValue: resolved.value || '',
-          dataValue,
-          nth: resolved.nth,
+      }
+
+      // Role-based selector
+      if (resolved.strategy === 'role' && resolved.role) {
+        const hasName = resolved.name && resolved.name.trim();
+        const code = context.templateEngine.renderStep('have-text-assertion', {
+          ...resolved,
+          expectedText: dataValue,
         });
         return {
           code,
-          comment: `Assert ${step.selectorRef} visible with ${step.dataRef}`,
+          comment: `Assert ${step.selectorRef} has text ${step.dataRef}`,
         };
       }
+
+      // Text/placeholder/testid/other strategies
+      const code = context.templateEngine.renderStep('have-text-assertion', {
+        ...resolved,
+        expectedText: dataValue,
+      });
+      return {
+        code,
+        comment: `Assert ${step.selectorRef} has text ${step.dataRef}`,
+      };
     },
     priority: 13,
   },

package/src/generators/test-generator/patterns/interaction-patterns.ts

@@ -27,9 +27,66 @@ function elementKeywordToRole(text: string): string | null {
 }
 
 /**
- * Interaction patterns: click, hover, press, wait
+ * Interaction patterns: click, hover, press, wait, alert
  */
 export const interactionPatterns: StepPattern[] = [
+  // === Browser Alert (system dialog) patterns ===
+  // These must appear BEFORE the click that triggers the alert in Gherkin:
+  //   When User click [OK] alert       ← registers page.once('dialog', ...)
+  //   And User click [Delete] button   ← triggers the alert
+  {
+    name: 'alert-accept',
+    matcher: (step: ParsedStep) =>
+      step.elementType === 'alert' &&
+      (step.text.includes('click') || step.text.includes('clicks')) &&
+      !step.dataRef &&
+      !!(step.selectorRef && /^(ok|accept|yes|confirm)$/i.test(step.selectorRef)),
+    resolver: (step, context) => {
+      return {
+        templateName: 'alert-accept-action',
+        data: {},
+        comment: `Accept browser alert`,
+      };
+    },
+    priority: 20,
+  },
+  {
+    name: 'alert-dismiss',
+    matcher: (step: ParsedStep) =>
+      step.elementType === 'alert' &&
+      (step.text.includes('click') || step.text.includes('clicks')) &&
+      !step.dataRef &&
+      !!(step.selectorRef && /^(cancel|dismiss|no)$/i.test(step.selectorRef)),
+    resolver: (step, context) => {
+      return {
+        templateName: 'alert-dismiss-action',
+        data: {},
+        comment: `Dismiss browser alert`,
+      };
+    },
+    priority: 20,
+  },
+  {
+    name: 'alert-fill',
+    matcher: (step: ParsedStep) =>
+      step.elementType === 'alert' &&
+      step.text.includes('fill') &&
+      !!step.dataRef,
+    resolver: (step, context) => {
+      let fillValue: string;
+      try {
+        fillValue = context.dataResolver.resolveData(step.dataRef!, context.featureName);
+      } catch {
+        fillValue = `\${${step.dataRef}}`;
+      }
+      return {
+        templateName: 'alert-fill-action',
+        data: { fillValue },
+        comment: `Fill browser prompt with ${step.dataRef}`,
+      };
+    },
+    priority: 20,
+  },
   {
     name: 'unknown-element-action',
     matcher: (step: ParsedStep) => {

package/src/generators/test-generator/utils/selector-resolver.ts

@@ -211,6 +211,13 @@ export class SelectorResolver {
       'heading': () => ({ strategy: 'role', role: 'heading', name: label, value: 'heading' }),
       'list': () => ({ strategy: 'role', role: 'list', name: label, value: 'list' }),
       'listitem': () => ({ strategy: 'role', role: 'listitem', value: 'listitem' }),
+      'searchbox': () => ({ strategy: 'role', role: 'searchbox', name: label, value: 'searchbox' }),
+      'option': () => ({ strategy: 'role', role: 'option', name: label, value: 'option' }),
+      'slider': () => ({ strategy: 'role', role: 'slider', name: label, value: 'slider' }),
+      'switch': () => ({ strategy: 'role', role: 'switch', name: label, value: 'switch' }),
+      'tab': () => ({ strategy: 'role', role: 'tab', name: label, value: 'tab' }),
+      'dialog': () => ({ strategy: 'role', role: 'dialog', name: label, value: 'dialog' }),
+      'alertdialog': () => ({ strategy: 'role', role: 'alertdialog', name: label, value: 'alertdialog' }),
     };
 
     const factory = strategyMap[normalized];
@@ -247,6 +254,15 @@ export class SelectorResolver {
       'textbox': 'field',
       'textarea': 'field',
       'editor': 'field',
+      // Search alias → searchbox role
+      'search': 'searchbox',
+      // Toggle alias → switch role
+      'toggle': 'switch',
+      // Alert alias → alertdialog role
+      'alert': 'alertdialog',
+      // Modal/drawer alias → dialog role
+      'modal': 'dialog',
+      'drawer': 'dialog',
     };
     return aliasMap[elementType] || elementType;
   }

package/src/orchestrator/templates/ai-instructions/claude-cmd-make-test.md

@@ -18,7 +18,14 @@ Parse **screen** from `$ARGUMENTS`. If missing, ask the user.
 1. Verify `qa/screens/<screen>/` has `.feature` + `test-data.yaml`. If not → `/sungen:make-tc` first.
 2. Generate `selectors.yaml` from live page using `sungen-selector-fix` and `sungen-selector-keys` skills.
 3. Compile: `sungen generate --screen <screen>`
-4. Run: `npx playwright test specs/screens/<screen>/<screen>.spec.ts`
-5. If fail → fix selectors/test-data per `sungen-selector-fix` + `sungen-error-mapping` skills, retry (max 5).
-6. After 5 fails → ask user about direct `.spec.ts` fix.
-7. Show: pass/fail, attempt count, files changed.
+4. **Initial run** — run ALL tests to get the full failure picture:
+   `npx playwright test specs/generated/<screen>/<screen>.spec.ts --reporter=line`
+5. **Batched fix loop** (max 5 attempts) — see `sungen-selector-fix` skill for details:
+   - Group failures by root cause (same selector, same error type)
+   - Fix selectors/test-data for the current batch
+   - Recompile, then re-run ONLY the previously-failing tests (max 20 at a time via `--grep`)
+   - If the batch passes, pick the next batch of remaining failures
+   - Repeat until no failures remain or max attempts reached
+6. **Final confirmation** — run ALL tests once to ensure no regressions.
+7. After 5 fix attempts still failing → ask user about direct `.spec.ts` fix.
+8. Show: pass/fail, attempt count, files changed.

package/src/orchestrator/templates/ai-instructions/claude-skill-error-mapping.md

@@ -6,16 +6,29 @@ user-invocable: false
 
 ## Playwright Errors → Fix
 
-| Error | Fix in `selectors.yaml` |
+| Error | Fix |
 |---|---|
-| strict mode violation | add `nth`, `exact: true`, or specific `name` |
-| Element is not an input | change `type` or `value` |
-| Timeout waiting for selector | fix `type`/`value`/`name` to match element |
-| toBeVisible Timeout | verify accessible name or use `testid` |
-| toHaveText mismatch | fix in `test-data.yaml` |
-| Navigation failed | fix page `value` path |
-| not a select | set `variant: 'custom'` |
-| Frame not found | fix `frame` value |
+| strict mode violation | add `nth`, `exact: true`, or specific `name` in selectors.yaml |
+| Element is not an input | change `type` or `value` in selectors.yaml |
+| Timeout waiting for selector | fix `type`/`value`/`name` to match element in selectors.yaml |
+| toBeVisible Timeout | verify accessible name or use `testid` in selectors.yaml |
+| toHaveText mismatch | fix expected text in `test-data.yaml` — OR if element is an input (field/textarea/search/dropdown), change Gherkin type so compiler uses `toHaveValue` instead |
+| toHaveValue mismatch | fix expected value in `test-data.yaml` — this is for input elements (field, textarea, search, dropdown, slider, date-picker) |
+| toContainText mismatch | fix expected partial text in `test-data.yaml` |
+| Navigation failed | fix page `value` path in selectors.yaml |
+| not a select | set `variant: 'custom'` in selectors.yaml |
+| Frame not found | fix `frame` value in selectors.yaml |
+| dialog was dismissed | alert step is AFTER the trigger — move `click [OK] alert` BEFORE the button click that opens the dialog |
+| page.once('dialog') never fired | no browser dialog appeared — check if the action actually triggers a `window.alert/confirm/prompt`, not a CSS modal |
+
+### Assertion type mismatch (toHaveText vs toHaveValue)
+
+Sungen picks the assertion based on element type:
+- **Input types** (`field`, `textarea`, `search`, `dropdown`, `slider`, `date-picker`) → `toHaveValue()`
+- **Text types** (everything else: `message`, `header`, `label`, `row`, etc.) → `toHaveText()`
+- **Partial match** (uses `contains` keyword) → `toContainText()`
+
+If you see `toHaveText` failing on an input element, the Gherkin step has the wrong target type. Fix: change the target type in the `.feature` file (e.g., `see [Email] message with {{v}}` → `see [Email] field with {{v}}`).
 
 ## Auth Errors → Fix