Add default timeout to waitForSettledDom

README.md

@@ -34,7 +34,7 @@
 - [Acknowledgements](#acknowledgements)
 - [License](#license)
 
-> [!NOTE] 
+> [!NOTE]
 > `Stagehand` is currently available as an early release, and we're actively seeking feedback from the community. Please join our [Slack community](https://join.slack.com/t/stagehand-dev/shared_invite/zt-2tdncfgkk-fF8y5U0uJzR2y2_M9c9OJA) to stay updated on the latest developments and provide feedback.
 
 ## Intro
@@ -133,6 +133,7 @@ This constructor is used to create an instance of Stagehand.
     - `1`: SDK-level logging
     - `2`: LLM-client level logging (most granular)
   - `debugDom`: a `boolean` that draws bounding boxes around elements presented to the LLM during automation.
+  - `domSettleTimeoutMs`: an `integer` that specifies the timeout in milliseconds for waiting for the DOM to settle. Defaults to 30000 (30 seconds).
 
 - **Returns:**
 
@@ -212,7 +213,7 @@ This constructor is used to create an instance of Stagehand.
 
 #### `observe()`
 
-> [!NOTE] 
+> [!NOTE]
 > `observe()` currently only evaluates the first chunk in the page.
 
 `observe()` is used to get a list of actions that can be taken on the current page. It's useful for adding context to your planning step, or if you unsure of what page you're on.

lib/index.ts

@@ -182,6 +182,7 @@ export class Stagehand {
     category?: string;
     message: string;
   }) => void;
+  private domSettleTimeoutMs: number;
 
   constructor(
     {
@@ -191,6 +192,7 @@ export class Stagehand {
       llmProvider,
       headless = false,
       logger,
+      domSettleTimeoutMs = 60000,
     }: {
       env: "LOCAL" | "BROWSERBASE";
       verbose?: 0 | 1 | 2;
@@ -202,6 +204,7 @@ export class Stagehand {
         message: string;
         level?: 0 | 1 | 2;
       }) => void;
+      domSettleTimeoutMs?: number;
     } = {
       env: "BROWSERBASE",
     },
@@ -216,6 +219,7 @@ export class Stagehand {
     this.debugDom = debugDom;
     this.defaultModelName = "gpt-4o";
     this.headless = headless;
+    this.domSettleTimeoutMs = domSettleTimeoutMs;
   }
 
   async init({
@@ -357,25 +361,45 @@ export class Stagehand {
     }
   }
 
-  private async _waitForSettledDom() {
+  private async _waitForSettledDom(timeoutMs?: number) {
     try {
-      await this.page.waitForSelector("body");
-      await this.page.waitForLoadState("domcontentloaded");
+      const timeout = timeoutMs ?? this.domSettleTimeoutMs;
+      const timeoutPromise = new Promise<void>((resolve) => {
+        setTimeout(() => {
+          console.warn(
+            `[stagehand:dom] DOM settle timeout of ${timeout}ms exceeded, continuing anyway`,
+          );
+          this.log({
+            category: "dom",
+            message: `DOM settle timeout of ${timeout}ms exceeded, continuing anyway`,
+            level: 1,
+          });
+          resolve();
+        }, timeout);
+      });
 
-      await this.page.evaluate(() => {
-        return new Promise<void>((resolve) => {
-          if (typeof window.waitForDomSettle === "function") {
-            window.waitForDomSettle().then(() => {
-              resolve();
+      await Promise.race([
+        (async () => {
+          await this.page.waitForSelector("body");
+          await this.page.waitForLoadState("domcontentloaded");
+
+          await this.page.evaluate(() => {
+            return new Promise<void>((resolve) => {
+              if (typeof window.waitForDomSettle === "function") {
+                window.waitForDomSettle().then(() => {
+                  resolve();
+                });
+              } else {
+                console.warn(
+                  "waitForDomSettle is not defined, considering DOM as settled",
+                );
+                resolve();
+              }
             });
-          } else {
-            console.warn(
-              "waitForDomSettle is not defined, considering DOM as settled",
-            );
-            resolve();
-          }
-        });
-      });
+          });
+        })(),
+        timeoutPromise,
+      ]);
     } catch (e) {
       this.log({
         category: "dom",