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

package/bin/client/recorderv3/services.js

@@ -219,27 +219,54 @@ export class RemoteBrowserService extends EventEmitter {
         super();
         this.CDP_CONNECT_URL = CDP_CONNECT_URL;
         this.context = context;
+        this.log("🚀 RemoteBrowserService initialized", { CDP_CONNECT_URL });
         this.initializeListeners();
     }
+    log(message, data) {
+        const timestamp = new Date().toISOString();
+        console.log(`[${timestamp}] [RemoteBrowserService] ${message}`, data ? JSON.stringify(data, null, 2) : "");
+    }
     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) {
-                        // Select first available page
                         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();
                 }
@@ -247,155 +274,386 @@ export class RemoteBrowserService extends EventEmitter {
         });
         // 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,
+                });
             }
-            // page.on("framenavigated", async () => {
-            // await new Promise((resolve) => setTimeout(resolve, 1000)); // wait for a bit
-            // await this.syncState();
-            // });
         }
         // 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) {
         try {
-            const debugData = await this.getDebugURLs();
             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),
+                });
+            }
+            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;
                 }
             }
-            // If exact match fails, try to find by comparing URLs without protocol/www
+            this.log("⚠️ No exact match found, trying normalized URLs", { pageUrl });
+            // Normalized match
             const normalizeUrl = (url) => {
                 try {
                     const u = new URL(url);
-                    return u.hostname.replace(/^www\./, "") + u.pathname + u.search;
+                    const normalized = u.hostname.replace(/^www\./, "") + u.pathname + u.search;
+                    this.log("🔧 Normalized URL", { original: url, normalized });
+                    return normalized;
                 }
                 catch {
+                    this.log("❌ Failed to normalize URL", { url });
                     return url;
                 }
             };
             const normalizedPageUrl = normalizeUrl(pageUrl);
             for (const pageData of debugData) {
-                if (pageData.type === "page" && normalizeUrl(pageData.url) === normalizedPageUrl) {
-                    return pageData.id;
+                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;
+                    }
                 }
             }
+            this.log("❌ No match found for page", {
+                pageUrl,
+                normalizedPageUrl,
+                availablePages: debugData.filter((p) => p.type === "page").map((p) => p.url),
+            });
             return null;
         }
         catch (error) {
-            console.error("Error getting page ID:", error);
+            this.log("❌ Error getting page ID", {
+                error: error instanceof Error ? error.message : String(error),
+                stack: error instanceof Error ? error.stack : undefined,
+            });
             return null;
         }
     }
     async getDebugURLs() {
         const url = `${this.CDP_CONNECT_URL}/json`;
-        const response = await fetch(url);
-        if (!response.ok) {
-            throw new Error("Error while fetching debug URL");
+        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;
+        }
+        catch (error) {
+            this.log("❌ Exception while fetching debug URLs", {
+                error: error instanceof Error ? error.message : String(error),
+            });
+            throw error;
         }
-        return response.json();
     }
     async syncState() {
         try {
+            this.log("🔄 Starting state sync");
             const state = await this.getState();
-            console.log(`Syncing state: ${state.pages.length} pages, selected: ${state.selectedPageId}`);
+            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) {
-            console.error("Error syncing state:", error);
+            this.log("❌ Error syncing state", {
+                error: error instanceof Error ? error.message : String(error),
+                stack: error instanceof Error ? error.stack : undefined,
+            });
         }
     }
     async getState() {
+        this.log("📊 Getting current state", {
+            internalPagesCount: this.pages.size,
+            internalPageIds: Array.from(this.pages.keys()),
+            selectedPageId: this._selectedPageId,
+        });
         const debugData = await this.getDebugURLs();
-        console.log(`Debug data fetched: ${JSON.stringify(debugData)} entries`);
+        this.log("📊 Debug data for state", {
+            debugPagesCount: debugData.length,
+            debugPages: debugData.map((p) => ({ id: p.id, type: p.type, url: p.url })),
+        });
         const pagesData = [];
-        for (const [id, page] of this.pages.entries()) {
-            const debugInfo = debugData.find((d) => d.id === id);
+        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)
+            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(),
+                    });
+                }
+            }
+            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);
+                // 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 {
-                    pagesData.push({
-                        id,
+                    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) {
-                    console.error(`Error getting data for page ${id}:`, 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),
+                });
+            }
         }
-        return {
+        // 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 = "about:blank") {
         try {
-            console.log(`Creating tab: ${url}`);
+            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 a bit for the page to be registered in CDP
-            await new Promise((resolve) => setTimeout(resolve, 100));
+            // 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;
-                console.log(`Tab created successfully: ${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 })),
+                });
             }
             await this.syncState();
         }
         catch (error) {
-            console.error("Error creating tab:", 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) {
         try {
-            console.log(`Closing tab: ${pageId}`);
+            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();
-                // The close event handler will handle cleanup and sync
+                this.log("✅ Page closed successfully", { pageId });
             }
             else {
-                console.warn(`Page ${pageId} not found`);
+                this.log("⚠️ Page not found", {
+                    pageId,
+                    availablePageIds: Array.from(this.pages.keys()),
+                });
             }
         }
         catch (error) {
-            console.error("Error closing tab:", error);
+            this.log("❌ Error closing tab", {
+                pageId,
+                error: error instanceof Error ? error.message : String(error),
+            });
             throw error;
         }
     }
     async selectTab(pageId) {
         try {
-            console.log(`Selecting tab: ${pageId}`);
+            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 {
-                console.warn(`Page ${pageId} not found`);
+                this.log("⚠️ Page not found for selection", {
+                    pageId,
+                    availablePageIds: Array.from(this.pages.keys()),
+                });
             }
         }
         catch (error) {
-            console.error("Error selecting tab:", error);
+            this.log("❌ Error selecting tab", {
+                pageId,
+                error: error instanceof Error ? error.message : String(error),
+            });
             throw error;
         }
     }
     getSelectedPage() {
-        return this._selectedPageId ? this.pages.get(this._selectedPageId) || null : 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.1585-dev",
+  "version": "1.0.1587-dev",
   "description": " ",
   "main": "bin/index.js",
   "types": "bin/index.d.ts",