pw-core 1.2.1 → 1.3.1

package/dist/cli.js

@@ -40,143 +40,92 @@ const test_1 = require("@playwright/test");
 const codegen_1 = require("./codegen");
 const floating_panel_1 = require("./codegen/floating-panel");
 const hover_tracker_1 = require("./codegen/hover-tracker");
-const action_validator_1 = require("./codegen/generator/action.validator");
-function extractNthFromSelector(selector) {
-    const nthMatch = selector.match(/\s*>>\s*nth=(\d+)/i);
-    if (nthMatch) {
-        const baseSelector = selector.replace(/\s*>>\s*nth=\d+/i, '').trim();
-        return { baseSelector, nth: parseInt(nthMatch[1], 10) };
+/**
+ * Adds a newly discovered locator element into the page configuration inside registryObj.
+ */
+function registerNewElementInRegistry(registryObj, pageKey, elementKey, matchResult, fallbackUrl) {
+    if (!registryObj[pageKey]) {
+        registryObj[pageKey] = { url: fallbackUrl };
     }
-    if (selector.endsWith(' >> first()')) {
-        const baseSelector = selector.substring(0, selector.length - ' >> first()'.length).trim();
-        return { baseSelector, nth: 0 };
-    }
-    return { baseSelector: selector };
-}
-function parseDotEnv(cwd) {
-    const env = {};
-    const envPath = path.join(cwd, '.env');
-    if (fs.existsSync(envPath)) {
-        try {
-            const content = fs.readFileSync(envPath, 'utf8');
-            const lines = content.split(/\r?\n/);
-            for (const line of lines) {
-                const trimmed = line.trim();
-                if (!trimmed || trimmed.startsWith('#'))
-                    continue;
-                const index = trimmed.indexOf('=');
-                if (index > 0) {
-                    const key = trimmed.slice(0, index).trim();
-                    let val = trimmed.slice(index + 1).trim();
-                    if ((val.startsWith("'") && val.endsWith("'")) || (val.startsWith('"') && val.endsWith('"'))) {
-                        val = val.slice(1, -1);
-                    }
-                    env[key] = val;
-                }
-            }
+    const pageConfig = registryObj[pageKey];
+    if (matchResult.type === 'testId') {
+        if (pageConfig.testIds) {
+            pageConfig.testIds[elementKey] = matchResult.val;
         }
-        catch (e) { }
-    }
-    return env;
-}
-function getBaseUrl(cwd) {
-    const env = parseDotEnv(cwd);
-    const envUrl = process.env.URL || env['URL'];
-    if (envUrl) {
-        return envUrl;
-    }
-    let configPath = path.join(cwd, 'playwright.config.ts');
-    if (!fs.existsSync(configPath)) {
-        configPath = path.join(cwd, 'playwright.config.js');
-    }
-    if (fs.existsSync(configPath)) {
-        try {
-            const content = fs.readFileSync(configPath, 'utf8');
-            const stringMatch = content.match(/baseURL:\s*['"`](.*?)['"`]/);
-            if (stringMatch && stringMatch[1]) {
-                return stringMatch[1];
-            }
-            if (/baseURL:\s*(?:env|ENV)\.url/.test(content)) {
-                let envFilePath = path.join(cwd, 'src', 'utils', 'env.ts');
-                if (!fs.existsSync(envFilePath)) {
-                    envFilePath = path.join(cwd, 'src', 'utils', 'env.js');
-                }
-                if (fs.existsSync(envFilePath)) {
-                    const envContent = fs.readFileSync(envFilePath, 'utf8');
-                    const stringMatches = [...envContent.matchAll(/['"`](https?:\/\/.*?)['"`]/g)];
-                    if (stringMatches.length > 0) {
-                        return stringMatches[0][1];
-                    }
-                }
-            }
+        else {
+            if (!pageConfig.testId)
+                pageConfig.testId = {};
+            pageConfig.testId[elementKey] = matchResult.val;
         }
-        catch (e) { }
     }
-    return '';
-}
-function getTestDir(cwd) {
-    let configPath = path.join(cwd, 'playwright.config.ts');
-    if (!fs.existsSync(configPath)) {
-        configPath = path.join(cwd, 'playwright.config.js');
+    else if (matchResult.type === 'selector') {
+        if (pageConfig.selectors) {
+            pageConfig.selectors[elementKey] = matchResult.val;
+        }
+        else {
+            if (!pageConfig.selector)
+                pageConfig.selector = {};
+            pageConfig.selector[elementKey] = matchResult.val;
+        }
     }
-    if (fs.existsSync(configPath)) {
-        try {
-            const content = fs.readFileSync(configPath, 'utf8');
-            const testDirMatch = content.match(/testDir:\s*['"`](.*?)['"`]/);
-            if (testDirMatch && testDirMatch[1]) {
-                return path.resolve(cwd, testDirMatch[1]);
+    else {
+        const list = pageConfig[matchResult.type];
+        if (Array.isArray(list)) {
+            if (!list.includes(matchResult.val)) {
+                list.push(matchResult.val);
             }
         }
-        catch (e) { }
+        else {
+            pageConfig[matchResult.type] = [matchResult.val];
+        }
     }
-    return cwd;
 }
-function getNextTestIndex(testDir) {
-    if (!fs.existsSync(testDir))
-        return 1;
+function printHelp() {
+    console.log(`
+Usage: pw-core <command> [options]
+
+Commands:
+  codegen [url]         Start interactive Playwright test codegen with page registry
+
+Options:
+  -u, --url <url>       Target URL to record against
+  -o, --output <file>   Output test file path (default: <index>.recorded.test.ts)
+      --safe            Run in safe mode (append only, no existing key overrides)
+  -h, --help            Show help
+  -v, --version         Show version number
+`);
+}
+function printVersion() {
     try {
-        const files = fs.readdirSync(testDir);
-        let max = 0;
-        for (const file of files) {
-            const match = file.match(/^(\d+)\.recorded\.test\.(ts|js)$/);
-            if (match) {
-                const num = parseInt(match[1], 10);
-                if (num > max) {
-                    max = num;
-                }
-            }
+        const pkgPath = path.resolve(__dirname, '../package.json');
+        if (fs.existsSync(pkgPath)) {
+            const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+            console.log(`pw-core v${pkg.version}`);
+            return;
         }
-        return max + 1;
-    }
-    catch (e) {
-        return 1;
     }
-}
-function formatRecordingDate(date) {
-    const day = date.getDate();
-    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-    const month = months[date.getMonth()];
-    const year = date.getFullYear();
-    let hours = date.getHours();
-    const minutes = String(date.getMinutes()).padStart(2, '0');
-    const seconds = String(date.getSeconds()).padStart(2, '0');
-    const ampm = hours >= 12 ? 'PM' : 'AM';
-    hours = hours % 12;
-    hours = hours ? hours : 12;
-    return `${day} ${month} ${year}, ${hours}:${minutes}:${seconds} ${ampm}`;
-}
-function toWorkerKey(key) {
-    if (key.startsWith('worker'))
-        return key;
-    return `worker${key.charAt(0).toUpperCase()}${key.slice(1)}`;
+    catch { }
+    console.log('pw-core v1.3.1');
 }
 async function main() {
-    console.log('RESOLVED @playwright/test:', require.resolve('@playwright/test'));
-    try {
-        console.log('RESOLVED playwright-core:', require.resolve('playwright-core'));
+    const rawArgs = process.argv.slice(2);
+    if (rawArgs.includes('-v') || rawArgs.includes('--version')) {
+        printVersion();
+        return;
+    }
+    if (rawArgs.includes('-h') || rawArgs.includes('--help')) {
+        printHelp();
+        return;
     }
-    catch (e) { }
-    const args = process.argv.slice(2).filter((arg) => arg !== 'codegen');
+    const command = rawArgs.find((arg) => !arg.startsWith('-'));
+    if (command !== 'codegen') {
+        if (command) {
+            console.error(`Unknown command: "${command}"\n`);
+        }
+        printHelp();
+        process.exit(command ? 1 : 0);
+    }
+    const args = rawArgs.filter((arg) => arg !== 'codegen');
     let url = '';
     let output = '';
     const overrideMode = !args.includes('--safe');
@@ -219,7 +168,7 @@ export const registry = createPageRegistry({
     if (!url) {
         const configPath = (0, codegen_1.findPlaywrightConfig)(process.cwd());
         if (configPath) {
-            url = getBaseUrl(path.dirname(configPath));
+            url = (0, codegen_1.getBaseUrl)(path.dirname(configPath));
         }
         else {
             let configDir = process.cwd();
@@ -232,14 +181,14 @@ export const registry = createPageRegistry({
                 }
                 current = path.dirname(current);
             }
-            url = getBaseUrl(configDir);
+            url = (0, codegen_1.getBaseUrl)(configDir);
         }
     }
-    let registryObj = (0, codegen_1.parseRegistry)(registryFilePath);
-    const testDir = path.join(getTestDir(process.cwd()), 'codegen');
+    const registryObj = (0, codegen_1.parseRegistry)(registryFilePath);
+    const testDir = path.join((0, codegen_1.getTestDir)(process.cwd()), 'codegen');
     fs.mkdirSync(testDir, { recursive: true });
-    let currentTestIndex = getNextTestIndex(testDir);
-    let activeOutput = output || `${currentTestIndex}.recorded.test.ts`;
+    let currentTestIndex = (0, codegen_1.getNextTestIndex)(testDir);
+    const activeOutput = output || `${currentTestIndex}.recorded.test.ts`;
     let outputFilePath = path.resolve(testDir, activeOutput);
     console.log(`Live spec output will be written to: ${outputFilePath}`);
     const browser = await test_1.chromium.launch({ headless: false });
@@ -249,6 +198,34 @@ export const registry = createPageRegistry({
     const testsInCurrentFile = [];
     const recordedSteps = [];
     const usedPageKeys = new Set();
+    const actionQueue = [];
+    let processing = false;
+    const waitForActionQueue = async (intervalMs) => {
+        while (actionQueue.length > 0 || processing) {
+            await new Promise((resolve) => setTimeout(resolve, intervalMs));
+        }
+    };
+    const enqueueAction = (task) => {
+        actionQueue.push(task);
+        processQueue();
+    };
+    const processQueue = async () => {
+        if (processing)
+            return;
+        processing = true;
+        while (actionQueue.length > 0) {
+            const task = actionQueue.shift();
+            if (task) {
+                try {
+                    await task();
+                }
+                catch (err) {
+                    console.error('Error processing action queue task:', err);
+                }
+            }
+        }
+        processing = false;
+    };
     const panelManager = new floating_panel_1.FloatingPanelManager(context, {
         getDisplayTestIndex: () => {
             if (isSerialSuite) {
@@ -261,18 +238,12 @@ export const registry = createPageRegistry({
         },
         hasSteps: () => recordedSteps.length > 0,
         onStartNewTest: async () => {
-            console.log('DEBUG [cli]: onStartNewTest callback triggered on CLI host');
-            // Wait for any pending page actions to be fully processed first so we don't lose the click that triggered the navigation/action
-            while (actionQueue.length > 0 || processing) {
-                await new Promise((resolve) => setTimeout(resolve, 20));
-            }
+            await waitForActionQueue(20);
             const keyReplacements = (0, codegen_1.writeRegistry)(registryFilePath, registryObj, overrideMode, usedPageKeys);
             applyReplacements(keyReplacements);
             updateSpecFile();
-            // Reset serial state for new test file
             isSerialSuite = false;
             testsInCurrentFile.length = 0;
-            // 2. Increment test index and update outputFilePath
             currentTestIndex++;
             testStartedAt = new Date();
             const extension = path.extname(output || '1.recorded.test.ts') || '.ts';
@@ -283,33 +254,22 @@ export const registry = createPageRegistry({
             }
             outputFilePath = path.resolve(testDir, newOutputName);
             console.log(`\n>>> STARTING NEW TEST: ${outputFilePath} <<<\n`);
-            // 3. Clear steps and usedPageKeys for the new test session
             recordedSteps.length = 0;
             usedPageKeys.clear();
-            // 4. Re-inject panel on all open pages with the updated index
             await panelManager.injectAll();
         },
         onStartNewSerialTest: async () => {
-            console.log('DEBUG [cli]: onStartNewSerialTest callback triggered on CLI host');
-            // Wait for any pending page actions to be fully processed first so we don't lose the click that triggered the navigation/action
-            while (actionQueue.length > 0 || processing) {
-                await new Promise((resolve) => setTimeout(resolve, 20));
-            }
-            console.log(`DEBUG [cli]: __pwCoreStartNewSerialTest triggered. currentTestIndex=${currentTestIndex}, testsCount=${testsInCurrentFile.length}, activeSteps=${recordedSteps.length}`);
+            await waitForActionQueue(20);
             isSerialSuite = true;
-            // Save current steps as a test case
             const testName = `${currentTestIndex}.${testsInCurrentFile.length + 1}. Recorded Test`;
             testsInCurrentFile.push({
                 name: testName,
                 steps: [...recordedSteps],
                 usedKeys: new Set(usedPageKeys)
             });
-            // Clear active steps and usedPageKeys for the next serial test
             recordedSteps.length = 0;
             usedPageKeys.clear();
-            // Write the current state to the file
             updateSpecFile();
-            // Re-inject/update panel on all open pages
             await panelManager.injectAll();
         }
     });
@@ -320,36 +280,34 @@ export const registry = createPageRegistry({
             importPath = './' + importPath;
         }
         importPath = importPath.replace(/\.(ts|js)$/, '');
-        const dateStr = formatRecordingDate(testStartedAt);
+        const dateStr = (0, codegen_1.formatRecordingDate)(testStartedAt);
         let fileContent = '';
         if (isSerialSuite) {
             const cases = [];
-            // Add previously completed test cases
             for (const tc of testsInCurrentFile) {
                 if (tc.steps.length === 0)
                     continue;
-                const pageListStr = Array.from(tc.usedKeys).map(toWorkerKey).join(', ');
-                const tcSteps = tc.steps.map(s => {
+                const pageListStr = Array.from(tc.usedKeys).map(codegen_1.toWorkerKey).join(', ');
+                const tcSteps = tc.steps.map((s) => {
                     let code = s.code;
                     for (const pk of Array.from(tc.usedKeys)) {
-                        code = code.replace(new RegExp(`\\b${pk}\\.`, 'g'), `${toWorkerKey(pk)}.`);
+                        code = code.replace(new RegExp(`\\b${pk}\\.`, 'g'), `${(0, codegen_1.toWorkerKey)(pk)}.`);
                     }
-                    return code.split('\n').map(line => '    ' + line.trim()).join('\n');
+                    return code.split('\n').map((line) => '    ' + line.trim()).join('\n');
                 }).join('\n');
                 cases.push(`  scenario('${tc.name}', async ({ ${pageListStr || 'workerPage'} }) => {
 ${tcSteps}
   });`);
             }
-            // Add the currently recording test case
             if (recordedSteps.length > 0) {
                 const currentName = `${currentTestIndex}.${testsInCurrentFile.length + 1}. Recorded Test`;
-                const pageListStr = Array.from(usedPageKeys).map(toWorkerKey).join(', ');
-                const currentSteps = recordedSteps.map(s => {
+                const pageListStr = Array.from(usedPageKeys).map(codegen_1.toWorkerKey).join(', ');
+                const currentSteps = recordedSteps.map((s) => {
                     let code = s.code;
                     for (const pk of Array.from(usedPageKeys)) {
-                        code = code.replace(new RegExp(`\\b${pk}\\.`, 'g'), `${toWorkerKey(pk)}.`);
+                        code = code.replace(new RegExp(`\\b${pk}\\.`, 'g'), `${(0, codegen_1.toWorkerKey)(pk)}.`);
                     }
-                    return code.split('\n').map(line => '    ' + line.trim()).join('\n');
+                    return code.split('\n').map((line) => '    ' + line.trim()).join('\n');
                 }).join('\n');
                 cases.push(`  scenario('${currentName}', async ({ ${pageListStr || 'workerPage'} }) => {
 ${currentSteps}
@@ -389,186 +347,42 @@ ${recordedSteps.map((s) => s.code).join('\n')}
         }
     };
     const finalize = async () => {
-        while (actionQueue.length > 0 || processing) {
-            await new Promise((resolve) => setTimeout(resolve, 50));
-        }
+        await waitForActionQueue(50);
         const keyReplacements = (0, codegen_1.writeRegistry)(registryFilePath, registryObj, overrideMode, usedPageKeys);
         applyReplacements(keyReplacements);
         updateSpecFile();
     };
-    // Initialize spec file immediately
     updateSpecFile();
     let lastActionSignature = '';
     let lastActionTime = 0;
-    const actionQueue = [];
-    let processing = false;
-    const enqueueAction = (task) => {
-        actionQueue.push(task);
-        processQueue();
-    };
-    const processQueue = async () => {
-        if (processing)
-            return;
-        processing = true;
-        while (actionQueue.length > 0) {
-            const task = actionQueue.shift();
-            if (task) {
-                try {
-                    await task();
-                }
-                catch (err) {
-                    console.error('Error processing action queue task:', err);
-                }
-            }
-        }
-        processing = false;
-    };
-    // Track the current page URL and title as the user navigates.
-    // data.frame.url / data.frame.title are always undefined in this Playwright build,
-    // so we maintain our own state that is kept up-to-date via page navigation events.
     let currentUrl = url || '';
     let currentTitle = '';
     const eventSink = {
-        actionAdded: async (page, data, code) => {
+        actionAdded: async (page, data) => {
             enqueueAction(async () => {
-                const action = data.action;
-                action.name = await (0, action_validator_1.normalizeActionName)(page, action.selector, action.name);
-                console.log('DEBUG [cli]: eventSink.actionAdded called for action:', action.name, 'selector:', action.selector);
-                if (action.name === 'openPage' || action.name === 'closePage')
+                const processed = await (0, codegen_1.processRecordedAction)(page, data.action, currentUrl, currentTitle, registryObj, overrideMode);
+                if (!processed)
                     return;
-                if (action.selector) {
-                    const lowerSel = action.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')) {
-                        console.log(`DEBUG [cli]: Ignoring own panel action (string match) in actionAdded: selector="${action.selector}"`);
-                        return;
-                    }
-                    try {
-                        const isOurPanel = await page.locator(action.selector).evaluate((el) => {
-                            return el.id === 'pw-core-codegen-panel' || el.closest('#pw-core-codegen-panel') !== null;
-                        }, null, { timeout: 500 }).catch(() => false);
-                        if (isOurPanel) {
-                            console.log(`DEBUG [cli]: Ignoring own panel action in actionAdded: selector="${action.selector}"`);
-                            return;
-                        }
-                    }
-                    catch (e) { }
-                }
-                let pageKey = (0, codegen_1.findPageKey)(currentUrl, currentTitle, registryObj, overrideMode);
-                console.log(`DEBUG [cli]: url="${currentUrl}" title="${currentTitle}" → pageKey="${pageKey}"`);
-                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;
-                        // Strip any nested query params or nested hash IDs from targetUrl
-                        const clean = targetUrl.split('?')[0].split('#')[0];
-                        effectiveUrl = clean.startsWith('/') ? clean : '/' + clean;
-                    }
-                    catch (e) { }
-                    registryObj[pageKey] = { url: effectiveUrl };
-                }
-                let elementKey = 'element';
-                let actionNth = undefined;
-                let matchResult = null;
-                if (action.selector) {
-                    let selectorToUse = action.selector;
-                    const smartLocator = await (0, codegen_1.generateSmartLocator)(page, action.selector);
-                    if (smartLocator) {
-                        console.log(`DEBUG [cli]: smart locator: ${smartLocator.locator} (strategy: ${smartLocator.strategy}, base: ${smartLocator.baseScore}, semantic: ${smartLocator.semanticScore}, context: ${smartLocator.contextScore}, total: ${smartLocator.totalScore})`);
-                        if (smartLocator.nearbyText)
-                            console.log(`DEBUG [cli]:   nearbyText: "${smartLocator.nearbyText}"`);
-                        if (smartLocator.accessibleName)
-                            console.log(`DEBUG [cli]:   accessibleName: "${smartLocator.accessibleName}"`);
-                        if (smartLocator.generatedKey)
-                            console.log(`DEBUG [cli]:   generatedKey: "${smartLocator.generatedKey}"`);
-                        selectorToUse = smartLocator.selector;
-                    }
-                    const parsed = extractNthFromSelector(selectorToUse);
-                    selectorToUse = parsed.baseSelector;
-                    actionNth = parsed.nth;
-                    if (actionNth !== undefined) {
-                        action.nth = actionNth;
-                    }
-                    matchResult = (0, codegen_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
-                    // Only for key-based strategies (testId/selector); array strategies must keep original text
-                    if (matchResult.isNew && (matchResult.type === 'testId' || matchResult.type === 'selector') && smartLocator?.generatedKey && smartLocator.generatedKey.length > 2) {
-                        const proposedKey = smartLocator.generatedKey;
-                        const existingKeys = new Set([
-                            ...Object.keys(registryObj[pageKey]?.testId || {}),
-                            ...Object.keys(registryObj[pageKey]?.testIds || {}),
-                            ...Object.keys(registryObj[pageKey]?.selector || {}),
-                            ...Object.keys(registryObj[pageKey]?.selectors || {})
-                        ]);
-                        if (!existingKeys.has(proposedKey)) {
-                            elementKey = proposedKey;
-                        }
-                    }
-                }
+                const { pageKey, elementKey, action, matchResult } = processed;
                 const actionSignature = `${pageKey}.${elementKey}.${action.name}.${action.text || action.key || action.value || ''}.${action.nth ?? ''}`;
                 const now = Date.now();
                 const threshold = action.name === 'click' ? 1200 : 500;
                 if (actionSignature === lastActionSignature && now - lastActionTime < threshold) {
-                    console.log(`DEBUG [cli]: Deduplicated consecutive action: ${actionSignature}`);
                     return;
                 }
                 lastActionSignature = actionSignature;
                 lastActionTime = now;
                 usedPageKeys.add(pageKey);
                 const generatedCode = (0, codegen_1.formatActionCall)(pageKey, elementKey, action);
-                console.log('DEBUG [cli]: generatedCode:', generatedCode);
                 recordedSteps.push({ pageKey, code: generatedCode });
                 if (matchResult && matchResult.isNew) {
-                    if (!registryObj[pageKey]) {
-                        let pathname = '/';
-                        try {
-                            const u = new URL(page.url());
-                            pathname = u.pathname;
-                        }
-                        catch (e) { }
-                        registryObj[pageKey] = { url: pathname };
-                    }
-                    if (matchResult.type === 'testId') {
-                        if (registryObj[pageKey].testIds) {
-                            registryObj[pageKey].testIds[elementKey] = matchResult.val;
-                        }
-                        else {
-                            if (!registryObj[pageKey].testId)
-                                registryObj[pageKey].testId = {};
-                            registryObj[pageKey].testId[elementKey] = matchResult.val;
-                        }
-                    }
-                    else if (matchResult.type === 'selector') {
-                        if (registryObj[pageKey].selectors) {
-                            registryObj[pageKey].selectors[elementKey] = matchResult.val;
-                        }
-                        else {
-                            if (!registryObj[pageKey].selector)
-                                registryObj[pageKey].selector = {};
-                            registryObj[pageKey].selector[elementKey] = matchResult.val;
-                        }
-                    }
-                    else {
-                        if (!registryObj[pageKey][matchResult.type]) {
-                            registryObj[pageKey][matchResult.type] = [];
-                        }
-                        if (!registryObj[pageKey][matchResult.type].includes(matchResult.val)) {
-                            registryObj[pageKey][matchResult.type].push(matchResult.val);
-                        }
+                    let pathname = '/';
+                    try {
+                        const u = new URL(page.url());
+                        pathname = u.pathname;
                     }
+                    catch { }
+                    registerNewElementInRegistry(registryObj, pageKey, elementKey, matchResult, pathname);
                     const keyReplacements = (0, codegen_1.writeRegistry)(registryFilePath, registryObj, overrideMode, usedPageKeys);
                     applyReplacements(keyReplacements);
                 }
@@ -576,75 +390,14 @@ ${recordedSteps.map((s) => s.code).join('\n')}
                 await panelManager.injectAll();
             });
         },
-        actionUpdated: async (page, data, code) => {
+        actionUpdated: async (page, data) => {
             enqueueAction(async () => {
-                const action = data.action;
-                action.name = await (0, action_validator_1.normalizeActionName)(page, action.selector, action.name);
-                console.log('DEBUG [cli]: eventSink.actionUpdated called for action:', action.name, 'selector:', action.selector);
-                if (action.name === 'openPage' || action.name === 'closePage')
+                const processed = await (0, codegen_1.processRecordedAction)(page, data.action, currentUrl, currentTitle, registryObj, overrideMode);
+                if (!processed)
                     return;
-                if (action.selector) {
-                    const lowerSel = action.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')) {
-                        console.log(`DEBUG [cli]: Ignoring own panel action (string match) in actionUpdated: selector="${action.selector}"`);
-                        return;
-                    }
-                    try {
-                        const isOurPanel = await page.locator(action.selector).evaluate((el) => {
-                            return el.id === 'pw-core-codegen-panel' || el.closest('#pw-core-codegen-panel') !== null;
-                        }, null, { timeout: 500 }).catch(() => false);
-                        if (isOurPanel) {
-                            console.log(`DEBUG [cli]: Ignoring own panel action in actionUpdated: selector="${action.selector}"`);
-                            return;
-                        }
-                    }
-                    catch (e) { }
-                }
-                let pageKey = (0, codegen_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;
-                        // Strip any nested query params or nested hash IDs from targetUrl
-                        const clean = targetUrl.split('?')[0].split('#')[0];
-                        effectiveUrl = clean.startsWith('/') ? clean : '/' + clean;
-                    }
-                    catch (e) { }
-                    registryObj[pageKey] = { url: effectiveUrl };
-                }
-                let elementKey = 'element';
-                let actionNth = undefined;
-                if (action.selector) {
-                    let selectorToUse = action.selector;
-                    const smartLocator = await (0, codegen_1.generateSmartLocator)(page, action.selector);
-                    if (smartLocator) {
-                        selectorToUse = smartLocator.selector;
-                    }
-                    const parsed = extractNthFromSelector(selectorToUse);
-                    selectorToUse = parsed.baseSelector;
-                    actionNth = parsed.nth;
-                    if (actionNth !== undefined) {
-                        action.nth = actionNth;
-                    }
-                    const matchResult = (0, codegen_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;
-                }
+                const { pageKey, elementKey, action } = processed;
                 usedPageKeys.add(pageKey);
                 const generatedCode = (0, codegen_1.formatActionCall)(pageKey, elementKey, action);
-                console.log('DEBUG [cli]: generatedCode updated:', generatedCode);
                 lastActionSignature = `${pageKey}.${elementKey}.${action.name}.${action.text || action.key || action.value || ''}.${action.nth ?? ''}`;
                 lastActionTime = Date.now();
                 if (recordedSteps.length > 0) {
@@ -660,9 +413,7 @@ ${recordedSteps.map((s) => s.code).join('\n')}
                 await panelManager.injectAll();
             });
         },
-        signalAdded: (page, data) => {
-            console.log('DEBUG [cli]: eventSink.signalAdded called');
-        }
+        signalAdded: (_page, _data) => { }
     };
     const hoverTracker = new hover_tracker_1.HoverTrackerManager(context, {
         onRecordHover: async (selector) => {
@@ -679,7 +430,7 @@ ${recordedSteps.map((s) => s.code).join('\n')}
                 let pageKey = (0, codegen_1.findPageKey)(activePage.url(), await activePage.title(), registryObj, overrideMode);
                 let elementKey = 'codegenPage';
                 let selectorToUse = smartLocator.selector;
-                const parsed = extractNthFromSelector(selectorToUse);
+                const parsed = (0, codegen_1.extractNthFromSelector)(selectorToUse);
                 selectorToUse = parsed.baseSelector;
                 const hoverAction = { name: 'hover' };
                 if (parsed.nth !== undefined) {
@@ -697,46 +448,17 @@ ${recordedSteps.map((s) => s.code).join('\n')}
                 lastActionSignature = actionSignature;
                 lastActionTime = now;
                 usedPageKeys.add(pageKey);
-                console.log('DEBUG [cli]: Hover action recorded:', generatedCode);
                 recordedSteps.push({ pageKey, code: generatedCode });
                 if (matchResult && matchResult.isNew) {
-                    if (!registryObj[pageKey]) {
-                        let pathname = '/';
-                        try {
-                            const u = new URL(page.url());
-                            pathname = u.pathname;
-                        }
-                        catch (e) { }
-                        registryObj[pageKey] = { url: pathname };
-                    }
-                    if (matchResult.type === 'testId') {
-                        if (registryObj[pageKey].testIds) {
-                            registryObj[pageKey].testIds[elementKey] = matchResult.val;
-                        }
-                        else {
-                            if (!registryObj[pageKey].testId)
-                                registryObj[pageKey].testId = {};
-                            registryObj[pageKey].testId[elementKey] = matchResult.val;
-                        }
-                    }
-                    else if (matchResult.type === 'selector') {
-                        if (registryObj[pageKey].selectors) {
-                            registryObj[pageKey].selectors[elementKey] = matchResult.val;
-                        }
-                        else {
-                            if (!registryObj[pageKey].selector)
-                                registryObj[pageKey].selector = {};
-                            registryObj[pageKey].selector[elementKey] = matchResult.val;
-                        }
+                    let pathname = '/';
+                    try {
+                        const u = new URL(page.url());
+                        pathname = u.pathname;
                     }
-                    else {
-                        if (!registryObj[pageKey][matchResult.type]) {
-                            registryObj[pageKey][matchResult.type] = [];
-                        }
-                        if (!registryObj[pageKey][matchResult.type].includes(matchResult.val)) {
-                            registryObj[pageKey][matchResult.type].push(matchResult.val);
-                        }
+                    catch {
+                        // Fall back to '/' if page URL cannot be parsed
                     }
+                    registerNewElementInRegistry(registryObj, pageKey, elementKey, matchResult, pathname);
                     const keyReplacements = (0, codegen_1.writeRegistry)(registryFilePath, registryObj, overrideMode, usedPageKeys);
                     applyReplacements(keyReplacements);
                 }
@@ -747,25 +469,27 @@ ${recordedSteps.map((s) => s.code).join('\n')}
     });
     await hoverTracker.initialize();
     const page = await context.newPage();
+    await panelManager.inject(page);
     page.on('close', async () => {
         console.log('Page closed. Closing browser...');
         await finalize();
         await browser.close().catch(() => { });
         process.exit(0);
     });
-    // Track page URL and title on every navigation (real, hash, or pushState)
     page.on('framenavigated', async (frame) => {
         if (frame === page.mainFrame()) {
             currentUrl = page.url();
             try {
                 currentTitle = await page.title();
             }
-            catch (e) { }
-            console.log(`DEBUG [cli]: navigated → url="${currentUrl}" title="${currentTitle}"`);
+            catch {
+                // Ignore title fetch error if page context is actively transitioning
+            }
         }
     });
     if (url && typeof url === 'string') {
         await page.goto(url.startsWith('http') ? url : `http://${url}`);
+        await panelManager.inject(page);
     }
     await context._enableRecorder({ language: 'javascript', mode: 'recording', recorderMode: 'api' }, eventSink);
     browser.on('disconnected', async () => {