@dev-blinq/cucumber_client 1.0.1562-dev → 1.0.1563-dev

package/bin/client/recorderv3/bvt_init.js

@@ -43,6 +43,7 @@ class PromisifiedSocketServer {
         }
         this.socket.emit("response", { id, value: response, roomId, socketId });
       } catch (error) {
+        console.error(`Error handling request for event: ${event}`, error);
         socketLogger.error("Error handling request", {
           event,
           input,
@@ -294,6 +295,22 @@ async function BVTRecorderInit({ envName, projectDir, roomId, TOKEN, socket = nu
     "recorderWindow.stopRecordingNetwork": async (input) => {
       return recorder.stopRecordingNetwork(input);
     },
+    "browserUI.requestState": async (input) => {
+      console.log("Received browserUI.requestState");
+      await recorder.getBrowserState();
+    },
+    "browserUI.createTab": async (input) => {
+      console.log("Received browserUI.createTab", input);
+      await recorder.createTab(input);
+    },
+    "browserUI.closeTab": async (input) => {
+      console.log("Received browserUI.closeTab", input);
+      await recorder.closeTab(input);
+    },
+    "browserUI.selectTab": async (input) => {
+      console.log("Received browserUI.selectTab", input);
+      await recorder.selectTab(input);
+    },
   });
 
   socket.on("targetBrowser.command.event", async (input) => {

package/bin/client/recorderv3/bvt_recorder.js

@@ -211,6 +211,8 @@ export class BVTRecorder {
     interceptResults: "BVTRecorder.interceptResults",
     onDebugURLChange: "BVTRecorder.onDebugURLChange",
     updateCommand: "BVTRecorder.updateCommand",
+    browserStateSync: "BrowserService.stateSync",
+    browserStateError: "BrowserService.stateError",
   };
   bindings = {
     __bvt_recordCommand: async ({ frame, page, context }, event) => {
@@ -347,19 +349,19 @@ export class BVTRecorder {
       },
       bvtContext: this.bvtContext,
     });
-    const context = bvtContext.playContext;
-    this.context = context;
+    this.context = bvtContext.playContext;
     this.web = bvtContext.stable || bvtContext.web;
     this.web.tryAllStrategies = true;
     this.page = bvtContext.page;
     this.pageSet.add(this.page);
     if (process.env.REMOTE_RECORDER === "true") {
-      this.remoteBrowser = new RemoteBrowserService({
+      this.browserEmitter = new RemoteBrowserService({
         CDP_CONNECT_URL: `http://localhost:${this.#remoteDebuggerPort}`,
-        currentPage: this.page,
+        context: this.context,
       });
-      this.remoteBrowser.on("debugURLChange", (url) => {
-        this.sendEvent(this.events.onDebugURLChange, url);
+      this.browserEmitter.on(this.events.browserStateSync, (state) => {
+        this.page = this.browserEmitter.getSelectedPage();
+        this.sendEvent(this.events.browserStateSync, state);
       });
     }
     this.lastKnownUrlPath = this._updateUrlPath();
@@ -644,9 +646,6 @@ export class BVTRecorder {
       try {
         if (page.isClosed()) return;
         this.pageSet.add(page);
-        if (this.remoteBrowser) {
-          this.remoteBrowser.selectedPage = page;
-        }
         await page.waitForLoadState("domcontentloaded");
 
         // add listener for frame navigation on new tab
@@ -1332,4 +1331,53 @@ export class BVTRecorder {
 
     return newFakeParams;
   }
+
+  async getBrowserState() {
+    try {
+      const state = await this.browserEmitter?.getState();
+      this.sendEvent(this.events.browserStateSync, state);
+    } catch (error) {
+      this.logger.error("Error getting browser state:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error getting browser state",
+        code: "GET_STATE_ERROR",
+      });
+    }
+  }
+
+  async createTab({ url }) {
+    try {
+      await this.browserEmitter?.createTab(url);
+    } catch (error) {
+      this.logger.error("Error creating tab:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error creating tab",
+        code: "CREATE_TAB_ERROR",
+      });
+    }
+  }
+
+  async closeTab({ pageId }) {
+    try {
+      await this.browserEmitter?.closeTab(pageId);
+    } catch (error) {
+      this.logger.error("Error closing tab:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error closing tab",
+        code: "CLOSE_TAB_ERROR",
+      });
+    }
+  }
+
+  async selectTab({ pageId }) {
+    try {
+      await this.browserEmitter?.selectTab(pageId);
+    } catch (error) {
+      this.logger.error("Error selecting tab:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error selecting tab",
+        code: "SELECT_TAB_ERROR",
+      });
+    }
+  }
 }

package/bin/client/recorderv3/services.js

@@ -3,7 +3,6 @@ import { getRunsServiceBaseURL } from "../utils/index.js";
 import { axiosClient } from "../utils/axiosClient.js";
 import path from "path";
 import { EventEmitter } from "events";
-import socketLogger from "../utils/socket_logger.js";
 export class NamesService {
     screenshotMap;
     TOKEN;
@@ -157,46 +156,191 @@ export class NamesService {
 }
 export class RemoteBrowserService extends EventEmitter {
     CDP_CONNECT_URL;
-    _selectedPage;
-    logger = socketLogger;
-    constructor({ CDP_CONNECT_URL, currentPage }) {
+    context;
+    pages = new Map();
+    _selectedPageId = null;
+    constructor({ CDP_CONNECT_URL, context }) {
         super();
         this.CDP_CONNECT_URL = CDP_CONNECT_URL;
-        this._selectedPage = currentPage;
-        this.emitSelectedPageId();
+        this.context = context;
+        this.initializeListeners();
     }
-    async emitSelectedPageId() {
-        let id = null;
+    async initializeListeners() {
+        // Listen for new pages
+        this.context.on("page", async (page) => {
+            console.log("New page detected");
+            const id = await this.getPageId(page);
+            if (id) {
+                this.pages.set(id, page);
+                console.log(`Page added: ${id}`);
+                await this.syncState();
+            }
+            // Listen for page updates
+            page.on("load", async () => {
+                console.log("Page loaded");
+                await this.syncState();
+            });
+            page.on("close", async () => {
+                console.log(`Page closed: ${id}`);
+                if (id) {
+                    this.pages.delete(id);
+                    if (this._selectedPageId === id) {
+                        // Select first available page
+                        const firstPage = Array.from(this.pages.keys())[0];
+                        this._selectedPageId = firstPage || null;
+                    }
+                    await this.syncState();
+                }
+            });
+        });
+        // Initialize with existing pages
+        const existingPages = this.context.pages();
+        console.log(`Initializing with ${existingPages.length} existing pages`);
+        for (const page of existingPages) {
+            const id = await this.getPageId(page);
+            if (id) {
+                this.pages.set(id, page);
+                console.log(`Existing page registered: ${id}`);
+            }
+        }
+        // Set initial selected page
+        if (this.pages.size > 0 && !this._selectedPageId) {
+            this._selectedPageId = Array.from(this.pages.keys())[0];
+        }
+        await this.syncState();
+    }
+    async getPageId(page) {
         try {
             const debugData = await this.getDebugURLs();
+            const pageUrl = page.url();
             for (const pageData of debugData) {
-                if (pageData.type === "page" && pageData.url === this._selectedPage.url()) {
-                    id = pageData.id;
-                    break;
+                if (pageData.type === "page" && pageData.url === pageUrl) {
+                    return pageData.id;
+                }
+            }
+            // If exact match fails, try to find by comparing URLs without protocol/www
+            const normalizeUrl = (url) => {
+                try {
+                    const u = new URL(url);
+                    return u.hostname.replace(/^www\./, "") + u.pathname + u.search;
+                }
+                catch {
+                    return url;
+                }
+            };
+            const normalizedPageUrl = normalizeUrl(pageUrl);
+            for (const pageData of debugData) {
+                if (pageData.type === "page" && normalizeUrl(pageData.url) === normalizedPageUrl) {
+                    return pageData.id;
                 }
             }
-            this.emit("debugURLChange", id);
+            return null;
         }
         catch (error) {
-            this.logger.error("Error fetching debug URLs: ", error instanceof Error ? error : { message: JSON.stringify(error) });
+            console.error("Error getting page ID:", error);
+            return null;
         }
     }
-    set selectedPage(page) {
-        this._selectedPage = page;
-        this.emitSelectedPageId();
-    }
-    get selectedPage() {
-        return this._selectedPage;
-    }
     async getDebugURLs() {
         const url = `${this.CDP_CONNECT_URL}/json`;
-        const response = await axiosClient({
-            url,
-            method: "GET",
-        });
-        if (response.status !== 200) {
+        const response = await fetch(url);
+        if (!response.ok) {
             throw new Error("Error while fetching debug URL");
         }
-        return response.data;
+        return response.json();
+    }
+    async syncState() {
+        try {
+            const state = await this.getState();
+            console.log(`Syncing state: ${state.pages.length} pages, selected: ${state.selectedPageId}`);
+            this.emit("BrowserService.stateSync", state);
+        }
+        catch (error) {
+            console.error("Error syncing state:", error);
+        }
+    }
+    async getState() {
+        const debugData = await this.getDebugURLs();
+        const pagesData = [];
+        for (const [id, page] of this.pages.entries()) {
+            const debugInfo = debugData.find((d) => d.id === id);
+            if (debugInfo) {
+                try {
+                    pagesData.push({
+                        id,
+                        title: await page.title(),
+                        url: page.url(),
+                        wsDebuggerUrl: debugInfo.webSocketDebuggerUrl || "",
+                    });
+                }
+                catch (error) {
+                    console.error(`Error getting data for page ${id}:`, error);
+                }
+            }
+        }
+        return {
+            pages: pagesData,
+            selectedPageId: this._selectedPageId,
+        };
+    }
+    async createTab(url = "about:blank") {
+        try {
+            console.log(`Creating tab: ${url}`);
+            const page = await this.context.newPage();
+            if (typeof url === "string" && url !== "about:blank") {
+                await page.goto(url, { waitUntil: "domcontentloaded" });
+            }
+            // Wait a bit for the page to be registered in CDP
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            const id = await this.getPageId(page);
+            if (id) {
+                this.pages.set(id, page);
+                this._selectedPageId = id;
+                console.log(`Tab created successfully: ${id}`);
+            }
+            await this.syncState();
+        }
+        catch (error) {
+            console.error("Error creating tab:", error);
+            throw error;
+        }
+    }
+    async closeTab(pageId) {
+        try {
+            console.log(`Closing tab: ${pageId}`);
+            const page = this.pages.get(pageId);
+            if (page) {
+                await page.close();
+                // The close event handler will handle cleanup and sync
+            }
+            else {
+                console.warn(`Page ${pageId} not found`);
+            }
+        }
+        catch (error) {
+            console.error("Error closing tab:", error);
+            throw error;
+        }
+    }
+    async selectTab(pageId) {
+        try {
+            console.log(`Selecting tab: ${pageId}`);
+            const page = this.pages.get(pageId);
+            if (page) {
+                this._selectedPageId = pageId;
+                await page.bringToFront();
+                await this.syncState();
+            }
+            else {
+                console.warn(`Page ${pageId} not found`);
+            }
+        }
+        catch (error) {
+            console.error("Error selecting tab:", error);
+            throw error;
+        }
+    }
+    getSelectedPage() {
+        return this._selectedPageId ? this.pages.get(this._selectedPageId) || null : null;
     }
 }

package/package.json

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