@sun-asterisk/sungen 1.0.21 → 1.0.23

package/src/core/live-scanner/matrix-writer.ts

@@ -7,6 +7,16 @@ import * as fs from 'fs';
 import * as yaml from 'yaml';
 import { LiveScanResult } from './types';
 
+/**
+ * Sanitize a string value before YAML serialization:
+ * collapse newlines/tabs/carriage-returns into spaces to prevent
+ * broken escape sequences (e.g. \\n) in QUOTE_DOUBLE output.
+ */
+function sanitizeForYaml(value: string | null): string | null {
+  if (!value) return value;
+  return value.replace(/[\n\r\t]/g, ' ').replace(/\s+/g, ' ').trim() || null;
+}
+
 export function writeMatrix(result: LiveScanResult, outputPath: string): void {
   const output: any = {
     screen: result.screen,
@@ -31,13 +41,14 @@ export function writeMatrix(result: LiveScanResult, outputPath: string): void {
       scenarioData.elements[elementKey] = {
         gherkin_type: element.gherkinType,
         selector_type: element.selectorType,
-        selector_value: element.selectorValue,
+        selector_value: sanitizeForYaml(element.selectorValue),
         role: element.role,
-        name: element.name,
+        name: sanitizeForYaml(element.name),
         testid: element.testid,
         tag: element.tag,
-        placeholder: element.placeholder,
-        label: element.label,
+        contenteditable: element.contenteditable,
+        placeholder: sanitizeForYaml(element.placeholder),
+        label: sanitizeForYaml(element.label),
         context: element.context,
         match_method: element.matchMethod,
         exact: element.exact,

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

@@ -80,6 +80,7 @@ export async function replaySteps(
             name: step.selectorRef,
             testid: null,
             tag: '',
+            contenteditable: false,
             placeholder: null,
             label: null,
             context: 'page',
@@ -125,8 +126,8 @@ export async function replaySteps(
         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)

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' | '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';
     }
@@ -730,10 +734,26 @@ export class ScaffoldGenerator {
             value: liveElement.name || liveElement.gherkinRef,
             ...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] = {
+            ...scaffoldElement,
+            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/partials/locator-strategies/locator.hbs

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

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,14 +104,17 @@ 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
-        let filterText = '';
+        // Case 3: [panel] dialog with {{value}}
+        // Use dialog role name from selector (more reliable than filter by data text,
+        // since the data value may not be present in the dialog when it first opens)
+        let roleName = step.selectorRef;
         try {
-          filterText = this.dataResolver.resolveData(step.dataRef, this.featureName);
+          const resolved = this.selectorResolver.resolveSelector(step.selectorRef, this.featureName, 'dialog', 0);
+          roleName = resolved.name || step.selectorRef;
         } catch {
-          filterText = '';
+          roleName = step.selectorRef;
         }
-        contextVars.dialogFilterText = filterText;
+        contextVars.dialogRoleName = roleName;
       } else if (step.selectorRef) {
         // Case 2: [Title] dialog → named dialog role
         let roleName = 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)?\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,
-        };
+        });
     }
   }