dont automatically close tabs (#844)

# why
- when a new tab is opened, we call `page.goto()` with the URL of the
new tab, and immediately close the old tab
- this is problematic, because on some websites you are required to keep
the old tab open in order to continue browsing in the new tab
- this PR removes that behaviour: we no longer close tabs implicitly
# what changed
- added a live page proxy in `index.ts` which always points to the
`focused` page/tab
- added a listener in `StagehandContext.ts` which listens for new pages,
and initializes them as Stagehand pages
- this means that you can call act/extract/observe on all open pages,
even if they are not the focused page
- preserved expected behaviour when users define `const page =
stagehand.page` and then use `page` throughout their code, they expect
`page` to always point to the "focused" page
# test plan
- added two new `act` evals that open & close tabs
- run `act`, `regression` and `combination` evals

---------

Co-authored-by: miguel <[email protected]>
Co-authored-by: Miguel <[email protected]>

Author: seanmcguire12

.changeset/little-hornets-tan.md

@@ -0,0 +1,5 @@
+---
+"@browserbasehq/stagehand": patch
+---
+
+don't automatically close tabs

evals/deterministic/tests/BrowserContext/multiPage.test.ts

@@ -189,21 +189,14 @@ test.describe("StagehandContext - Multi-page Support", () => {
    * Test active page tracking
    */
   test("should update stagehand.page when creating new pages", async () => {
-    const initialPage = stagehand.page;
+    const initialTitle = await stagehand.page.title(); // "about:blank" → ""
 
-    // Create a new page and verify it becomes active
+    // Create a new page
     const newPage = await stagehand.context.newPage();
-    expect(stagehand.page).toBe(newPage);
-    expect(stagehand.page).not.toBe(initialPage);
-
-    // Navigate and verify it's still the active page
     await newPage.goto(`http://localhost:${serverPort}/page1`);
-    expect(stagehand.page).toBe(newPage);
-    expect(await stagehand.page.title()).toBe("Page 1");
 
-    // Create another page and verify it becomes active
-    const anotherPage = await stagehand.context.newPage();
-    expect(stagehand.page).toBe(anotherPage);
-    expect(stagehand.page).not.toBe(newPage);
+    // The proxy should now forward to the new page:
+    expect(await stagehand.page.title()).toBe("Page 1");
+    expect(await stagehand.page.title()).not.toBe(initialTitle);
   });
 });

evals/evals.config.json

@@ -367,6 +367,18 @@
       "name": "no_js_click",
       "categories": ["act", "regression"]
     },
+    {
+      "name": "tab_handling",
+      "categories": ["act"]
+    },
+    {
+      "name": "agent/kayak",
+      "categories": ["agent"]
+    },
+    {
+      "name": "multi_tab",
+      "categories": ["act"]
+    },
     {
       "name": "shadow_dom",
       "categories": ["act"]

evals/evaluator.ts

@@ -34,9 +34,9 @@ export class Evaluator {
     modelClientOptions?: ClientOptions,
   ) {
     this.stagehand = stagehand;
-    this.modelName = modelName || "gemini-2.0-flash";
+    this.modelName = modelName || "google/gemini-2.0-flash";
     this.modelClientOptions = modelClientOptions || {
-      apiKey: process.env.GOOGLE_API_KEY || "",
+      apiKey: process.env.GOOGLE_GENERATIVE_AI_API_KEY || "",
     };
   }
 

evals/tasks/agent/kayak.ts

@@ -0,0 +1,70 @@
+import { EvalFunction } from "@/types/evals";
+import { Evaluator } from "@/evals/evaluator";
+
+export const kayak: EvalFunction = async ({
+  debugUrl,
+  sessionUrl,
+  stagehand,
+  logger,
+}) => {
+  try {
+    const evaluator = new Evaluator(stagehand);
+    await stagehand.page.goto("https://www.kayak.com");
+    const agent = stagehand.agent({
+      provider: "openai",
+      model: "computer-use-preview",
+      instructions: `You are a helpful assistant that can help me find flights. DON'T ASK FOLLOW UP QUESTIONS UNTIL YOU HAVE FULFILLED THE USER'S REQUEST. Today is ${new Date().toLocaleDateString()}.`,
+      options: {
+        apiKey: process.env.OPENAI_API_KEY,
+      },
+    });
+    await agent.execute({
+      instruction: "Find flights from San Francisco to Tokyo next week",
+      maxSteps: 15,
+    });
+    await agent.execute({
+      instruction: "Sort the flights by price",
+      maxSteps: 5,
+    });
+
+    if (stagehand.context.pages().length !== 2) {
+      return {
+        _success: false,
+        message: "No new pages were opened",
+        debugUrl,
+        sessionUrl,
+        logs: logger.getLogs(),
+      };
+    }
+    const { evaluation, reasoning } = await evaluator.evaluate({
+      question: "Are the flights shown sorted by price?",
+    });
+
+    const success = evaluation === "YES";
+    if (!success) {
+      return {
+        _success: false,
+        message: reasoning,
+        debugUrl,
+        sessionUrl,
+        logs: logger.getLogs(),
+      };
+    }
+    return {
+      _success: true,
+      debugUrl,
+      sessionUrl,
+      logs: logger.getLogs(),
+    };
+  } catch (error) {
+    return {
+      _success: false,
+      message: error.message,
+      debugUrl,
+      sessionUrl,
+      logs: logger.getLogs(),
+    };
+  } finally {
+    stagehand.close();
+  }
+};

evals/tasks/multi_tab.ts

@@ -0,0 +1,92 @@
+import { EvalFunction } from "@/types/evals";
+
+export const multi_tab: EvalFunction = async ({
+  debugUrl,
+  sessionUrl,
+  stagehand,
+  logger,
+}) => {
+  try {
+    const stagehandPage = stagehand.page;
+    await stagehandPage.goto(
+      "https://browserbase.github.io/stagehand-eval-sites/sites/five-tab/",
+    );
+
+    await stagehandPage.act({
+      action: "click the button to open the other page",
+    });
+    await stagehandPage.act({
+      action: "click the button to open the other page",
+    });
+    await stagehandPage.act({
+      action: "click the button to open the other page",
+    });
+    await stagehandPage.act({
+      action: "click the button to open the other page",
+    });
+
+    let currentPageUrl = stagehandPage.url();
+    let expectedUrl =
+      "https://browserbase.github.io/stagehand-eval-sites/sites/five-tab/page5.html";
+
+    if (currentPageUrl !== expectedUrl) {
+      return {
+        _success: false,
+        message: "expected URL does not match current URL",
+        debugUrl,
+        sessionUrl,
+        logs: logger.getLogs(),
+      };
+    }
+
+    // try acting on the first page again
+    const pages = stagehand.context.pages();
+    const page1 = pages[0];
+    await page1.act({
+      action: "click the button to open the other page",
+    });
+
+    // stagehandPage.url() should point to the URL of the active page
+    currentPageUrl = stagehandPage.url();
+    expectedUrl =
+      "https://browserbase.github.io/stagehand-eval-sites/sites/five-tab/page2.html";
+    if (currentPageUrl !== expectedUrl) {
+      return {
+        _success: false,
+        message: "expected URL does not match current URL",
+        debugUrl,
+        sessionUrl,
+        logs: logger.getLogs(),
+      };
+    }
+
+    const page2text = await stagehandPage.extract();
+    const expectedPage2text = "You've made it to page 2";
+
+    if (page2text.page_text.includes(expectedPage2text)) {
+      return {
+        _success: true,
+        debugUrl,
+        sessionUrl,
+        logs: logger.getLogs(),
+      };
+    }
+    return {
+      _success: false,
+      message: `extracted page text: ${page2text.page_text} does not match expected page text: ${expectedPage2text}`,
+      debugUrl,
+      sessionUrl,
+      logs: logger.getLogs(),
+    };
+  } catch (error) {
+    return {
+      _success: false,
+      message: error.message,
+      debugUrl,
+      sessionUrl,
+      logs: logger.getLogs(),
+    };
+  } finally {
+    await stagehand.close();
+  }
+};

evals/tasks/tab_handling.ts

@@ -0,0 +1,49 @@
+import { EvalFunction } from "@/types/evals";
+
+export const tab_handling: EvalFunction = async ({
+  debugUrl,
+  sessionUrl,
+  stagehand,
+  logger,
+}) => {
+  try {
+    await stagehand.page.goto(
+      "https://browserbase.github.io/stagehand-eval-sites/sites/new-tab/",
+    );
+
+    await stagehand.page.act({
+      action: "click the button to open the other page",
+    });
+
+    const pages = stagehand.context.pages();
+    const page1 = pages[0];
+    const page2 = pages[1];
+
+    // extract all the text from the first page
+    const extraction1 = await page1.extract();
+    // extract all the text from the second page
+    const extraction2 = await page2.extract();
+
+    const extraction1Success = extraction1.page_text.includes("Welcome!");
+    const extraction2Success = extraction2.page_text.includes(
+      "You’re on the other page",
+    );
+
+    return {
+      _success: extraction1Success && extraction2Success,
+      debugUrl,
+      sessionUrl,
+      logs: logger.getLogs(),
+    };
+  } catch (error) {
+    return {
+      _success: false,
+      message: error.message,
+      debugUrl,
+      sessionUrl,
+      logs: logger.getLogs(),
+    };
+  } finally {
+    await stagehand.close();
+  }
+};

lib/StagehandContext.ts

@@ -89,6 +89,16 @@ export class StagehandContext {
       }
     }
 
+    context.on("page", (pwPage) => {
+      instance.handleNewPlaywrightPage(pwPage).catch((err) =>
+        stagehand.logger({
+          category: "context",
+          message: `Failed to initialise new page: ${err}`,
+          level: 0,
+        }),
+      );
+    });
+
     return instance;
   }
 
@@ -122,4 +132,12 @@ export class StagehandContext {
   public getActivePage(): StagehandPage | null {
     return this.activeStagehandPage;
   }
+
+  private async handleNewPlaywrightPage(pwPage: PlaywrightPage): Promise<void> {
+    let stagehandPage = this.pageMap.get(pwPage);
+    if (!stagehandPage) {
+      stagehandPage = await this.createStagehandPage(pwPage);
+    }
+    this.setActivePage(stagehandPage);
+  }
 }

lib/StagehandPage.ts

@@ -88,11 +88,7 @@ export class StagehandPage {
         const value = target[prop];
         // If the property is a function, wrap it to update active page before execution
         if (typeof value === "function" && prop !== "on") {
-          return (...args: unknown[]) => {
-            // Update active page before executing the method
-            this.intContext.setActivePage(this);
-            return value.apply(target, args);
-          };
+          return (...args: unknown[]) => value.apply(target, args);
         }
         return value;
       },
@@ -287,7 +283,6 @@ ${scriptContent} \
             prop === "$$eval"
           ) {
             return async (...args: unknown[]) => {
-              this.intContext.setActivePage(this);
               // Make sure helpers exist
               await this.ensureStagehandScript();
               return (value as (...a: unknown[]) => unknown).apply(
@@ -316,10 +311,7 @@ ${scriptContent} \
             >;
 
             const method = this[prop as keyof StagehandPage] as EnhancedMethod;
-            return async (options: unknown) => {
-              this.intContext.setActivePage(this);
-              return method.call(this, options);
-            };
+            return (options: unknown) => method.call(this, options);
           }
 
           // Handle screenshots with CDP
@@ -425,10 +417,7 @@ ${scriptContent} \
 
           // For all other method calls, update active page
           if (typeof value === "function") {
-            return (...args: unknown[]) => {
-              this.intContext.setActivePage(this);
-              return value.apply(target, args);
-            };
+            return (...args: unknown[]) => value.apply(target, args);
           }
 
           return value;