fixed new tabs opened for cua models (#616)

* fixed new tabs opened for cua models

* reverted example

* cleaned example, added changeset

* reverting screenshots to playwright

* Update lib/handlers/agentHandler.ts

Co-authored-by: Sean McGuire <[email protected]>

* cdp screenshot for bb env

* add params back

---------

Co-authored-by: Sean McGuire <[email protected]>

Author: miguelg719

Diff for: .changeset/giant-tires-sleep.md

@@ -0,0 +1,5 @@
+---
+"@browserbasehq/stagehand": patch
+---
+
+Fixed new opened tab handling for CUA models

Diff for: examples/cua-example.ts

@@ -27,7 +27,7 @@ async function main() {
 
     const agent = stagehand.agent({
       provider: "openai",
-      model: "computer-use-preview-2025-02-04",
+      model: "computer-use-preview",
       instructions: `You are a helpful assistant that can use a web browser.
       You are currently on the following page: ${page.url()}.
       Do not ask follow up questions, the user will trust your judgement.`,
@@ -40,7 +40,6 @@ async function main() {
     await stagehand.page.goto("https://www.google.com");
     console.log(`${chalk.green("✓")} Loaded: ${chalk.dim(page.url())}`);
 
-    // Execute the agent again with a different instruction
     const firstInstruction =
       "Search for openai news on google and extract the name of the first 3 results";
     console.log(
@@ -62,7 +61,7 @@ async function main() {
     console.log(`${chalk.green("✓")} Loaded: ${chalk.dim(page.url())}`);
 
     const instruction =
-      "Apply for the full-stack engineer position with mock data. Don't submit the form.";
+      "Apply for the first engineer position with mock data. Don't submit the form.";
     console.log(`${chalk.cyan("↳")} Instruction: ${chalk.white(instruction)}`);
 
     const result = await agent.execute({

Diff for: lib/StagehandPage.ts

@@ -261,7 +261,7 @@ export class StagehandPage {
           }
 
           // Handle screenshots with CDP
-          if (prop === "screenshot") {
+          if (prop === "screenshot" && this.stagehand.env === "BROWSERBASE") {
             return async (
               options: {
                 type?: "png" | "jpeg";

Diff for: lib/handlers/agentHandler.ts

@@ -3,6 +3,7 @@ import { AgentProvider } from "../agent/AgentProvider";
 import { StagehandAgent } from "../agent/StagehandAgent";
 import { AgentClient } from "../agent/AgentClient";
 import { LogLine } from "../../types/log";
+import { Page } from "playwright";
 import {
   AgentExecuteOptions,
   AgentAction,
@@ -190,6 +191,28 @@ export class StagehandAgentHandler {
           await this.stagehandPage.page.mouse.click(x as number, y as number, {
             button: button as "left" | "right",
           });
+          const newOpenedTab = await Promise.race([
+            new Promise<Page | null>((resolve) => {
+              this.stagehandPage.context.once("page", (page) => resolve(page));
+              setTimeout(() => resolve(null), 1500);
+            }),
+          ]);
+          if (newOpenedTab) {
+            this.logger({
+              category: "action",
+              message: `New page detected (new tab) with URL. Opening on current page...`,
+              level: 1,
+              auxiliary: {
+                url: {
+                  value: newOpenedTab.url(),
+                  type: "string",
+                },
+              },
+            });
+            await newOpenedTab.close();
+            await this.stagehandPage.page.goto(newOpenedTab.url());
+            await this.stagehandPage.page.waitForURL(newOpenedTab.url());
+          }
           return { success: true };
         }