Fix: playwright scrolling element into view (#654)

* attempt force click on timeout

* add eval

* changeset

* better error messages

* update based on new eval structure

---------

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

Author: seanmcguire12

Diff for: .changeset/plenty-corners-bake.md

@@ -0,0 +1,5 @@
+---
+"@browserbasehq/stagehand": patch
+---
+
+fix repeated up & down scrolling bug for clicks inside `act`

Diff for: evals/evals.config.json

@@ -305,6 +305,10 @@
     {
       "name": "prevChunk",
       "categories": ["regression", "act"]
+    },
+    {
+      "name": "google_flights",
+      "categories": ["act"]
     }
   ]
 }

Diff for: evals/tasks/google_flights.ts

@@ -0,0 +1,55 @@
+import { EvalFunction } from "@/types/evals";
+import { ObserveResult } from "@/types/stagehand";
+
+/**
+ * This eval attempts to click on an element that should not pass the playwright actionability check
+ * which happens by default if you call locator.click (more information here:
+ * https://playwright.dev/docs/actionability)
+ *
+ * If this eval passes, it means that we have correctly set {force: true} in performPlaywrightMethod,
+ * and the click was successful even though the target element (found by the xpath) did not
+ * pass the actionability check.
+ */
+
+export const google_flights: EvalFunction = async ({
+  debugUrl,
+  sessionUrl,
+  stagehand,
+  logger,
+}) => {
+  await stagehand.page.goto(
+    "https://browserbase.github.io/stagehand-eval-sites/sites/google-flights/",
+  );
+
+  const observeResult: ObserveResult = {
+    selector:
+      "xpath=/html/body/c-wiz[2]/div/div[2]/c-wiz/div[1]/c-wiz/div[2]/div[2]/div[2]/div/div[2]/div[1]/ul/li[1]/div/div[1]",
+    description: "the first departing flight",
+    method: "click",
+    arguments: [],
+  };
+  await stagehand.page.act(observeResult);
+
+  const expectedUrl =
+    "https://browserbase.github.io/stagehand-eval-sites/sites/google-flights/return-flight.html";
+  const currentUrl = stagehand.page.url();
+
+  await stagehand.close();
+
+  if (currentUrl === expectedUrl) {
+    return {
+      _success: true,
+      currentUrl,
+      debugUrl,
+      sessionUrl,
+      logs: logger.getLogs(),
+    };
+  }
+  return {
+    _success: false,
+    error: "The current URL does not match expected.",
+    logs: logger.getLogs(),
+    debugUrl,
+    sessionUrl,
+  };
+};

Diff for: lib/handlers/handlerUtils/actHandlerUtils.ts

@@ -1,4 +1,4 @@
-import { Page, Locator } from "@playwright/test";
+import { Page, Locator, errors as PlaywrightErrors } from "@playwright/test";
 import { PlaywrightCommandException } from "../../../types/playwright";
 import { StagehandPage } from "../../StagehandPage";
 import { getNodeFromXpath } from "@/lib/dom/utils";
@@ -348,8 +348,11 @@ export async function clickElement(ctx: MethodHandlerContext) {
       return el instanceof HTMLInputElement && el.type === "radio";
     });
 
-    const clickArg = args.length ? args[0] : undefined;
+    // Extract the click options (if any) from args[0]
+    const clickArg = (args[0] ?? {}) as Record<string, unknown>;
 
+    // Decide which locator we actually want to click (for radio inputs, prefer label if present)
+    let finalLocator = locator;
     if (isRadio) {
       const inputId = await locator.evaluate(
         (el) => (el as HTMLInputElement).id,
@@ -378,12 +381,44 @@ export async function clickElement(ctx: MethodHandlerContext) {
       }
 
       if ((await labelLocator.count()) > 0) {
-        await labelLocator.click(clickArg);
+        finalLocator = labelLocator;
+      }
+    }
+
+    // Try clicking with a short (5s) timeout
+    try {
+      await finalLocator.click({
+        ...clickArg,
+        timeout: 5000,
+      });
+    } catch (error) {
+      // If it's a TimeoutError, retry with force: true
+      if (error instanceof PlaywrightErrors.TimeoutError) {
+        logger({
+          category: "action",
+          message: "First click attempt timed out, retrying with force...",
+          level: 2,
+        });
+        try {
+          await finalLocator.click({
+            ...clickArg,
+            force: true,
+          });
+        } catch (forceError) {
+          // If forced click also fails, throw a more descriptive error
+          throw new PlaywrightCommandException(
+            `Failed to click element at [${xpath}]. ` +
+              `Timeout after 5s, then force-click also failed. ` +
+              `Original timeout error: ${error.message}, ` +
+              `Force-click error: ${forceError.message}`,
+          );
+        }
       } else {
-        await locator.click(clickArg);
+        // Non-timeout error on the first click
+        throw new PlaywrightCommandException(
+          `Failed to click element at [${xpath}]. ` + `Error: ${error.message}`,
+        );
       }
-    } else {
-      await locator.click(clickArg);
     }
   } catch (e) {
     logger({
@@ -398,7 +433,10 @@ export async function clickElement(ctx: MethodHandlerContext) {
         args: { value: JSON.stringify(args), type: "object" },
       },
     });
-    throw new PlaywrightCommandException(e.message);
+
+    throw new PlaywrightCommandException(
+      `Could not complete click action at [${xpath}]. Reason: ${e.message}`,
+    );
   }
 
   await handlePossiblePageNavigation(