pw-core 1.3.0 → 1.3.1

package/dist/codegen/action-formatter.d.ts

@@ -0,0 +1,19 @@
+/** Normalized subset of a Playwright recorder action used for spec generation. */
+export interface RecordedAction {
+    name: string;
+    nth?: number;
+    clickCount?: number;
+    modifiers?: string[];
+    text?: string;
+    files?: unknown;
+    key?: string;
+    options?: unknown;
+    substring?: boolean;
+    checked?: boolean;
+    value?: string;
+    ariaSnapshot?: string;
+}
+/**
+ * Formats a recorded user action into executable Playwright test code using typed page methods.
+ */
+export declare function formatActionCall(pageKey: string, elementKey: string, action: RecordedAction, isTextSelector?: boolean, textValue?: string): string;

package/dist/codegen/action-formatter.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatActionCall = formatActionCall;
+/**
+ * Formats a recorded user action into executable Playwright test code using typed page methods.
+ */
+function formatActionCall(pageKey, elementKey, action, isTextSelector = false, textValue) {
+    const getLocatorExpression = () => {
+        if (isTextSelector && textValue) {
+            let expr = `${pageKey}.page.getByText('${textValue.replace(/'/g, "\\'")}')`;
+            if (action.nth !== undefined && action.nth !== 0) {
+                expr += `.nth(${action.nth})`;
+            }
+            return expr;
+        }
+        return null;
+    };
+    // Escape single quotes in elementKey so generated code like click('I\'m Feeling Lucky') is valid JS
+    const safeKey = elementKey.replace(/'/g, "\\'");
+    switch (action.name) {
+        case 'click': {
+            let method = 'click';
+            if (action.clickCount === 2)
+                method = 'dblclick';
+            const opts = [];
+            if (action.modifiers && action.modifiers.length) {
+                opts.push(`modifiers: [${action.modifiers.map((m) => `'${m}'`).join(', ')}]`);
+            }
+            const locatorExpr = getLocatorExpression();
+            if (locatorExpr) {
+                const optsStr = opts.length ? `{ ${opts.join(', ')} }` : '';
+                return `  await ${locatorExpr}.${method}(${optsStr});`;
+            }
+            if (action.nth !== undefined && action.nth !== 0) {
+                opts.push(`nth: ${action.nth}`);
+            }
+            const optsStr = opts.length ? `, { ${opts.join(', ')} }` : '';
+            return `  await ${pageKey}.${method}('${safeKey}'${optsStr});`;
+        }
+        case 'hover': {
+            const locatorExpr = getLocatorExpression();
+            if (locatorExpr) {
+                return `  await ${locatorExpr}.hover();`;
+            }
+            const optsStr = action.nth !== undefined && action.nth !== 0 ? `, { nth: ${action.nth} }` : '';
+            return `  await ${pageKey}.hover('${safeKey}'${optsStr});`;
+        }
+        case 'check': {
+            const locatorExpr = getLocatorExpression();
+            if (locatorExpr) {
+                return `  await ${locatorExpr}.check();`;
+            }
+            const optsStr = action.nth !== undefined && action.nth !== 0 ? `, { nth: ${action.nth} }` : '';
+            return `  await ${pageKey}.check('${safeKey}'${optsStr});`;
+        }
+        case 'uncheck': {
+            const locatorExpr = getLocatorExpression();
+            if (locatorExpr) {
+                return `  await ${locatorExpr}.uncheck();`;
+            }
+            const optsStr = action.nth !== undefined && action.nth !== 0 ? `, { nth: ${action.nth} }` : '';
+            return `  await ${pageKey}.uncheck('${safeKey}'${optsStr});`;
+        }
+        case 'fill': {
+            const locatorExpr = getLocatorExpression();
+            if (locatorExpr) {
+                return `  await ${locatorExpr}.fill('${action.text.replace(/'/g, "\\'")}');`;
+            }
+            const optsStr = action.nth !== undefined && action.nth !== 0 ? `, { nth: ${action.nth} }` : '';
+            return `  await ${pageKey}.fill('${safeKey}', '${action.text.replace(/'/g, "\\'")}'${optsStr});`;
+        }
+        case 'setInputFiles': {
+            const locatorExpr = getLocatorExpression();
+            if (locatorExpr) {
+                return `  await ${locatorExpr}.setInputFiles(${JSON.stringify(action.files)});`;
+            }
+            const optsStr = action.nth !== undefined && action.nth !== 0 ? `, { nth: ${action.nth} }` : '';
+            return `  await ${pageKey}.setInputFiles('${safeKey}', ${JSON.stringify(action.files)}${optsStr});`;
+        }
+        case 'press': {
+            const modifiers = Array.isArray(action.modifiers) ? action.modifiers : [];
+            const shortcut = [...modifiers, action.key].join('+');
+            const locatorExpr = getLocatorExpression();
+            if (locatorExpr) {
+                return `  await ${locatorExpr}.press('${shortcut}');`;
+            }
+            const optsStr = action.nth !== undefined && action.nth !== 0 ? `, { nth: ${action.nth} }` : '';
+            return `  await ${pageKey}.press('${safeKey}', '${shortcut}'${optsStr});`;
+        }
+        case 'navigate':
+            return `  await ${pageKey}.goto();`;
+        case 'select': {
+            const locatorExpr = getLocatorExpression();
+            if (locatorExpr) {
+                return `  await ${locatorExpr}.selectOption(${JSON.stringify(action.options)});`;
+            }
+            const optsStr = action.nth !== undefined && action.nth !== 0 ? `, { nth: ${action.nth} }` : '';
+            return `  await ${pageKey}.selectOption('${safeKey}', ${JSON.stringify(action.options)}${optsStr});`;
+        }
+        case 'assertText': {
+            const locatorExpr = getLocatorExpression();
+            if (locatorExpr) {
+                return `  await expect(${locatorExpr}).${action.substring ? 'toContainText' : 'toHaveText'}('${action.text.replace(/'/g, "\\'")}');`;
+            }
+            const opts = [];
+            if (action.nth !== undefined && action.nth !== 0)
+                opts.push(`nth: ${action.nth}`);
+            const optsStr = opts.length ? `, { ${opts.join(', ')} }` : '';
+            return `  await ${pageKey}.verify('${safeKey}'${optsStr}).${action.substring ? 'toContainText' : 'toHaveText'}('${action.text.replace(/'/g, "\\'")}');`;
+        }
+        case 'assertChecked': {
+            const locatorExpr = getLocatorExpression();
+            if (locatorExpr) {
+                return `  await expect(${locatorExpr})${action.checked ? '' : '.not'}.toBeChecked();`;
+            }
+            const opts = [];
+            if (action.nth !== undefined && action.nth !== 0)
+                opts.push(`nth: ${action.nth}`);
+            const optsStr = opts.length ? `, { ${opts.join(', ')} }` : '';
+            return `  await ${pageKey}.verify('${safeKey}'${optsStr})${action.checked ? '' : '.not'}.toBeChecked();`;
+        }
+        case 'assertVisible': {
+            const locatorExpr = getLocatorExpression();
+            if (locatorExpr) {
+                return `  await expect(${locatorExpr}).toBeVisible();`;
+            }
+            const opts = [];
+            if (action.nth !== undefined && action.nth !== 0)
+                opts.push(`nth: ${action.nth}`);
+            const optsStr = opts.length ? `, { ${opts.join(', ')} }` : '';
+            return `  await ${pageKey}.verify('${safeKey}'${optsStr});`;
+        }
+        case 'assertValue': {
+            const locatorExpr = getLocatorExpression();
+            if (locatorExpr) {
+                const assertion = action.value ? `toHaveValue('${action.value.replace(/'/g, "\\'")}')` : `toBeEmpty()`;
+                return `  await expect(${locatorExpr}).${assertion};`;
+            }
+            const opts = [];
+            if (action.nth !== undefined && action.nth !== 0)
+                opts.push(`nth: ${action.nth}`);
+            const optsStr = opts.length ? `, { ${opts.join(', ')} }` : '';
+            const assertion = action.value ? `toHaveValue('${action.value.replace(/'/g, "\\'")}')` : `toBeEmpty()`;
+            return `  await ${pageKey}.verify('${safeKey}'${optsStr}).${assertion};`;
+        }
+        case 'assertSnapshot': {
+            const locatorExpr = getLocatorExpression();
+            if (locatorExpr) {
+                return `  await expect(${locatorExpr}).toMatchAriaSnapshot(\`\n${action.ariaSnapshot}\`);`;
+            }
+            const opts = [];
+            if (action.nth !== undefined && action.nth !== 0)
+                opts.push(`nth: ${action.nth}`);
+            const optsStr = opts.length ? `, { ${opts.join(', ')} }` : '';
+            return `  await ${pageKey}.verify('${safeKey}'${optsStr}).toMatchAriaSnapshot(\`\n${action.ariaSnapshot}\`);`;
+        }
+        default:
+            return `  // Unsupported action: ${action.name} on ${elementKey}`;
+    }
+}

package/dist/codegen/action-processor.d.ts

@@ -0,0 +1,23 @@
+import type { Page } from '@playwright/test';
+import { type MatchResult } from './registry-matcher';
+import type { LocatorCandidate, RegistryRoot } from './types';
+import type { RecordedAction } from './action-formatter';
+export interface ProcessedAction {
+    pageKey: string;
+    elementKey: string;
+    action: RecordedAction & {
+        selector: string;
+    };
+    matchResult: MatchResult | null;
+    smartLocator: LocatorCandidate | null;
+}
+/**
+ * Checks if a selector points to pw-core's floating recorder panel.
+ */
+export declare function isOwnPanelSelector(page: Page, selector?: string): Promise<boolean>;
+/**
+ * Resolves a recorded action to its matching page key, element key, and registry match details.
+ */
+export declare function processRecordedAction(page: Page, rawAction: RecordedAction & {
+    selector: string;
+}, currentUrl: string, currentTitle: string, registryObj: RegistryRoot, overrideMode: boolean): Promise<ProcessedAction | null>;

package/dist/codegen/action-processor.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isOwnPanelSelector = isOwnPanelSelector;
+exports.processRecordedAction = processRecordedAction;
+const selector_parser_1 = require("./selector-parser");
+const registry_matcher_1 = require("./registry-matcher");
+const index_1 = require("./generator/index");
+const action_validator_1 = require("./generator/action.validator");
+/**
+ * Checks if a selector points to pw-core's floating recorder panel.
+ */
+async function isOwnPanelSelector(page, selector) {
+    if (!selector)
+        return false;
+    const lowerSel = selector.toLowerCase();
+    if (lowerSel.includes('pw-core') ||
+        lowerSel.includes('pwcore') ||
+        lowerSel.includes('new test') ||
+        lowerSel.includes('add serial') ||
+        lowerSel.includes('new-serial') ||
+        lowerSel.includes('new-test')) {
+        return true;
+    }
+    try {
+        return await page
+            .locator(selector)
+            .evaluate((element) => {
+            const el = element;
+            return el.id === 'pw-core-codegen-panel' || el.closest('#pw-core-codegen-panel') !== null;
+        }, null, { timeout: 500 })
+            .catch(() => false);
+    }
+    catch {
+        // Return false if element evaluation throws or disconnected
+        return false;
+    }
+}
+/**
+ * Resolves a recorded action to its matching page key, element key, and registry match details.
+ */
+async function processRecordedAction(page, rawAction, currentUrl, currentTitle, registryObj, overrideMode) {
+    const action = { ...rawAction };
+    action.name = await (0, action_validator_1.normalizeActionName)(page, action.selector, action.name);
+    if (action.name === 'openPage' || action.name === 'closePage') {
+        return null;
+    }
+    if (await isOwnPanelSelector(page, action.selector)) {
+        return null;
+    }
+    let pageKey = (0, registry_matcher_1.findPageKey)(currentUrl, currentTitle, registryObj, overrideMode);
+    if (!registryObj[pageKey]) {
+        let effectiveUrl = '/';
+        try {
+            const u = new URL(currentUrl);
+            const hash = u.hash && u.hash.startsWith('#/') ? u.hash.slice(1) : '';
+            const targetUrl = hash && hash !== '/' ? hash : u.pathname;
+            const clean = targetUrl.split('?')[0].split('#')[0];
+            effectiveUrl = clean.startsWith('/') ? clean : '/' + clean;
+        }
+        catch {
+            // Fall back to default root path '/' if URL is malformed or relative
+        }
+        registryObj[pageKey] = { url: effectiveUrl };
+    }
+    let elementKey = 'element';
+    let matchResult = null;
+    let smartLocator = null;
+    if (action.selector) {
+        let selectorToUse = action.selector;
+        smartLocator = await (0, index_1.generateSmartLocator)(page, action.selector);
+        if (smartLocator) {
+            selectorToUse = smartLocator.selector;
+        }
+        const parsed = (0, selector_parser_1.extractNthFromSelector)(selectorToUse);
+        selectorToUse = parsed.baseSelector;
+        if (parsed.nth !== undefined) {
+            action.nth = parsed.nth;
+        }
+        matchResult = (0, registry_matcher_1.findElementKey)(selectorToUse, pageKey, registryObj, overrideMode, {
+            targetTestId: smartLocator?.targetTestId,
+            targetId: smartLocator?.targetId,
+            targetParentId: smartLocator?.targetParentId,
+            overrideType: action.name === 'check' || action.name === 'uncheck' ? 'checkbox' : undefined
+        });
+        pageKey = matchResult.pageKey;
+        elementKey = matchResult.elementKey;
+        // Use context-aware generatedKey if it produced a better name and the match is new
+        if (matchResult.isNew &&
+            (matchResult.type === 'testId' || matchResult.type === 'selector') &&
+            smartLocator?.generatedKey &&
+            smartLocator.generatedKey.length > 2) {
+            const proposedKey = smartLocator.generatedKey;
+            const targetConfig = registryObj[pageKey];
+            const existingKeys = new Set([
+                ...Object.keys(targetConfig?.testId || {}),
+                ...Object.keys(targetConfig?.testIds || {}),
+                ...Object.keys(targetConfig?.selector || {}),
+                ...Object.keys(targetConfig?.selectors || {})
+            ]);
+            if (!existingKeys.has(proposedKey)) {
+                elementKey = proposedKey;
+            }
+        }
+    }
+    return {
+        pageKey,
+        elementKey,
+        action,
+        matchResult,
+        smartLocator
+    };
+}

package/dist/codegen/floating-panel/client.d.ts

@@ -1 +1,14 @@
-export declare function clientInjectFloatingPanel(idx: string, fileName: string, hasSteps: boolean, cssStyle: string, htmlContent: string): void;
+declare global {
+    interface Window {
+        __pwCoreStartNewTest?: () => void;
+        __pwCoreStartNewSerialTest?: () => void;
+    }
+}
+export interface FloatingPanelPayload {
+    idx: string;
+    fileName: string;
+    hasSteps: boolean;
+    cssStyle: string;
+    htmlContent: string;
+}
+export declare function clientInjectFloatingPanel(payload: FloatingPanelPayload): void;

package/dist/codegen/floating-panel/client.js

@@ -1,22 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.clientInjectFloatingPanel = clientInjectFloatingPanel;
-function clientInjectFloatingPanel(idx, fileName, hasSteps, cssStyle, htmlContent) {
+function clientInjectFloatingPanel(payload) {
+    function safeSessionStorage(action, key, value) {
+        try {
+            if (action === 'get')
+                return sessionStorage.getItem(key);
+            if (action === 'set' && value !== undefined)
+                sessionStorage.setItem(key, value);
+            if (action === 'remove')
+                sessionStorage.removeItem(key);
+        }
+        catch { }
+        return null;
+    }
+    const { idx, hasSteps, cssStyle, htmlContent } = payload;
     if (!document.body) {
-        setTimeout(() => clientInjectFloatingPanel(idx, fileName, hasSteps, cssStyle, htmlContent), 50);
+        window.addEventListener('DOMContentLoaded', () => clientInjectFloatingPanel(payload), { once: true });
         return;
     }
-    let sessionHasSteps = false;
-    try {
-        sessionHasSteps = sessionStorage.getItem('pw-core-has-steps') === 'true';
-    }
-    catch (e) { }
+    const sessionHasSteps = safeSessionStorage('get', 'pw-core-has-steps') === 'true';
     const effectiveHasSteps = hasSteps || sessionHasSteps;
     if (effectiveHasSteps) {
-        try {
-            sessionStorage.setItem('pw-core-has-steps', 'true');
-        }
-        catch (e) { }
+        safeSessionStorage('set', 'pw-core-has-steps', 'true');
     }
     const numEl = document.getElementById('pw-core-test-num');
     const existingNewTestBtn = document.getElementById('pw-core-new-test-btn');
@@ -128,10 +134,7 @@ function clientInjectFloatingPanel(idx, fileName, hasSteps, cssStyle, htmlConten
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp);
     const enableButtons = () => {
-        try {
-            sessionStorage.setItem('pw-core-has-steps', 'true');
-        }
-        catch (e) { }
+        safeSessionStorage('set', 'pw-core-has-steps', 'true');
         const newTestBtn = document.getElementById('pw-core-new-test-btn');
         const newSerialBtn = document.getElementById('pw-core-new-serial-btn');
         if (newTestBtn && newTestBtn.disabled) {
@@ -211,14 +214,10 @@ function clientInjectFloatingPanel(idx, fileName, hasSteps, cssStyle, htmlConten
         e.preventDefault();
         e.stopPropagation();
         if (btn.id === 'pw-core-new-test-btn') {
-            try {
-                sessionStorage.removeItem('pw-core-has-steps');
-            }
-            catch (err) { }
+            safeSessionStorage('remove', 'pw-core-has-steps');
             optimisticUpdate('test');
             const trigger = () => {
                 if (window.__pwCoreStartNewTest) {
-                    ;
                     window.__pwCoreStartNewTest();
                 }
                 else {
@@ -228,14 +227,10 @@ function clientInjectFloatingPanel(idx, fileName, hasSteps, cssStyle, htmlConten
             trigger();
         }
         else if (btn.id === 'pw-core-new-serial-btn') {
-            try {
-                sessionStorage.removeItem('pw-core-has-steps');
-            }
-            catch (err) { }
+            safeSessionStorage('remove', 'pw-core-has-steps');
             optimisticUpdate('serial');
             const trigger = () => {
                 if (window.__pwCoreStartNewSerialTest) {
-                    ;
                     window.__pwCoreStartNewSerialTest();
                 }
                 else {

package/dist/codegen/floating-panel/manager.js

@@ -19,26 +19,29 @@ class FloatingPanelManager {
             return this.options.getDisplayTestIndex();
         });
         await this.context.exposeFunction('__pwCoreStartNewTest', () => {
-            console.log('DEBUG [cli]: __pwCoreStartNewTest exposed function called in browser context');
             return this.options.onStartNewTest();
         });
         await this.context.exposeFunction('__pwCoreStartNewSerialTest', () => {
-            console.log('DEBUG [cli]: __pwCoreStartNewSerialTest exposed function called in browser context');
             return this.options.onStartNewSerialTest();
         });
         // 2. Listen for page events to automatically inject the panel
-        this.context.on('page', (p) => {
-            p.on('load', () => this.inject(p).catch(() => { }));
-            p.on('domcontentloaded', () => this.inject(p).catch(() => { }));
+        const setupPage = (p) => {
+            p.on('load', () => this.inject(p));
+            p.on('domcontentloaded', () => this.inject(p));
             p.on('framenavigated', (frame) => {
                 if (frame === p.mainFrame()) {
                     // Wait briefly for SPA framework to mount before injecting/updating
                     setTimeout(() => {
-                        this.inject(p).catch(() => { });
+                        this.inject(p);
                     }, 200);
                 }
             });
-        });
+            this.inject(p);
+        };
+        this.context.on('page', setupPage);
+        for (const p of this.context.pages()) {
+            setupPage(p);
+        }
     }
     /**
      * Inject or update the floating panel on a single page.
@@ -56,26 +59,17 @@ class FloatingPanelManager {
                 : 'Disabled: Record at least one action/assertion to add a serial test';
             const disabledAttr = hasSteps ? '' : ' disabled style="opacity:0.35; cursor:not-allowed;"';
             const htmlContent = (0, template_1.getFloatingPanelHtml)(idx, fileName, newTestTitle, newSerialTitle, disabledAttr);
-            const fnStr = client_1.clientInjectFloatingPanel.toString();
-            // Evaluate the client injection function in the page context
-            await page
-                .evaluate(({ idx, fileName, hasSteps, cssStyle, htmlContent, fnStr }) => {
-                const fn = new Function(`return ${fnStr}`)();
-                fn(idx, fileName, hasSteps, cssStyle, htmlContent);
-            }, {
+            // Evaluate the client injection function directly in the page context via Playwright
+            await page.evaluate(client_1.clientInjectFloatingPanel, {
                 idx,
                 fileName,
                 hasSteps,
                 cssStyle: template_1.FLOATING_PANEL_STYLE,
-                htmlContent,
-                fnStr
-            })
-                .catch((err) => {
-                console.error(`DEBUG [cli]: Failed to inject/update floating panel on page ${page.url()}:`, err);
+                htmlContent
             });
         }
-        catch (err) {
-            console.error(`DEBUG [cli]: Exception in injectFloatingPanel wrapper:`, err);
+        catch {
+            // Non-fatal: ignore injection failure on navigation frames and allow recording to proceed
         }
     }
     /**
@@ -83,7 +77,7 @@ class FloatingPanelManager {
      */
     async injectAll() {
         for (const p of this.context.pages()) {
-            await this.inject(p).catch(() => { });
+            await this.inject(p);
         }
     }
 }

package/dist/codegen/generator/action.validator.d.ts

@@ -1,5 +1,6 @@
+import type { Page } from '@playwright/test';
 /**
  * Normalizes action name to ensure check/uncheck are only used on checkboxes.
  * Otherwise, falls back to click.
  */
-export declare function normalizeActionName(page: any, selector: string, actionName: string): Promise<string>;
+export declare function normalizeActionName(page: Page, selector: string, actionName: string): Promise<string>;

package/dist/codegen/generator/action.validator.js

@@ -13,7 +13,8 @@ async function normalizeActionName(page, selector, actionName) {
         return 'click';
     }
     try {
-        const isCheckbox = await page.locator(selector).evaluate((el) => {
+        const isCheckbox = await page.locator(selector).evaluate((element) => {
+            const el = element;
             return el.tagName.toLowerCase() === 'input' && el.type === 'checkbox';
         }, null, { timeout: 500 }).catch(() => false);
         if (!isCheckbox) {

package/dist/codegen/generator/candidate-scorer.d.ts

@@ -0,0 +1,7 @@
+import type { Page } from '@playwright/test';
+import { LocatorCandidate } from '../types';
+import type { DomScanResult } from './dom-scanner';
+/**
+ * Transforms raw scanned candidates into fully scored and uniqueness-validated LocatorCandidates.
+ */
+export declare function scoreAndRankCandidates(page: Page, scanResult: DomScanResult): Promise<LocatorCandidate[]>;