use js click instead of playwright (#683)

* use js click

* rm unused imports

* rm newline

* changeset

* radio button eval

* checkboxes eval

* rm comment

Author: seanmcguire12

Diff for: .changeset/green-signs-live.md

@@ -0,0 +1,5 @@
+---
+"@browserbasehq/stagehand": patch
+---
+
+use javsacript click instead of playwright

Diff for: evals/evals.config.json

@@ -317,6 +317,14 @@
     {
       "name": "extract_single_link",
       "categories": ["extract"]
+    },
+    {
+      "name": "radio_btn",
+      "categories": ["act"]
+    },
+    {
+      "name": "checkboxes",
+      "categories": ["act"]
     }
   ]
 }

Diff for: evals/tasks/checkboxes.ts

@@ -0,0 +1,37 @@
+import { EvalFunction } from "@/types/evals";
+
+export const checkboxes: EvalFunction = async ({
+  debugUrl,
+  sessionUrl,
+  stagehand,
+  logger,
+}) => {
+  await stagehand.page.goto(
+    "https://browserbase.github.io/stagehand-eval-sites/sites/checkboxes/",
+  );
+
+  await stagehand.page.act({
+    action: "click the 'baseball' option",
+  });
+
+  await stagehand.page.act({
+    action: "click the 'netball' option",
+  });
+
+  const baseballChecked = await stagehand.page
+    .locator('input[type="checkbox"][name="sports"][value="baseball"]')
+    .isChecked();
+
+  const netballChecked = await stagehand.page
+    .locator('input[type="checkbox"][name="sports"][value="netball"]')
+    .isChecked();
+
+  await stagehand.close();
+
+  return {
+    _success: baseballChecked && netballChecked,
+    debugUrl,
+    sessionUrl,
+    logs: logger.getLogs(),
+  };
+};

Diff for: evals/tasks/radio_btn.ts

@@ -0,0 +1,30 @@
+import { EvalFunction } from "@/types/evals";
+
+export const radio_btn: EvalFunction = async ({
+  debugUrl,
+  sessionUrl,
+  stagehand,
+  logger,
+}) => {
+  await stagehand.page.goto(
+    "https://browserbase.github.io/stagehand-eval-sites/sites/paneer-pizza/",
+  );
+
+  await stagehand.page.act({
+    action: "click the 'medium' option",
+  });
+
+  // confirm that the Medium radio is now checked
+  const radioBtnClicked = await stagehand.page
+    .locator('input[type="radio"][name="Pizza"][value="Medium"]')
+    .isChecked();
+
+  await stagehand.close();
+
+  return {
+    _success: radioBtnClicked,
+    debugUrl,
+    sessionUrl,
+    logs: logger.getLogs(),
+  };
+};

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

@@ -1,9 +1,10 @@
-import { Page, Locator, errors as PlaywrightErrors } from "@playwright/test";
+import { Page, Locator } from "@playwright/test";
 import { PlaywrightCommandException } from "../../../types/playwright";
 import { StagehandPage } from "../../StagehandPage";
 import { getNodeFromXpath } from "@/lib/dom/utils";
 import { Logger } from "../../../types/log";
 import { MethodHandlerContext } from "@/types/act";
+import { StagehandClickError } from "@/types/stagehandErrors";
 
 /**
  * A mapping of playwright methods that may be chosen by the LLM to their
@@ -343,83 +344,9 @@ export async function clickElement(ctx: MethodHandlerContext) {
   });
 
   try {
-    // If it's a radio input, try to click its label
-    const isRadio = await locator.evaluate((el) => {
-      return el instanceof HTMLInputElement && el.type === "radio";
+    await locator.evaluate((el) => {
+      (el as HTMLElement).click();
     });
-
-    // 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,
-      );
-      let labelLocator = null;
-
-      if (inputId) {
-        labelLocator = stagehandPage.page.locator(`label[for="${inputId}"]`);
-      }
-      if (!labelLocator || (await labelLocator.count()) < 1) {
-        // Check ancestor <label>
-        labelLocator = stagehandPage.page
-          .locator(`xpath=${xpath}/ancestor::label`)
-          .first();
-      }
-      if ((await labelLocator.count()) < 1) {
-        // Check sibling <label>
-        labelLocator = locator
-          .locator("xpath=following-sibling::label")
-          .first();
-        if ((await labelLocator.count()) < 1) {
-          labelLocator = locator
-            .locator("xpath=preceding-sibling::label")
-            .first();
-        }
-      }
-
-      if ((await labelLocator.count()) > 0) {
-        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 {
-        // Non-timeout error on the first click
-        throw new PlaywrightCommandException(
-          `Failed to click element at [${xpath}]. ` + `Error: ${error.message}`,
-        );
-      }
-    }
   } catch (e) {
     logger({
       category: "action",
@@ -433,10 +360,7 @@ export async function clickElement(ctx: MethodHandlerContext) {
         args: { value: JSON.stringify(args), type: "object" },
       },
     });
-
-    throw new PlaywrightCommandException(
-      `Could not complete click action at [${xpath}]. Reason: ${e.message}`,
-    );
+    throw new StagehandClickError(xpath, e.message);
   }
 
   await handlePossiblePageNavigation(

Diff for: types/stagehandErrors.ts

@@ -147,3 +147,11 @@ export class StagehandDomProcessError extends StagehandError {
     super(`Error Processing Dom: ${message}`);
   }
 }
+
+export class StagehandClickError extends StagehandError {
+  constructor(message: string, selector: string) {
+    super(
+      `Error Clicking Element with selector: ${selector} Reason: ${message}`,
+    );
+  }
+}