Override screenshot logic (#589)

* added screenshot proxy override with CDP

* changeset

* Update .changeset/free-pots-move.md

Co-authored-by: Anirudh Kamath <[email protected]>

---------

Co-authored-by: Anirudh Kamath <[email protected]>

Author: miguelg719

Diff for: .changeset/free-pots-move.md

@@ -0,0 +1,5 @@
+---
+"@browserbasehq/stagehand": patch
+---
+
+Added CDP support for screenshots, find more about the benefits here: https://docs.browserbase.com/features/screenshots#why-use-cdp-for-screenshots%3F

Diff for: lib/StagehandPage.ts

@@ -251,6 +251,41 @@ export class StagehandPage {
           };
         }
 
+        // Handle screenshots with CDP
+        if (prop === "screenshot") {
+          return async (
+            options: {
+              type?: "png" | "jpeg";
+              quality?: number;
+              fullPage?: boolean;
+              clip?: { x: number; y: number; width: number; height: number };
+              omitBackground?: boolean;
+            } = {},
+          ) => {
+            const cdpOptions: Record<string, unknown> = {
+              format: options.type === "jpeg" ? "jpeg" : "png",
+              quality: options.quality,
+              clip: options.clip,
+              omitBackground: options.omitBackground,
+              fromSurface: true,
+            };
+
+            if (options.fullPage) {
+              cdpOptions.captureBeyondViewport = true;
+            }
+
+            const data = await this.sendCDP<{ data: string }>(
+              "Page.captureScreenshot",
+              cdpOptions,
+            );
+
+            // Convert base64 to buffer
+            const buffer = Buffer.from(data.data, "base64");
+
+            return buffer;
+          };
+        }
+
         // Handle goto specially
         if (prop === "goto") {
           return async (url: string, options: GotoOptions) => {

Diff for: stagehand.config.ts

@@ -10,7 +10,7 @@ const StagehandConfig: ConstructorParams = {
       : "LOCAL",
   apiKey: process.env.BROWSERBASE_API_KEY /* API key for authentication */,
   projectId: process.env.BROWSERBASE_PROJECT_ID /* Project identifier */,
-  debugDom: true /* Enable DOM debugging features */,
+  debugDom: false /* Enable DOM debugging features */,
   headless: false /* Run browser in headless mode */,
   logger: (message: LogLine) =>
     console.log(logLineToString(message)) /* Custom logging function */,