prevent crashing on shadow DOM elements (#857)

# why
- when the LLM returns an ID, we look up that ID in our ID->xpath
mapping. If that element does not exist, it returns undefined.
downstream, we attempt to run some regex on the xpath
- when running the regex on the undefined xpath, we get the following
error:
`TypeError: Cannot read properties of undefined (reading 'replace')`
- the actual fix for this is to add support for taking actions on
elements within the shadow dom
- for now, we should have better error handling for this case
# what changed
- added a check in the `ObserveHandler` to check if the returned ID
contains `-`, which indicates that it will be present in our `idToXpath`
mapping
- if it does not contain `-`, then we log an error, and return
`"not-supported"` as the selector, and `"an element inside a shadow
DOM"` as the description
# test plan
- added an eval to ensure that we are returning `"not-supported"` as the
selector, and `"an element inside a shadow DOM"` for elements that exist
inside the shadow dom

---------

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

Author: miguelg719

.changeset/evil-snakes-juggle.md

@@ -0,0 +1,5 @@
+---
+"@browserbasehq/stagehand": patch
+---
+
+return "not-supported" for elements inside the shadow-dom

evals/evals.config.json

@@ -366,6 +366,10 @@
     {
       "name": "no_js_click",
       "categories": ["act", "regression"]
+    },
+    {
+      "name": "shadow_dom",
+      "categories": ["act"]
     }
   ]
 }

evals/tasks/shadow_dom.ts

@@ -0,0 +1,41 @@
+import { EvalFunction } from "@/types/evals";
+
+export const shadow_dom: EvalFunction = async ({
+  debugUrl,
+  sessionUrl,
+  stagehand,
+  logger,
+}) => {
+  const page = stagehand.page;
+  try {
+    await page.goto(
+      "https://browserbase.github.io/stagehand-eval-sites/sites/shadow-dom/",
+    );
+    const result = await page.act("click the button");
+
+    if (!result.success && result.message.includes("not-supported")) {
+      return {
+        _success: true,
+        debugUrl,
+        sessionUrl,
+        logs: logger.getLogs(),
+      };
+    }
+    return {
+      _success: false,
+      debugUrl,
+      sessionUrl,
+      logs: logger.getLogs(),
+    };
+  } catch (error) {
+    return {
+      _success: false,
+      message: `error: ${error.message}`,
+      debugUrl,
+      sessionUrl,
+      logs: logger.getLogs(),
+    };
+  } finally {
+    await stagehand.close();
+  }
+};

lib/handlers/observeHandler.ts

@@ -168,25 +168,39 @@ export class StagehandObserveHandler {
           },
         });
 
-        const lookUpIndex = elementId as EncodedId;
-        const xpath = combinedXpathMap[lookUpIndex];
-
-        const trimmedXpath = trimTrailingTextNode(xpath);
-
-        if (!trimmedXpath || trimmedXpath === "") {
+        if (elementId.includes("-")) {
+          const lookUpIndex = elementId as EncodedId;
+          const xpath = combinedXpathMap[lookUpIndex];
+
+          const trimmedXpath = trimTrailingTextNode(xpath);
+
+          if (!trimmedXpath || trimmedXpath === "") {
+            this.logger({
+              category: "observation",
+              message: `Empty xpath returned for element: ${elementId}`,
+              level: 1,
+            });
+          }
+
+          return {
+            ...rest,
+            selector: `xpath=${trimmedXpath}`,
+            // Provisioning or future use if we want to use direct CDP
+            // backendNodeId: elementId,
+          };
+        } else {
           this.logger({
             category: "observation",
-            message: `Empty xpath returned for element: ${elementId}`,
-            level: 1,
+            message: `Element is inside a shadow DOM: ${elementId}`,
+            level: 0,
           });
+          return {
+            description: "an element inside a shadow DOM",
+            method: "not-supported",
+            arguments: [] as string[],
+            selector: "not-supported",
+          };
         }
-
-        return {
-          ...rest,
-          selector: `xpath=${trimmedXpath}`,
-          // Provisioning or future use if we want to use direct CDP
-          // backendNodeId: elementId,
-        };
       }),
     );