@dev-blinq/cucumber_client 1.0.1587-dev → 1.0.1589-dev

package/bin/client/recorderv3/services.js

@@ -3,6 +3,7 @@ import { getRunsServiceBaseURL } from "../utils/index.js";
 import { axiosClient } from "../utils/axiosClient.js";
 import path from "path";
 import { EventEmitter } from "events";
+import { v4 as uuidv4 } from "uuid"; // Import uuid
 export class NamesService {
     screenshotMap;
     TOKEN;
@@ -213,8 +214,9 @@ export class PublishService {
 export class RemoteBrowserService extends EventEmitter {
     CDP_CONNECT_URL;
     context;
+    //          stableTabId,   Page Info
     pages = new Map();
-    _selectedPageId = null;
+    _selectedPageId = null; // This will be a stableTabId
     constructor({ CDP_CONNECT_URL, context }) {
         super();
         this.CDP_CONNECT_URL = CDP_CONNECT_URL;
@@ -228,182 +230,156 @@ export class RemoteBrowserService extends EventEmitter {
     }
     async initializeListeners() {
         this.log("📡 Initializing listeners");
-        // Listen for new pages
         this.context.on("page", async (page) => {
-            this.log("🆕 New page event triggered", { url: page.url() });
-            const id = await this.getPageId(page);
-            this.log("🔍 Got page ID from CDP", { id, url: page.url() });
-            if (id) {
-                this.pages.set(id, page);
-                this.log("✅ Page added to internal map", {
-                    id,
-                    url: page.url(),
-                    totalPages: this.pages.size,
-                    allPageIds: Array.from(this.pages.keys()),
-                });
-                await this.syncState();
+            const stableTabId = uuidv4(); // Create a stable ID immediately
+            this.log("🆕 New page event triggered", { stableTabId, url: page.url() });
+            // Add to map immediately with the stable ID
+            this.pages.set(stableTabId, { page, cdpTargetId: null });
+            // Asynchronously find its CDP ID
+            const cdpTargetId = await this.findCdpTargetId(page);
+            if (cdpTargetId) {
+                this.pages.get(stableTabId).cdpTargetId = cdpTargetId;
+                this.log("✅ Page mapped to CDP ID", { stableTabId, cdpTargetId });
             }
             else {
-                this.log("❌ Failed to get page ID, page not added to map", { url: page.url() });
+                this.log("⚠️ Could not find CDP ID for new page", { stableTabId });
+            }
+            // If this is the first page, select it
+            if (this.pages.size === 1) {
+                this._selectedPageId = stableTabId;
             }
+            await this.syncState();
             // Listen for page updates
             page.on("load", async () => {
-                this.log("🔄 Page load event", { id, url: page.url() });
+                this.log("🔄 Page load event", { stableTabId, url: page.url() });
+                // Navigation can *sometimes* change the CDP ID. We must re-verify.
+                const newCdpId = await this.findCdpTargetId(page);
+                const pageInfo = this.pages.get(stableTabId);
+                if (pageInfo && newCdpId && pageInfo.cdpTargetId !== newCdpId) {
+                    this.log("🔄 CDP Target ID changed on navigation", {
+                        stableTabId,
+                        old: pageInfo.cdpTargetId,
+                        new: newCdpId,
+                    });
+                    pageInfo.cdpTargetId = newCdpId;
+                }
                 await this.syncState();
             });
             page.on("close", async () => {
-                this.log("🗑️ Page close event", { id, url: page.url() });
-                if (id) {
-                    this.pages.delete(id);
-                    this.log("✅ Page removed from internal map", {
-                        id,
-                        remainingPages: this.pages.size,
-                        allPageIds: Array.from(this.pages.keys()),
+                this.log("🗑️ Page close event", { stableTabId, url: page.url() });
+                this.pages.delete(stableTabId);
+                this.log("✅ Page removed from internal map", {
+                    stableTabId,
+                    remaining: this.pages.size,
+                });
+                if (this._selectedPageId === stableTabId) {
+                    const firstPage = Array.from(this.pages.keys())[0];
+                    this._selectedPageId = firstPage || null;
+                    this.log("🔄 Selected page changed after close", {
+                        oldSelectedId: stableTabId,
+                        newSelectedId: this._selectedPageId,
                     });
-                    if (this._selectedPageId === id) {
-                        const firstPage = Array.from(this.pages.keys())[0];
-                        this._selectedPageId = firstPage || null;
-                        this.log("🔄 Selected page changed after close", {
-                            oldSelectedId: id,
-                            newSelectedId: this._selectedPageId,
-                        });
-                    }
-                    await this.syncState();
                 }
+                await this.syncState();
+            });
+            page.on("framenavigated", async (frame) => {
+                // This event fires for *all* frames (iframes and the main page)
+                // We'll sync state to capture any potential title changes
+                this.log("🔄 Frame navigated event", { stableTabId, url: frame.url() });
+                await this.syncState();
             });
         });
         // Initialize with existing pages
         const existingPages = this.context.pages();
         this.log("📄 Found existing pages", { count: existingPages.length });
         for (const page of existingPages) {
-            const id = await this.getPageId(page);
-            this.log("🔍 Processing existing page", { id, url: page.url() });
-            if (id) {
-                this.pages.set(id, page);
-                this.log("✅ Existing page added to map", {
-                    id,
-                    url: page.url(),
-                    totalPages: this.pages.size,
-                });
-            }
+            const stableTabId = uuidv4();
+            const cdpTargetId = await this.findCdpTargetId(page);
+            this.pages.set(stableTabId, { page, cdpTargetId });
+            this.log("✅ Existing page added to map", {
+                stableTabId,
+                cdpTargetId,
+                url: page.url(),
+            });
         }
-        // Set initial selected page
         if (this.pages.size > 0 && !this._selectedPageId) {
             this._selectedPageId = Array.from(this.pages.keys())[0];
             this.log("🎯 Initial selected page set", { selectedPageId: this._selectedPageId });
         }
-        this.log("✅ Initialization complete", {
-            totalPages: this.pages.size,
-            selectedPageId: this._selectedPageId,
-            allPageIds: Array.from(this.pages.keys()),
-        });
         await this.syncState();
     }
-    async getPageId(page) {
+    // Renamed from getPageId to be more descriptive
+    async findCdpTargetId(page) {
         try {
             const pageUrl = page.url();
-            this.log("🔍 Getting page ID", { pageUrl });
-            // Try to get the CDP target ID directly from the page
-            // This is more reliable than URL matching
-            try {
-                const cdpSession = await page.context().newCDPSession(page);
-                const { targetInfo } = await cdpSession.send("Target.getTargetInfo");
-                await cdpSession.detach();
-                if (targetInfo && targetInfo.targetId) {
-                    this.log("✅ Got target ID from CDP session", {
-                        targetId: targetInfo.targetId,
-                        url: pageUrl,
-                    });
-                    return targetInfo.targetId;
-                }
-            }
-            catch (cdpError) {
-                this.log("⚠️ Failed to get target ID from CDP session, falling back to URL matching", {
-                    error: cdpError instanceof Error ? cdpError.message : String(cdpError),
-                });
-            }
+            this.log("🔍 Finding CDP target ID for page", { pageUrl });
             const debugData = await this.getDebugURLs();
-            this.log("📊 CDP debug data received", {
-                totalPages: debugData.length,
-                pages: debugData.map((p) => ({ id: p.id, type: p.type, url: p.url })),
-            });
-            // Exact match
-            for (const pageData of debugData) {
-                if (pageData.type === "page" && pageData.url === pageUrl) {
-                    this.log("✅ Found exact URL match", {
-                        id: pageData.id,
-                        url: pageUrl,
-                    });
-                    return pageData.id;
+            // Try to find a page in CDP that is not already mapped
+            const unmappedCdpPages = debugData.filter((debugPage) => {
+                if (debugPage.type !== "page")
+                    return false;
+                // Check if any page in our map *already* has this CDP ID
+                for (const info of this.pages.values()) {
+                    if (info.cdpTargetId === debugPage.id)
+                        return false;
                 }
+                return true;
+            });
+            // 1. Exact URL match
+            let match = unmappedCdpPages.find((p) => p.url === pageUrl);
+            if (match) {
+                this.log("✅ Found CDP ID by exact URL", { id: match.id, url: pageUrl });
+                return match.id;
             }
-            this.log("⚠️ No exact match found, trying normalized URLs", { pageUrl });
-            // Normalized match
+            // 2. Normalized URL match
             const normalizeUrl = (url) => {
                 try {
                     const u = new URL(url);
-                    const normalized = u.hostname.replace(/^www\./, "") + u.pathname + u.search;
-                    this.log("🔧 Normalized URL", { original: url, normalized });
-                    return normalized;
+                    return u.hostname.replace(/^www\./, "") + u.pathname + u.search;
                 }
                 catch {
-                    this.log("❌ Failed to normalize URL", { url });
                     return url;
                 }
             };
             const normalizedPageUrl = normalizeUrl(pageUrl);
-            for (const pageData of debugData) {
-                if (pageData.type === "page") {
-                    const normalizedDebugUrl = normalizeUrl(pageData.url);
-                    if (normalizedDebugUrl === normalizedPageUrl) {
-                        this.log("✅ Found normalized URL match", {
-                            id: pageData.id,
-                            pageUrl: normalizedPageUrl,
-                            debugUrl: normalizedDebugUrl,
-                        });
-                        return pageData.id;
-                    }
+            match = unmappedCdpPages.find((p) => normalizeUrl(p.url) === normalizedPageUrl);
+            if (match) {
+                this.log("✅ Found CDP ID by normalized URL", { id: match.id, url: pageUrl });
+                return match.id;
+            }
+            // 3. Fallback to CDP Session
+            try {
+                const cdpSession = await page.context().newCDPSession(page);
+                const { targetInfo } = await cdpSession.send("Target.getTargetInfo");
+                await cdpSession.detach();
+                if (targetInfo && targetInfo.targetId) {
+                    this.log("✅ Found CDP ID by session", { id: targetInfo.targetId });
+                    return targetInfo.targetId;
                 }
             }
-            this.log("❌ No match found for page", {
-                pageUrl,
-                normalizedPageUrl,
-                availablePages: debugData.filter((p) => p.type === "page").map((p) => p.url),
-            });
+            catch (cdpError) {
+                this.log("⚠️ Failed to get target ID from CDP session", { error: cdpError });
+            }
+            this.log("❌ No match found for page", { pageUrl });
             return null;
         }
         catch (error) {
-            this.log("❌ Error getting page ID", {
-                error: error instanceof Error ? error.message : String(error),
-                stack: error instanceof Error ? error.stack : undefined,
-            });
+            this.log("❌ Error finding CDP target ID", { error });
             return null;
         }
     }
     async getDebugURLs() {
         const url = `${this.CDP_CONNECT_URL}/json`;
-        this.log("📡 Fetching debug URLs", { url });
         try {
             const response = await fetch(url);
             if (!response.ok) {
-                this.log("❌ Failed to fetch debug URLs", {
-                    status: response.status,
-                    statusText: response.statusText,
-                });
                 throw new Error("Error while fetching debug URL");
             }
-            const data = await response.json();
-            this.log("✅ Debug URLs fetched successfully", {
-                count: data.length,
-                pages: data.map((p) => ({ id: p.id, type: p.type, url: p.url })),
-            });
-            return data;
+            return await response.json();
         }
         catch (error) {
-            this.log("❌ Exception while fetching debug URLs", {
-                error: error instanceof Error ? error.message : String(error),
-            });
-            throw error;
+            this.log("❌ Exception while fetching debug URLs", { error });
+            return []; // Return empty array on failure
         }
     }
     async syncState() {
@@ -413,134 +389,48 @@ export class RemoteBrowserService extends EventEmitter {
             this.log("✅ State sync complete", {
                 pagesCount: state.pages.length,
                 selectedPageId: state.selectedPageId,
-                pages: state.pages.map((p) => ({ id: p.id, title: p.title, url: p.url })),
             });
             this.emit("BrowserService.stateSync", state);
         }
         catch (error) {
-            this.log("❌ Error syncing state", {
-                error: error instanceof Error ? error.message : String(error),
-                stack: error instanceof Error ? error.stack : undefined,
-            });
+            this.log("❌ Error syncing state", { error });
         }
     }
     async getState() {
-        this.log("📊 Getting current state", {
-            internalPagesCount: this.pages.size,
-            internalPageIds: Array.from(this.pages.keys()),
-            selectedPageId: this._selectedPageId,
-        });
+        this.log("📊 Getting current state");
         const debugData = await this.getDebugURLs();
-        this.log("📊 Debug data for state", {
-            debugPagesCount: debugData.length,
-            debugPages: debugData.map((p) => ({ id: p.id, type: p.type, url: p.url })),
-        });
         const pagesData = [];
-        const updatedPages = new Map();
-        const matchedDebugIds = new Set(); // Track which CDP IDs we've already matched
-        let updatedSelectedPageId = this._selectedPageId;
-        for (const [oldId, page] of this.pages.entries()) {
-            this.log("🔍 Processing page from internal map", {
-                oldId,
-                url: page.url(),
-            });
-            // Try to get the current CDP target ID directly from the page
-            let currentId = null;
-            try {
-                const cdpSession = await page.context().newCDPSession(page);
-                const { targetInfo } = await cdpSession.send("Target.getTargetInfo");
-                await cdpSession.detach();
-                if (targetInfo && targetInfo.targetId) {
-                    currentId = targetInfo.targetId;
-                    this.log("✅ Got current target ID from CDP session", {
-                        oldId,
-                        currentId,
-                        url: page.url(),
-                    });
-                }
-            }
-            catch (cdpError) {
-                this.log("⚠️ Failed to get target ID from CDP session", {
-                    oldId,
-                    error: cdpError instanceof Error ? cdpError.message : String(cdpError),
-                });
-            }
-            // If we got the current ID from CDP session, use it
-            let debugInfo = currentId ? debugData.find((d) => d.id === currentId) : null;
-            // Fallback 1: Try to find by old ID
-            if (!debugInfo) {
-                debugInfo = debugData.find((d) => d.id === oldId && !matchedDebugIds.has(d.id));
-            }
-            // Fallback 2: Try to find by URL (only if not already matched)
+        // Re-verify CDP Target IDs for all pages, as they might have changed
+        for (const [stableTabId, pageInfo] of this.pages.entries()) {
+            let currentCdpId = pageInfo.cdpTargetId;
+            // Find the CDP info for our KNOWN cdpTargetId
+            let debugInfo = debugData.find((d) => d.id === currentCdpId);
+            // If not found (e.g., ID changed), try to find it again
             if (!debugInfo) {
-                this.log("⚠️ Page ID not found in CDP, attempting to match by URL", {
-                    oldId,
-                    pageUrl: page.url(),
-                });
-                debugInfo = debugData.find((d) => d.type === "page" && d.url === page.url() && !matchedDebugIds.has(d.id));
-                if (debugInfo) {
-                    this.log("✅ Found page by URL match, updating ID", {
-                        oldId,
-                        newId: debugInfo.id,
-                        url: page.url(),
-                    });
+                this.log("⚠️ Re-finding CDP ID for", { stableTabId });
+                const newCdpId = await this.findCdpTargetId(pageInfo.page);
+                if (newCdpId) {
+                    pageInfo.cdpTargetId = newCdpId;
+                    debugInfo = debugData.find((d) => d.id === newCdpId);
+                    this.log("✅ Re-found CDP ID", { stableTabId, newCdpId });
                 }
             }
-            else {
-                this.log("✅ Found matching debug info by ID", {
-                    id: debugInfo.id,
-                    debugUrl: debugInfo.url,
-                    pageUrl: page.url(),
+            try {
+                pagesData.push({
+                    id: stableTabId, // Use the STABLE ID
+                    title: await pageInfo.page.title(),
+                    url: pageInfo.page.url(),
+                    wsDebuggerUrl: debugInfo?.webSocketDebuggerUrl || "", // Get the *current* ws url
                 });
             }
-            if (debugInfo) {
-                // Mark this CDP ID as matched to avoid duplicate matches
-                matchedDebugIds.add(debugInfo.id);
-                // Update selected page ID if this was the selected page and ID changed
-                if (oldId === this._selectedPageId && oldId !== debugInfo.id) {
-                    updatedSelectedPageId = debugInfo.id;
-                    this.log("🔄 Updated selected page ID", {
-                        oldId,
-                        newId: debugInfo.id,
-                    });
-                }
-                try {
-                    const pageData = {
-                        id: debugInfo.id,
-                        title: await page.title(),
-                        url: page.url(),
-                        wsDebuggerUrl: debugInfo.webSocketDebuggerUrl || "",
-                    };
-                    pagesData.push(pageData);
-                    updatedPages.set(debugInfo.id, page);
-                    this.log("✅ Page added to state", pageData);
-                }
-                catch (error) {
-                    this.log("❌ Error getting page data", {
-                        id: oldId,
-                        error: error instanceof Error ? error.message : String(error),
-                    });
-                }
-            }
-            else {
-                this.log("⚠️ No matching debug info found by ID or URL", {
-                    oldId,
-                    pageUrl: page.url(),
-                    availableDebugIds: debugData.map((d) => d.id),
-                    availableDebugUrls: debugData.map((d) => d.url),
-                });
+            catch (error) {
+                this.log("❌ Error getting page data (page might be closed)", { stableTabId });
             }
         }
-        // Update the internal pages map with current CDP IDs
-        if (updatedPages.size !== this.pages.size || updatedSelectedPageId !== this._selectedPageId) {
-            this.log("🔄 Updating internal state with new CDP IDs", {
-                oldPagesCount: this.pages.size,
-                newPagesCount: updatedPages.size,
-                oldSelectedId: this._selectedPageId,
-                newSelectedId: updatedSelectedPageId,
-            });
-            this.pages = updatedPages;
-            this._selectedPageId = updatedSelectedPageId;
+        // Ensure selectedPageId is valid
+        if (this._selectedPageId && !this.pages.has(this._selectedPageId)) {
+            this._selectedPageId = this.pages.size > 0 ? Array.from(this.pages.keys())[0] : null;
+            this.log("🔄 Corrected selectedPageId", { new: this._selectedPageId });
         }
         const state = {
             pages: pagesData,
@@ -552,108 +442,502 @@ export class RemoteBrowserService extends EventEmitter {
     async createTab(url = "about:blank") {
         try {
             this.log("🆕 Creating new tab", { url });
-            const page = await this.context.newPage();
-            this.log("✅ New page created by Playwright", { url: page.url() });
-            if (typeof url === "string" && url !== "about:blank") {
-                this.log("🌐 Navigating to URL", { url });
+            const page = await this.context.newPage(); // This will trigger the 'page' event
+            if (url !== "about:blank") {
                 await page.goto(url, { waitUntil: "domcontentloaded" });
-                this.log("✅ Navigation complete", { finalUrl: page.url() });
-            }
-            // Wait for CDP to register the page
-            this.log("⏳ Waiting for CDP registration...");
-            await new Promise((resolve) => setTimeout(resolve, 500));
-            const id = await this.getPageId(page);
-            this.log("🔍 Retrieved page ID after wait", { id, url: page.url() });
-            if (id) {
-                this.pages.set(id, page);
-                this._selectedPageId = id;
-                this.log("✅ Tab created successfully", {
-                    id,
-                    url: page.url(),
-                    totalPages: this.pages.size,
-                    allPageIds: Array.from(this.pages.keys()),
-                    selectedPageId: this._selectedPageId,
-                });
             }
-            else {
-                this.log("❌ Failed to get page ID for new tab", { url: page.url() });
-                // Try to get debug data to see what's available
-                const debugData = await this.getDebugURLs();
-                this.log("🔍 Current CDP state after failed ID retrieval", {
-                    debugPages: debugData.map((p) => ({ id: p.id, url: p.url, type: p.type })),
-                });
+            // The 'page' event handler now manages setting the selected ID
+            // We just need to find the new page and select it
+            for (const [stableTabId, pageInfo] of this.pages.entries()) {
+                if (pageInfo.page === page) {
+                    this._selectedPageId = stableTabId;
+                    this.log("✅ New tab created and selected", { stableTabId, url });
+                    break;
+                }
             }
             await this.syncState();
         }
         catch (error) {
-            this.log("❌ Error creating tab", {
-                url,
-                error: error instanceof Error ? error.message : String(error),
-                stack: error instanceof Error ? error.stack : undefined,
-            });
-            throw error;
+            this.log("❌ Error creating tab", { error });
         }
     }
-    async closeTab(pageId) {
+    async closeTab(stableTabId) {
         try {
-            this.log("🗑️ Closing tab", { pageId });
-            const page = this.pages.get(pageId);
-            if (page) {
-                this.log("✅ Found page to close", { pageId, url: page.url() });
-                await page.close();
-                this.log("✅ Page closed successfully", { pageId });
+            this.log("🗑️ Closing tab", { stableTabId });
+            const pageInfo = this.pages.get(stableTabId);
+            if (pageInfo) {
+                await pageInfo.page.close(); // This will trigger the 'close' event
             }
             else {
-                this.log("⚠️ Page not found", {
-                    pageId,
-                    availablePageIds: Array.from(this.pages.keys()),
-                });
+                this.log("⚠️ Page not found for closing", { stableTabId });
             }
+            // 'close' event handler will manage state update
         }
         catch (error) {
-            this.log("❌ Error closing tab", {
-                pageId,
-                error: error instanceof Error ? error.message : String(error),
-            });
-            throw error;
+            this.log("❌ Error closing tab", { error });
         }
     }
-    async selectTab(pageId) {
+    async selectTab(stableTabId) {
         try {
-            this.log("🎯 Selecting tab", { pageId });
-            const page = this.pages.get(pageId);
-            if (page) {
-                this._selectedPageId = pageId;
-                await page.bringToFront();
-                this.log("✅ Tab selected successfully", {
-                    pageId,
-                    url: page.url(),
-                    selectedPageId: this._selectedPageId,
-                });
+            this.log("🎯 Selecting tab", { stableTabId });
+            const pageInfo = this.pages.get(stableTabId);
+            if (pageInfo) {
+                this._selectedPageId = stableTabId;
+                await pageInfo.page.bringToFront();
+                this.log("✅ Tab selected successfully", { stableTabId });
                 await this.syncState();
             }
             else {
-                this.log("⚠️ Page not found for selection", {
-                    pageId,
-                    availablePageIds: Array.from(this.pages.keys()),
-                });
+                this.log("⚠️ Page not found for selection", { stableTabId });
             }
         }
         catch (error) {
-            this.log("❌ Error selecting tab", {
-                pageId,
-                error: error instanceof Error ? error.message : String(error),
-            });
-            throw error;
+            this.log("❌ Error selecting tab", { error });
         }
     }
+    // ... (getSelectedPage remains the same, but operates on new state)
     getSelectedPage() {
-        const page = this._selectedPageId ? this.pages.get(this._selectedPageId) || null : null;
+        const pageInfo = this._selectedPageId ? this.pages.get(this._selectedPageId) : null;
         this.log("🔍 Getting selected page", {
             selectedPageId: this._selectedPageId,
-            found: !!page,
-            url: page?.url(),
+            found: !!pageInfo,
+            url: pageInfo?.page.url(),
         });
-        return page;
+        return pageInfo?.page || null;
     }
 }
+// export class RemoteBrowserService extends EventEmitter {
+//   private CDP_CONNECT_URL: string;
+//   private context: BrowserContext;
+//   private pages: Map<string, Page> = new Map();
+//   private _selectedPageId: string | null = null;
+//   constructor({ CDP_CONNECT_URL, context }: { CDP_CONNECT_URL: string; context: BrowserContext }) {
+//     super();
+//     this.CDP_CONNECT_URL = CDP_CONNECT_URL;
+//     this.context = context;
+//     this.log("🚀 RemoteBrowserService initialized", { CDP_CONNECT_URL });
+//     this.initializeListeners();
+//   }
+//   private log(message: string, data?: any) {
+//     const timestamp = new Date().toISOString();
+//     console.log(`[${timestamp}] [RemoteBrowserService] ${message}`, data ? JSON.stringify(data, null, 2) : "");
+//   }
+//   private async initializeListeners() {
+//     this.log("📡 Initializing listeners");
+//     // Listen for new pages
+//     this.context.on("page", async (page) => {
+//       this.log("🆕 New page event triggered", { url: page.url() });
+//       const id = await this.getPageId(page);
+//       this.log("🔍 Got page ID from CDP", { id, url: page.url() });
+//       if (id) {
+//         this.pages.set(id, page);
+//         this.log("✅ Page added to internal map", {
+//           id,
+//           url: page.url(),
+//           totalPages: this.pages.size,
+//           allPageIds: Array.from(this.pages.keys()),
+//         });
+//         await this.syncState();
+//       } else {
+//         this.log("❌ Failed to get page ID, page not added to map", { url: page.url() });
+//       }
+//       // Listen for page updates
+//       page.on("load", async () => {
+//         this.log("🔄 Page load event", { id, url: page.url() });
+//         await this.syncState();
+//       });
+//       page.on("close", async () => {
+//         this.log("🗑️ Page close event", { id, url: page.url() });
+//         if (id) {
+//           this.pages.delete(id);
+//           this.log("✅ Page removed from internal map", {
+//             id,
+//             remainingPages: this.pages.size,
+//             allPageIds: Array.from(this.pages.keys()),
+//           });
+//           if (this._selectedPageId === id) {
+//             const firstPage = Array.from(this.pages.keys())[0];
+//             this._selectedPageId = firstPage || null;
+//             this.log("🔄 Selected page changed after close", {
+//               oldSelectedId: id,
+//               newSelectedId: this._selectedPageId,
+//             });
+//           }
+//           await this.syncState();
+//         }
+//       });
+//     });
+//     // Initialize with existing pages
+//     const existingPages = this.context.pages();
+//     this.log("📄 Found existing pages", { count: existingPages.length });
+//     for (const page of existingPages) {
+//       const id = await this.getPageId(page);
+//       this.log("🔍 Processing existing page", { id, url: page.url() });
+//       if (id) {
+//         this.pages.set(id, page);
+//         this.log("✅ Existing page added to map", {
+//           id,
+//           url: page.url(),
+//           totalPages: this.pages.size,
+//         });
+//       }
+//     }
+//     // Set initial selected page
+//     if (this.pages.size > 0 && !this._selectedPageId) {
+//       this._selectedPageId = Array.from(this.pages.keys())[0];
+//       this.log("🎯 Initial selected page set", { selectedPageId: this._selectedPageId });
+//     }
+//     this.log("✅ Initialization complete", {
+//       totalPages: this.pages.size,
+//       selectedPageId: this._selectedPageId,
+//       allPageIds: Array.from(this.pages.keys()),
+//     });
+//     await this.syncState();
+//   }
+//   private async getPageId(page: Page): Promise<string | null> {
+//     try {
+//       const pageUrl = page.url();
+//       this.log("🔍 Getting page ID", { pageUrl });
+//       // Fetch debug data from /json endpoint (more reliable for matching)
+//       const debugData = await this.getDebugURLs();
+//       this.log("📊 CDP debug data received", {
+//         totalPages: debugData.length,
+//         pages: debugData.map((p) => ({ id: p.id, type: p.type, url: p.url })),
+//       });
+//       // Exact URL match
+//       for (const pageData of debugData) {
+//         if (pageData.type === "page" && pageData.url === pageUrl) {
+//           this.log("✅ Found exact URL match in /json", {
+//             id: pageData.id,
+//             url: pageUrl,
+//           });
+//           return pageData.id;
+//         }
+//       }
+//       this.log("⚠️ No exact match found, trying normalized URLs", { pageUrl });
+//       // Normalized URL match
+//       const normalizeUrl = (url: string) => {
+//         try {
+//           const u = new URL(url);
+//           const normalized = u.hostname.replace(/^www\./, "") + u.pathname + u.search;
+//           return normalized;
+//         } catch {
+//           return url;
+//         }
+//       };
+//       const normalizedPageUrl = normalizeUrl(pageUrl);
+//       for (const pageData of debugData) {
+//         if (pageData.type === "page") {
+//           const normalizedDebugUrl = normalizeUrl(pageData.url);
+//           if (normalizedDebugUrl === normalizedPageUrl) {
+//             this.log("✅ Found normalized URL match in /json", {
+//               id: pageData.id,
+//               pageUrl: normalizedPageUrl,
+//               debugUrl: normalizedDebugUrl,
+//             });
+//             return pageData.id;
+//           }
+//         }
+//       }
+//       // If still not found, try CDP session as fallback
+//       this.log("⚠️ Not found in /json, trying CDP Target.getTargetInfo", { pageUrl });
+//       try {
+//         const cdpSession = await page.context().newCDPSession(page);
+//         const { targetInfo } = await cdpSession.send("Target.getTargetInfo");
+//         await cdpSession.detach();
+//         if (targetInfo && targetInfo.targetId) {
+//           // Verify this target ID exists in debug data
+//           const targetExists = debugData.some((d) => d.id === targetInfo.targetId);
+//           if (targetExists) {
+//             this.log("✅ Got target ID from CDP session and verified in /json", {
+//               targetId: targetInfo.targetId,
+//               url: pageUrl,
+//             });
+//             return targetInfo.targetId;
+//           } else {
+//             this.log("⚠️ Target ID from CDP session not found in /json (ID mismatch)", {
+//               cdpTargetId: targetInfo.targetId,
+//               availableIds: debugData.map((d) => d.id),
+//             });
+//           }
+//         }
+//       } catch (cdpError) {
+//         this.log("⚠️ Failed to get target ID from CDP session", {
+//           error: cdpError instanceof Error ? cdpError.message : String(cdpError),
+//         });
+//       }
+//       this.log("❌ No match found for page", {
+//         pageUrl,
+//         normalizedPageUrl,
+//         availablePages: debugData.filter((p) => p.type === "page").map((p) => p.url),
+//       });
+//       return null;
+//     } catch (error) {
+//       this.log("❌ Error getting page ID", {
+//         error: error instanceof Error ? error.message : String(error),
+//         stack: error instanceof Error ? error.stack : undefined,
+//       });
+//       return null;
+//     }
+//   }
+//   private async getDebugURLs(): Promise<DebugPageInfo[]> {
+//     const url = `${this.CDP_CONNECT_URL}/json`;
+//     this.log("📡 Fetching debug URLs", { url });
+//     try {
+//       const response = await fetch(url);
+//       if (!response.ok) {
+//         this.log("❌ Failed to fetch debug URLs", {
+//           status: response.status,
+//           statusText: response.statusText,
+//         });
+//         throw new Error("Error while fetching debug URL");
+//       }
+//       const data = await response.json();
+//       this.log("✅ Debug URLs fetched successfully", {
+//         count: data.length,
+//         pages: data.map((p: any) => ({ id: p.id, type: p.type, url: p.url })),
+//       });
+//       return data;
+//     } catch (error) {
+//       this.log("❌ Exception while fetching debug URLs", {
+//         error: error instanceof Error ? error.message : String(error),
+//       });
+//       throw error;
+//     }
+//   }
+//   private async syncState() {
+//     try {
+//       this.log("🔄 Starting state sync");
+//       const state = await this.getState();
+//       this.log("✅ State sync complete", {
+//         pagesCount: state.pages.length,
+//         selectedPageId: state.selectedPageId,
+//         pages: state.pages.map((p) => ({ id: p.id, title: p.title, url: p.url })),
+//       });
+//       this.emit("BrowserService.stateSync", state);
+//     } catch (error) {
+//       this.log("❌ Error syncing state", {
+//         error: error instanceof Error ? error.message : String(error),
+//         stack: error instanceof Error ? error.stack : undefined,
+//       });
+//     }
+//   }
+//   async getState(): Promise<BrowserState> {
+//     this.log("📊 Getting current state", {
+//       internalPagesCount: this.pages.size,
+//       internalPageIds: Array.from(this.pages.keys()),
+//       selectedPageId: this._selectedPageId,
+//     });
+//     const debugData = await this.getDebugURLs();
+//     this.log("📊 Debug data for state", {
+//       debugPagesCount: debugData.length,
+//       debugPages: debugData.map((p) => ({ id: p.id, type: p.type, url: p.url })),
+//     });
+//     const pagesData: PageData[] = [];
+//     const updatedPages = new Map<string, Page>();
+//     const matchedDebugIds = new Set<string>(); // Track which CDP IDs we've already matched
+//     let updatedSelectedPageId = this._selectedPageId;
+//     for (const [oldId, page] of this.pages.entries()) {
+//       this.log("🔍 Processing page from internal map", {
+//         oldId,
+//         url: page.url(),
+//       });
+//       // Try to find by old ID first (most common case - ID hasn't changed)
+//       let debugInfo = debugData.find((d) => d.id === oldId && !matchedDebugIds.has(d.id));
+//       // Fallback: Try to find by URL (page ID may have changed)
+//       if (!debugInfo) {
+//         this.log("⚠️ Page ID not found in CDP, attempting to match by URL", {
+//           oldId,
+//           pageUrl: page.url(),
+//         });
+//         debugInfo = debugData.find((d) => d.type === "page" && d.url === page.url() && !matchedDebugIds.has(d.id));
+//         if (debugInfo) {
+//           this.log("✅ Found page by URL match, updating ID", {
+//             oldId,
+//             newId: debugInfo.id,
+//             url: page.url(),
+//           });
+//           // Update selected page ID if this was the selected page and ID changed
+//           if (oldId === this._selectedPageId) {
+//             updatedSelectedPageId = debugInfo.id;
+//             this.log("🔄 Updated selected page ID", {
+//               oldId,
+//               newId: debugInfo.id,
+//             });
+//           }
+//         }
+//       } else {
+//         this.log("✅ Found matching debug info by ID", {
+//           id: debugInfo.id,
+//           debugUrl: debugInfo.url,
+//           pageUrl: page.url(),
+//         });
+//       }
+//       if (debugInfo) {
+//         // Mark this CDP ID as matched to avoid duplicate matches
+//         matchedDebugIds.add(debugInfo.id);
+//         try {
+//           const pageData = {
+//             id: debugInfo.id,
+//             title: await page.title(),
+//             url: page.url(),
+//             wsDebuggerUrl: debugInfo.webSocketDebuggerUrl || "",
+//           };
+//           pagesData.push(pageData);
+//           updatedPages.set(debugInfo.id, page);
+//           this.log("✅ Page added to state", pageData);
+//         } catch (error) {
+//           this.log("❌ Error getting page data", {
+//             id: oldId,
+//             error: error instanceof Error ? error.message : String(error),
+//           });
+//         }
+//       } else {
+//         this.log("⚠️ No matching debug info found by ID or URL", {
+//           oldId,
+//           pageUrl: page.url(),
+//           availableDebugIds: debugData.map((d) => d.id),
+//           availableDebugUrls: debugData.map((d) => d.url),
+//           alreadyMatched: Array.from(matchedDebugIds),
+//         });
+//       }
+//     }
+//     // Update the internal pages map with current CDP IDs
+//     if (updatedPages.size !== this.pages.size || updatedSelectedPageId !== this._selectedPageId) {
+//       this.log("🔄 Updating internal state with new CDP IDs", {
+//         oldPagesCount: this.pages.size,
+//         newPagesCount: updatedPages.size,
+//         oldSelectedId: this._selectedPageId,
+//         newSelectedId: updatedSelectedPageId,
+//       });
+//       this.pages = updatedPages;
+//       this._selectedPageId = updatedSelectedPageId;
+//     }
+//     const state = {
+//       pages: pagesData,
+//       selectedPageId: this._selectedPageId,
+//     };
+//     this.log("📦 Final state", state);
+//     return state;
+//   }
+//   async createTab(url: string = "about:blank"): Promise<void> {
+//     try {
+//       this.log("🆕 Creating new tab", { url });
+//       const page = await this.context.newPage();
+//       this.log("✅ New page created by Playwright", { url: page.url() });
+//       if (typeof url === "string" && url !== "about:blank") {
+//         this.log("🌐 Navigating to URL", { url });
+//         await page.goto(url, { waitUntil: "domcontentloaded" });
+//         this.log("✅ Navigation complete", { finalUrl: page.url() });
+//       }
+//       // Wait longer for CDP to register and stabilize the page
+//       this.log("⏳ Waiting for CDP registration and stabilization...");
+//       await new Promise((resolve) => setTimeout(resolve, 1000)); // Increased to 1 second
+//       // Try multiple times to get a stable page ID
+//       let id: string | null = null;
+//       let attempts = 0;
+//       const maxAttempts = 5;
+//       while (!id && attempts < maxAttempts) {
+//         attempts++;
+//         this.log(`🔍 Attempt ${attempts}/${maxAttempts} to get page ID`);
+//         id = await this.getPageId(page);
+//         if (!id) {
+//           this.log(`⏳ Page ID not found, waiting 500ms before retry...`);
+//           await new Promise((resolve) => setTimeout(resolve, 500));
+//         }
+//       }
+//       this.log("🔍 Retrieved page ID after retries", {
+//         id,
+//         url: page.url(),
+//         attempts,
+//       });
+//       if (id) {
+//         this.pages.set(id, page);
+//         this._selectedPageId = id;
+//         this.log("✅ Tab created successfully", {
+//           id,
+//           url: page.url(),
+//           totalPages: this.pages.size,
+//           allPageIds: Array.from(this.pages.keys()),
+//           selectedPageId: this._selectedPageId,
+//         });
+//       } else {
+//         this.log("❌ Failed to get page ID for new tab after all retries", {
+//           url: page.url(),
+//           attempts,
+//         });
+//         // Try to get debug data to see what's available
+//         const debugData = await this.getDebugURLs();
+//         this.log("🔍 Current CDP state after failed ID retrieval", {
+//           debugPages: debugData.map((p) => ({ id: p.id, url: p.url, type: p.type })),
+//         });
+//       }
+//       await this.syncState();
+//     } catch (error) {
+//       this.log("❌ Error creating tab", {
+//         url,
+//         error: error instanceof Error ? error.message : String(error),
+//         stack: error instanceof Error ? error.stack : undefined,
+//       });
+//       throw error;
+//     }
+//   }
+//   async closeTab(pageId: string): Promise<void> {
+//     try {
+//       this.log("🗑️ Closing tab", { pageId });
+//       const page = this.pages.get(pageId);
+//       if (page) {
+//         this.log("✅ Found page to close", { pageId, url: page.url() });
+//         await page.close();
+//         this.log("✅ Page closed successfully", { pageId });
+//       } else {
+//         this.log("⚠️ Page not found", {
+//           pageId,
+//           availablePageIds: Array.from(this.pages.keys()),
+//         });
+//       }
+//     } catch (error) {
+//       this.log("❌ Error closing tab", {
+//         pageId,
+//         error: error instanceof Error ? error.message : String(error),
+//       });
+//       throw error;
+//     }
+//   }
+//   async selectTab(pageId: string): Promise<void> {
+//     try {
+//       this.log("🎯 Selecting tab", { pageId });
+//       const page = this.pages.get(pageId);
+//       if (page) {
+//         this._selectedPageId = pageId;
+//         await page.bringToFront();
+//         this.log("✅ Tab selected successfully", {
+//           pageId,
+//           url: page.url(),
+//           selectedPageId: this._selectedPageId,
+//         });
+//         await this.syncState();
+//       } else {
+//         this.log("⚠️ Page not found for selection", {
+//           pageId,
+//           availablePageIds: Array.from(this.pages.keys()),
+//         });
+//       }
+//     } catch (error) {
+//       this.log("❌ Error selecting tab", {
+//         pageId,
+//         error: error instanceof Error ? error.message : String(error),
+//       });
+//       throw error;
+//     }
+//   }
+//   getSelectedPage(): Page | null {
+//     const page = this._selectedPageId ? this.pages.get(this._selectedPageId) || null : null;
+//     this.log("🔍 Getting selected page", {
+//       selectedPageId: this._selectedPageId,
+//       found: !!page,
+//       url: page?.url(),
+//     });
+//     return page;
+//   }
+// }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-blinq/cucumber_client",
-  "version": "1.0.1587-dev",
+  "version": "1.0.1589-dev",
   "description": " ",
   "main": "bin/index.js",
   "types": "bin/index.d.ts",