filter out elements that don't have an associated xpath

.changeset/cold-pumas-accept.md

@@ -0,0 +1,5 @@
+---
+"@browserbasehq/stagehand": patch
+---
+
+remove elements that don't have xpaths from observe response

lib/handlers/observeHandler.ts

@@ -151,58 +151,67 @@ export class StagehandObserveHandler {
       });
     }
 
-    const elementsWithSelectors = await Promise.all(
-      observationResponse.elements.map(async (element) => {
-        const { elementId, ...rest } = element;
-
-        // Generate xpath for the given element if not found in selectorMap
-        this.logger({
-          category: "observation",
-          message: "Getting xpath for element",
-          level: 1,
-          auxiliary: {
-            elementId: {
-              value: elementId.toString(),
-              type: "string",
-            },
-          },
-        });
-
-        if (elementId.includes("-")) {
-          const lookUpIndex = elementId as EncodedId;
-          const xpath: string | undefined = combinedXpathMap[lookUpIndex];
+    const elementsWithSelectors = (
+      await Promise.all(
+        observationResponse.elements.map(async (element) => {
+          const { elementId, ...rest } = element;
 
-          const trimmedXpath = trimTrailingTextNode(xpath);
+          // Generate xpath for the given element if not found in selectorMap
+          this.logger({
+            category: "observation",
+            message: "Getting xpath for element",
+            level: 1,
+            auxiliary: {
+              elementId: {
+                value: elementId.toString(),
+                type: "string",
+              },
+            },
+          });
 
-          if (!trimmedXpath || trimmedXpath === "") {
+          if (elementId.includes("-")) {
+            const lookUpIndex = elementId as EncodedId;
+            const xpath: string | undefined = combinedXpathMap[lookUpIndex];
+
+            const trimmedXpath = trimTrailingTextNode(xpath);
+
+            if (!trimmedXpath || trimmedXpath === "") {
+              this.logger({
+                category: "observation",
+                message: `Empty xpath returned for element`,
+                auxiliary: {
+                  observeResult: {
+                    value: JSON.stringify(element),
+                    type: "object",
+                  },
+                },
+                level: 1,
+              });
+              return undefined;
+            }
+
+            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,
-          };
-        } else {
-          this.logger({
-            category: "observation",
-            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",
-          };
-        }
-      }),
-    );
+        }),
+      )
+    ).filter(<T>(e: T | undefined): e is T => e !== undefined);
 
     this.logger({
       category: "observation",