@sun-asterisk/sungen 1.0.22 → 1.0.24

package/src/core/live-scanner/step-replayer.ts

@@ -23,6 +23,19 @@ interface ReplayResult {
   errors: string[];
 }
 
+/**
+ * Resolve a {{dataRef}} path against test-data object.
+ * Supports dot-notation: "email.valid" → testData.email.valid
+ */
+function resolveDataRef(testData: Record<string, any>, dataRef: string): string {
+  const parts = dataRef.replace(/[{}]/g, '').split('.');
+  let value: any = testData;
+  for (const part of parts) {
+    value = value?.[part];
+  }
+  return typeof value === 'string' ? value : String(value ?? '');
+}
+
 /**
  * Replay a sequence of Gherkin steps on a Playwright page,
  * finding and interacting with elements along the way.
@@ -32,7 +45,8 @@ export async function replaySteps(
   steps: ParsedStepInfo[],
   featurePath: string,
   baseUrl: string,
-  existingElements?: Record<string, LiveElement>
+  existingElements?: Record<string, LiveElement>,
+  testData?: Record<string, any> | null
 ): Promise<ReplayResult> {
   const elements: Record<string, LiveElement> = {};
   const errors: string[] = [];
@@ -80,6 +94,7 @@ export async function replaySteps(
             name: step.selectorRef,
             testid: null,
             tag: '',
+            contenteditable: false,
             placeholder: null,
             label: null,
             context: 'page',
@@ -112,7 +127,7 @@ export async function replaySteps(
         (elements[key] as any).skipped = true;
         console.log(`      ⏩ [${step.selectorRef}] ${elementType} → cached (${existingElements[key].selectorType})`);
 
-        // Still execute clicks for cached elements to maintain page state
+        // Still execute actions for cached elements to maintain page state
         if (action === 'click') {
           try {
             await executeClick(page, step.selectorRef, elementType, nth);
@@ -121,12 +136,32 @@ export async function replaySteps(
           } catch {
             // Click failed for cached element, continue anyway
           }
+        } else if (action === 'fill' && testData && step.dataRef) {
+          try {
+            const value = resolveDataRef(testData, step.dataRef);
+            if (value) {
+              await executeFill(page, step.selectorRef, elementType, nth, value);
+              await settle(page);
+            }
+          } catch {
+            // Fill failed for cached element, continue anyway
+          }
+        } else if (action === 'select' && testData && step.dataRef) {
+          try {
+            const value = resolveDataRef(testData, step.dataRef);
+            if (value) {
+              await executeSelect(page, step.selectorRef, elementType, nth, value);
+              await settle(page);
+            }
+          } catch {
+            // Select failed for cached element, continue anyway
+          }
         }
         continue;
       }
 
-      // Find the element on the page
-      const element = await findElement(page, step.selectorRef, elementType, nth);
+      // Find the element on the page, scoped to current context (dialog/page)
+      const element = await findElement(page, step.selectorRef, elementType, nth, currentContext);
       element.context = currentContext;
 
       // Record in matrix (first match wins for duplicate keys)
@@ -141,11 +176,75 @@ export async function replaySteps(
           await settle(page);
           currentContext = await detectCurrentContext(page, currentContext, step.text);
         } else if (action === 'fill') {
-          // For fill actions during scanning, use a placeholder value
-          // We just need to verify the element exists
+          if (testData && step.dataRef) {
+            const value = resolveDataRef(testData, step.dataRef);
+            if (value) {
+              try {
+                await executeFill(page, step.selectorRef, elementType, nth, value);
+                await settle(page);
+              } catch (e: any) {
+                errors.push(`Step "${step.text}": fill failed — ${e.message}`);
+              }
+            }
+          }
+        } else if (action === 'select') {
+          if (testData && step.dataRef) {
+            const value = resolveDataRef(testData, step.dataRef);
+            if (value) {
+              try {
+                await executeSelect(page, step.selectorRef, elementType, nth, value);
+                await settle(page);
+              } catch (e: any) {
+                errors.push(`Step "${step.text}": select failed — ${e.message}`);
+              }
+            }
+          }
+        }
+        // Label-value detection: check if the data value appears in a sibling element
+        if (action === 'see' && normalizedType === 'text' && (elementType === 'label' || elementType === 'title' || elementType === 'caption') && testData && step.dataRef) {
+          const dataValue = resolveDataRef(testData, step.dataRef);
+          if (dataValue) {
+            try {
+              // Check if the parent container has both the label text and the data value
+              const hasLabelValue = await page.getByText(new RegExp(escapeRegex(element.gherkinRef) + '.*' + escapeRegex(dataValue))).first().isVisible({ timeout: 2000 });
+              if (hasLabelValue) {
+                element.matchMethod = 'label-value';
+                elements[key] = element;
+              }
+            } catch {
+              // Regex match failed, keep original matchMethod
+            }
+          }
         }
         // 'see' and 'wait' actions: just record, don't interact
       } else {
+        // Try data-value fallback for click actions: use the resolved data value as element name
+        if (action === 'click' && testData && step.dataRef) {
+          const dataValue = resolveDataRef(testData, step.dataRef);
+          if (dataValue) {
+            // Brief wait for dynamic content (e.g. autocomplete dropdown after fill)
+            await page.waitForTimeout(1000);
+            const fallback = await findElement(page, dataValue, elementType, nth, currentContext);
+            if (fallback.matchMethod !== 'unresolved') {
+              // Preserve original gherkinRef; clear locator values since they come
+              // from test-data ({{dataRef}}) at runtime, not hardcoded from DOM.
+              // Store dataValue for logging in scanner.ts
+              fallback.gherkinRef = step.selectorRef;
+              (fallback as any).dataValue = dataValue;
+              fallback.name = '';
+              fallback.exact = false;
+              elements[key] = fallback;
+              try {
+                await executeClick(page, dataValue, elementType, nth);
+                await settle(page);
+                currentContext = await detectCurrentContext(page, currentContext, step.text);
+              } catch {
+                // Click failed, element still recorded
+              }
+              continue;
+            }
+          }
+        }
         errors.push(`Step "${step.text}": element [${step.selectorRef}] not found`);
         // Continue scanning remaining steps — record what we can even if some elements are missing
       }
@@ -198,6 +297,104 @@ async function executeClick(
   }
 }
 
+async function executeFill(
+  page: Page,
+  ref: string,
+  elementType: string,
+  nth: number,
+  value: string
+): Promise<void> {
+  const namePattern = new RegExp(escapeRegex(ref), 'i');
+
+  // Try placeholder first — most direct for input fields, avoids slow role attempts
+  try {
+    const locator = page.getByPlaceholder(namePattern);
+    const target = nth > 0 ? locator.nth(nth) : locator.first();
+    if (await target.isVisible({ timeout: 3000 })) {
+      await target.fill(value, { timeout: 5000 });
+      return;
+    }
+  } catch {
+    // continue
+  }
+
+  // Try label
+  try {
+    const locator = page.getByLabel(namePattern);
+    const target = nth > 0 ? locator.nth(nth) : locator.first();
+    if (await target.isVisible({ timeout: 3000 })) {
+      await target.fill(value, { timeout: 5000 });
+      return;
+    }
+  } catch {
+    // continue
+  }
+
+  // Try role-based fill (textbox, combobox, spinbutton)
+  const { getRoleFallbacks } = require('./role-fallback');
+  const roles = getRoleFallbacks(elementType);
+
+  for (const role of roles) {
+    try {
+      const locator = page.getByRole(role as any, { name: namePattern });
+      const target = nth > 0 ? locator.nth(nth) : locator.first();
+      if (await target.isVisible({ timeout: 3000 })) {
+        await target.fill(value, { timeout: 5000 });
+        return;
+      }
+    } catch {
+      continue;
+    }
+  }
+
+  // Try testid as last resort
+  const normalized = ref.toLowerCase().replace(/[\s_-]+/g, '-');
+  await page.locator(`[data-testid*="${normalized}" i]`).first().fill(value, { timeout: 5000 });
+}
+
+async function executeSelect(
+  page: Page,
+  ref: string,
+  elementType: string,
+  nth: number,
+  value: string
+): Promise<void> {
+  const namePattern = new RegExp(escapeRegex(ref), 'i');
+
+  // Try label first — most direct for select elements
+  try {
+    const locator = page.getByLabel(namePattern);
+    const target = nth > 0 ? locator.nth(nth) : locator.first();
+    if (await target.isVisible({ timeout: 3000 })) {
+      await target.selectOption(value, { timeout: 5000 });
+      return;
+    }
+  } catch {
+    // continue
+  }
+
+  // Try role-based select (combobox, listbox)
+  const { getRoleFallbacks } = require('./role-fallback');
+  const roles = getRoleFallbacks(elementType);
+
+  for (const role of roles) {
+    try {
+      const locator = page.getByRole(role as any, { name: namePattern });
+      const target = nth > 0 ? locator.nth(nth) : locator.first();
+      if (await target.isVisible({ timeout: 3000 })) {
+        await target.selectOption(value, { timeout: 5000 });
+        return;
+      }
+    } catch {
+      continue;
+    }
+  }
+
+  // Try testid as last resort
+  const normalized = ref.toLowerCase().replace(/[\s_-]+/g, '-');
+  await page.locator(`[data-testid*="${normalized}" i]`).first().selectOption(value, { timeout: 5000 });
+}
+
 function detectAction(text: string): string {
   const lower = text.toLowerCase();
   if (/\b(is on|navigate|go to|visit|open)\b/.test(lower) && /\bpage\b/.test(lower)) return 'navigate';
@@ -287,6 +484,7 @@ function normalizeElementType(elementType: string, action: string): string {
   if (t === 'element') return 'element';
   if (t === 'column' || t === 'columnheader') return 'column';
   if (t === 'logo' || t === 'image' || t === 'img' || t === 'icon') return 'img';
+  if (t === 'option' || t === 'item' || t === 'listitem') return 'option';
   if (t === 'dialog' || t === 'modal') return 'dialog';
   if (t === 'heading' || t === 'header') return 'heading';
   if (t === 'title' || t === 'caption' || t === 'message') return 'text';

package/src/core/live-scanner/types.ts

@@ -10,9 +10,9 @@
  *   text        → page.getByText(value)
  */
 
-export type MatchMethod = 'testid' | 'exact_role' | 'role_fallback' | 'label' | 'placeholder' | 'text_only' | 'unresolved';
+export type MatchMethod = 'testid' | 'exact_role' | 'role_fallback' | 'label' | 'placeholder' | 'text_only' | 'contenteditable' | 'label-value' | 'unresolved';
 
-export type SelectorType = 'testid' | 'role' | 'label' | 'placeholder' | 'text';
+export type SelectorType = 'testid' | 'role' | 'label' | 'placeholder' | 'text' | 'locator';
 
 export type ElementContext = 'page' | 'dialog' | 'menu' | 'modal' | 'popup';
 
@@ -25,6 +25,7 @@ export interface LiveElement {
   name: string;
   testid: string | null;
   tag: string;
+  contenteditable: boolean;
   placeholder: string | null;
   label: string | null;
   context: ElementContext;

package/src/generators/scaffold-generator/index.ts

@@ -17,6 +17,7 @@ export interface ScaffoldElement {
   name?: string;       // For role type (accessible name), or label text
   nth: number;
   exact?: boolean;     // Whether to use exact matching (default: false)
+  inputMethod?: string; // 'pressSequentially' for contenteditable/rich-text elements
 }
 
 export interface ScaffoldResult {
@@ -165,6 +166,9 @@ export class ScaffoldGenerator {
     if (/^textarea\b/.test(lowerText) || /^\d*\s*textarea\b/.test(lowerText)) {
       return 'textarea';
     }
+    if (/^editor\b/.test(lowerText) || /^\d*\s*editor\b/.test(lowerText)) {
+      return 'editor';
+    }
     if (/^text\b/.test(lowerText) || /^\d*\s*text\b/.test(lowerText)) {
       return 'text';
     }
@@ -183,6 +187,9 @@ export class ScaffoldGenerator {
     if (/^(logo|image|img|icon)\b/.test(lowerText) || /^\d*\s*(logo|image|img|icon)\b/.test(lowerText)) {
       return 'img';
     }
+    if (/^(option|item|listitem)\b/.test(lowerText) || /^\d*\s*(option|item|listitem)\b/.test(lowerText)) {
+      return 'option';
+    }
     if (/^(dialog|modal)\b/.test(lowerText) || /^\d*\s*(dialog|modal)\b/.test(lowerText)) {
       return 'dialog';
     }
@@ -690,50 +697,73 @@ export class ScaffoldGenerator {
         // Only set exact when true (omit from YAML when false for cleaner output)
         const exactField = liveElement.exact ? { exact: true } : {};
 
+        // Strip 'name' from scaffold base — only 'role' type uses name
+        const { name: _scaffoldName, ...scaffoldBase } = scaffoldElement as any;
+
         if (selectorType === 'testid' && liveElement.testid) {
           // page.getByTestId('value')
           enriched[key] = {
-            ...scaffoldElement,
+            ...scaffoldBase,
             type: 'testid' as any,
             value: liveElement.testid,
           };
         } else if (selectorType === 'role' && liveElement.role) {
           // page.getByRole('button', { name: 'Submit' })
+          // When name is empty (e.g. data-value fallback), keep it as '' —
+          // the actual name comes from test-data at runtime
           enriched[key] = {
-            ...scaffoldElement,
+            ...scaffoldBase,
             type: 'role',
             value: liveElement.role,
-            name: liveElement.name || liveElement.gherkinRef,
+            name: liveElement.name,
             ...exactField,
           };
         } else if (selectorType === 'label' && liveElement.label) {
           // page.getByLabel('Username')
           enriched[key] = {
-            ...scaffoldElement,
+            ...scaffoldBase,
             type: 'label',
             value: liveElement.label,
             ...exactField,
           };
-        } else if (selectorType === 'placeholder' && liveElement.placeholder) {
+        } else if (selectorType === 'placeholder' && (liveElement.placeholder || liveElement.selectorValue)) {
           // page.getByPlaceholder('Enter email')
           enriched[key] = {
-            ...scaffoldElement,
+            ...scaffoldBase,
             type: 'placeholder',
-            value: liveElement.placeholder,
+            value: liveElement.placeholder || liveElement.selectorValue,
             ...exactField,
           };
         } else if (selectorType === 'text') {
           // page.getByText('Welcome')
+          // When name is empty (data-value fallback), keep value empty —
+          // the actual text comes from test-data at runtime
           enriched[key] = {
-            ...scaffoldElement,
+            ...scaffoldBase,
             type: 'text',
-            value: liveElement.name || liveElement.gherkinRef,
+            value: liveElement.name,
             ...exactField,
           };
+        } else if (selectorType === 'locator' && liveElement.selectorValue) {
+          // page.locator('[contenteditable="true"]') — CSS locator
+          // Reset nth to 0: the original nth was for text matches, not this locator type
+          enriched[key] = {
+            ...scaffoldBase,
+            type: 'locator' as any,
+            value: liveElement.selectorValue,
+            nth: 0,
+          };
         } else {
           continue;
         }
 
+        // Detect contenteditable div-based editors (rich text editors like TipTap, Quill, ProseMirror)
+        // When the DOM element is contenteditable but NOT a native input/textarea,
+        // mark it so the generator uses click + pressSequentially instead of .fill()
+        if (liveElement.contenteditable && liveElement.tag !== 'textarea' && liveElement.tag !== 'input') {
+          enriched[key] = { ...enriched[key], inputMethod: 'pressSequentially' };
+        }
+
         enrichedCount++;
         if (liveElement.warning) {
           warningCount++;

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

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

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

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

package/src/generators/test-generator/adapters/playwright/templates/steps/partials/locator-strategies/locator.hbs

@@ -1 +1 @@
-page.locator('{{escapeQuotes value}}')
+{{pageRoot}}.locator('{{escapeQuotes value}}')

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

@@ -227,6 +227,43 @@ export const assertionPatterns: StepPattern[] = [
       !!step.dataRef &&
       step.text.includes('with'),
     generator: (step, context) => {
+      // Resolve data variable value
+      let dataValue: string;
+      try {
+        dataValue = context.dataResolver.resolveData(step.dataRef!, context.featureName);
+      } catch (error) {
+        dataValue = `\${${step.dataRef}}`;
+      }
+
+      // Label-value pattern: "User see [X] label with {{Y}}"
+      // Uses regex getByText to match container with both label and value text
+      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(
+            step.selectorRef!,
+            context.featureName,
+            step.elementType,
+            step.nth
+          );
+          if (resolved.value !== undefined && resolved.value.trim() === '') {
+            label = undefined;
+          }
+        } catch {
+          // No selector entry — use label from selectorRef
+        }
+
+        const code = context.templateEngine.renderStep('label-value-assertion', {
+          label,
+          dataValue,
+        });
+        return {
+          code,
+          comment: `Assert ${step.selectorRef} label with value ${step.dataRef}`,
+        };
+      }
+
       // Resolve selector from YAML with feature context
       let resolved: any = {};
       try {
@@ -240,14 +277,6 @@ export const assertionPatterns: StepPattern[] = [
         // Selector not in YAML or context issue - will use variable-only
       }
 
-      // Resolve data variable value
-      let dataValue: string;
-      try {
-        dataValue = context.dataResolver.resolveData(step.dataRef!, context.featureName);
-      } catch (error) {
-        dataValue = `\${${step.dataRef}}`;
-      }
-
       const escapedVariable = dataValue.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&');
 
       // Check if it's a locator strategy - use locator with filter

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

@@ -52,10 +52,17 @@ export const formPatterns: StepPattern[] = [
         value = step.value!;
       }
 
+      // Use pressSequentially template for contenteditable/rich-text editors (auto-detected by live-scan)
+      // or when Gherkin explicitly uses 'editor' element type
+      const isEditor = resolved.inputMethod === 'pressSequentially' || step.elementType === 'editor';
+      const templateName = isEditor ? 'fill-editor-action' : 'fill-action';
+
       return {
-        templateName: 'fill-action',
+        templateName,
         data: { ...resolved, selectorRef: step.selectorRef, fillValue: value },
-        comment: `Fill ${step.selectorRef} with ${step.dataRef || step.value}`,
+        comment: isEditor
+          ? `Fill rich text editor ${step.selectorRef} with ${step.dataRef || step.value}`
+          : `Fill ${step.selectorRef} with ${step.dataRef || step.value}`,
       };
     },
     priority: 10,

package/src/generators/test-generator/step-mapper.ts

@@ -104,12 +104,14 @@ export class StepMapper {
       const contextVars: Record<string, any> = { inDialog: true };
 
       if (step.selectorRef && step.dataRef) {
-        // Case 3: [panel] dialog with {{value}} → filter by resolved data value
+        // Case 3: [panel] dialog with {{value}}
+        // Use dataRef as filter text — the dialog name is dynamic (from test-data),
+        // so use .filter({ hasText }) instead of { name } for reliable matching
         let filterText = '';
         try {
           filterText = this.dataResolver.resolveData(step.dataRef, this.featureName);
         } catch {
-          filterText = '';
+          filterText = `\${${step.dataRef}}`;
         }
         contextVars.dialogFilterText = filterText;
       } else if (step.selectorRef) {

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

@@ -198,6 +198,7 @@ interface SelectorEntry {
   name?: string;      // Accessible name for role-based selectors (e.g., 'Login', 'Submit')
   nth?: number;       // Element index (0 = no index, 1+ = append .nth())
   exact?: boolean;    // Whether to use exact matching (default: false)
+  inputMethod?: string; // 'pressSequentially' for contenteditable/rich-text elements
 }
 
 // New selector file structure: flat key-value pairs
@@ -224,6 +225,7 @@ export interface ResolvedSelector {
   locator?: string;  // CSS locator for fallback
   nth?: number;       // Index for .nth() if multiple matches exist
   exact?: boolean;    // Whether to use exact matching (default: false)
+  inputMethod?: string; // 'pressSequentially' for contenteditable/rich-text elements
 }
 
 /**
@@ -288,7 +290,7 @@ export class SelectorResolver {
    * NOTE: textbox/textarea must precede "text" to prevent partial matching.
    */
   static extractNthFromStep(afterElement: string): number {
-    const nthRegex = /^\s*(?:field|button|textbox|textarea|text|link|input|element|item|logo|image|img|icon|raw|table|column|columnheader|list|listitem|row|checkbox|radio|dropdown|select|uploader|heading|header|label|caption|title|message)?\s*(\d+)\b/i;
+    const nthRegex = /^\s*(?:field|button|textbox|textarea|editor|text|link|input|element|item|logo|image|img|icon|raw|table|column|columnheader|list|listitem|row|checkbox|radio|dropdown|select|uploader|heading|header|label|caption|title|message)?\s*(\d+)\b/i;
     const match = nthRegex.exec(afterElement);
     return match ? parseInt(match[1], 10) : 0;
   }
@@ -391,6 +393,7 @@ export class SelectorResolver {
       'input': 'field',
       'textbox': 'field',
       'textarea': 'field',
+      'editor': 'field',
     };
     return aliasMap[elementType] || elementType;
   }
@@ -518,79 +521,84 @@ export class SelectorResolver {
     const name = entry.name !== undefined && entry.name !== null ? entry.name : originalLabel;
     const nth = entry.nth || 0;
     const exact = entry.exact === true;
+    const inputMethod = entry.inputMethod;
+
+    // Helper to attach inputMethod only when present
+    const withInputMethod = (resolved: ResolvedSelector): ResolvedSelector =>
+      inputMethod ? { ...resolved, inputMethod } : resolved;
 
     // If type is 'locator', use locator field (or value as fallback) as the CSS locator directly
     if (type === 'locator') {
       const locatorValue = locator && locator.trim() ? locator : value;
-      return {
+      return withInputMethod({
         strategy: 'locator',
         value: locatorValue,
         locator: locatorValue,
         nth,
-      };
+      });
     }
 
     // If custom locator is provided and type is not 'locator', use it as CSS selector
     if (locator && locator.trim()) {
-      return {
+      return withInputMethod({
         strategy: 'css',
         value: locator,
         locator: locator,
         nth,
-      };
+      });
     }
 
     // Use type-based strategy
     switch (type) {
       case 'placeholder':
-        return {
+        return withInputMethod({
           strategy: 'placeholder',
           value,
           nth,
           exact,
-        };
+        });
 
       case 'role':
-        return {
+        return withInputMethod({
           strategy: 'role',
           role: value,
           name: name,  // Use the name field for accessible name
           value,
           nth,
           exact,
-        };
+        });
 
       case 'testid':
-        return {
+        return withInputMethod({
           strategy: 'testid',
           value,
           nth,
-        };
+        });
 
       case 'label':
-        return {
+        return withInputMethod({
           strategy: 'label',
           value,
           nth,
           exact,
-        };
+        });
 
       case 'text':
-        return {
+        return withInputMethod({
           strategy: 'text',
           value,
           nth,
           exact,
-        };
+        });
 
       default:
         // Fallback to placeholder
-        return {
+        return withInputMethod({
           strategy: 'placeholder',
           value,
           nth,
           exact,
-        };
+        });
     }
   }