@one2x/playwright 1.57.0-alpha.12 → 1.57.0-alpha.14

package/lib/mcp/browser/browserContextFactory.js

@@ -63,9 +63,8 @@ class BaseContextFactory {
   }
   _obtainBrowser(clientInfo) {
     const key = this._calcFingerprint();
-    if (BaseContextFactory._cache.has(key)) {
+    if (BaseContextFactory._cache.has(key))
       return BaseContextFactory._cache.get(key);
-    }
     (0, import_log.testDebug)(`obtain browser (${this._logName})`);
     const browserPromise = this._doObtainBrowser(clientInfo);
     void browserPromise.then((browser) => {
@@ -292,7 +291,6 @@ class SharedContextFactory {
   static create(config) {
     if (SharedContextFactory._instance)
       return SharedContextFactory._instance;
-    ;
     const baseConfig = { ...config, sharedBrowserContext: false };
     const baseFactory = contextFactory(baseConfig);
     SharedContextFactory._instance = new SharedContextFactory(baseFactory);
@@ -335,15 +333,12 @@ async function computeTracesDir(config, clientInfo) {
   return await (0, import_config.outputFile)(config, clientInfo, `traces`, { origin: "code", reason: "Collecting trace" });
 }
 function stableStringify(obj) {
-  if (obj === null || obj === void 0) {
+  if (obj === null || obj === void 0)
     return String(obj);
-  }
-  if (typeof obj !== "object") {
+  if (typeof obj !== "object")
     return JSON.stringify(obj);
-  }
-  if (Array.isArray(obj)) {
+  if (Array.isArray(obj))
     return "[" + obj.map((item) => stableStringify(item)).join(",") + "]";
-  }
   const sortedKeys = Object.keys(obj).sort();
   const pairs = sortedKeys.map((key) => {
     return JSON.stringify(key) + ":" + stableStringify(obj[key]);

package/lib/mcp/browser/config.js

@@ -397,9 +397,8 @@ function configFromURLParams(url) {
   const viewportSize = getParam("viewport-size");
   if (viewportSize)
     options.viewportSize = resolutionParser("--viewport-size", viewportSize);
-  if (!Object.values(options).some((v) => v !== void 0)) {
+  if (!Object.values(options).some((v) => v !== void 0))
     return {};
-  }
   return configFromCLIOptions(options);
 }
 function queryToBoolean(value) {

package/lib/mcp/browser/tools/mouse.js

@@ -24,6 +24,7 @@ module.exports = __toCommonJS(mouse_exports);
 var import_bundle = require("../../sdk/bundle");
 var import_tool = require("./tool");
 var import_snapshot = require("./snapshot");
+var import_utils = require("./utils");
 const elementSchema = import_bundle.z.object({
   element: import_bundle.z.string().describe("Human-readable element description used to obtain permission to interact with the element")
 });
@@ -132,9 +133,242 @@ const mouseDragToXY = (0, import_tool.defineTabTool)({
     response.setIncludeAutoScreenshot();
   }
 });
+const inspectAtXY = (0, import_tool.defineTabTool)({
+  capability: "core",
+  schema: {
+    name: "browser_inspect_element_at_xy",
+    title: "Inspect elements at coordinates",
+    description: "Inspect all meaningful elements at x,y coordinates (excluding parent containers). Returns element details for generating test assertions including suggested selector, HTML, and computed styles",
+    inputSchema: elementSchema.extend({
+      x: import_bundle.z.number().describe("X coordinate"),
+      y: import_bundle.z.number().describe("Y coordinate")
+    }),
+    type: "readOnly"
+  },
+  handle: async (tab, params, response) => {
+    const elementHandlesData = await tab.page.evaluateHandle(({ x, y }) => {
+      const allElements = document.elementsFromPoint(x, y);
+      const meaningfulElements = allElements.filter((element, index) => {
+        for (let i = 0; i < allElements.length; i++) {
+          if (i !== index && element.contains(allElements[i]))
+            return false;
+        }
+        return true;
+      });
+      return meaningfulElements;
+    }, params);
+    const elementHandlesArray = await elementHandlesData.evaluateHandle((arr) => arr);
+    const elementHandles = [];
+    const length = await elementHandlesArray.evaluate((arr) => arr.length);
+    for (let i = 0; i < length; i++) {
+      const handle = await elementHandlesArray.evaluateHandle((arr, index) => arr[index], i);
+      const element = handle.asElement();
+      if (element)
+        elementHandles.push(element);
+    }
+    const elementsData = [];
+    for (const elementHandle of elementHandles) {
+      const pathToRoot = await elementHandle.getPathWithRefs().catch(() => "");
+      const elementData = await elementHandle.evaluate((element) => {
+        const computedStyle = window.getComputedStyle(element);
+        function serializeAttributes(el) {
+          const essentialAttrs = ["id", "class", "type", "name", "role", "aria-label"];
+          const attrs = [];
+          for (const attrName of essentialAttrs) {
+            const value = el.getAttribute(attrName);
+            if (value)
+              attrs.push(` ${attrName}="${value}"`);
+          }
+          return attrs.join("");
+        }
+        function buildTree(el) {
+          return {
+            element: el,
+            expanded: false,
+            childNodes: Array.from(el.children).map((child) => buildTree(child))
+          };
+        }
+        function renderTree(node) {
+          const tag = node.element.tagName.toLowerCase();
+          const attrs = serializeAttributes(node.element);
+          const openTag = `<${tag}${attrs}>`;
+          const closeTag = `</${tag}>`;
+          const selfClosing = ["img", "input", "br", "hr", "meta", "link"];
+          if (selfClosing.includes(tag))
+            return `<${tag}${attrs} />`;
+          if (node.childNodes.length === 0) {
+            const text = node.element.textContent?.trim() || "";
+            if (text && text.length <= 50)
+              return openTag + text + closeTag;
+            else if (text)
+              return openTag + text.substring(0, 47) + "..." + closeTag;
+            return openTag + closeTag;
+          }
+          if (!node.expanded) {
+            const count = node.element.children.length;
+            return `${openTag}<!-- ${count} child element${count !== 1 ? "s" : ""} removed -->${closeTag}`;
+          }
+          const childrenHtml = node.childNodes.map((child) => renderTree(child)).join("");
+          return openTag + childrenHtml + closeTag;
+        }
+        function getExpandableNodes(node) {
+          const queue = [node];
+          const expandable = [];
+          while (queue.length > 0) {
+            const current = queue.shift();
+            if (current.childNodes.length > 0 && !current.expanded)
+              expandable.push(current);
+            if (current.expanded)
+              queue.push(...current.childNodes);
+          }
+          return expandable;
+        }
+        function truncateIterativeDeepening(el, maxBudget) {
+          if (el.outerHTML.length <= maxBudget)
+            return el.outerHTML;
+          const root = buildTree(el);
+          let currentHtml = renderTree(root);
+          while (currentHtml.length < maxBudget) {
+            const expandable = getExpandableNodes(root);
+            if (expandable.length === 0)
+              break;
+            let expanded = false;
+            for (const node of expandable) {
+              node.expanded = true;
+              const newHtml = renderTree(root);
+              if (newHtml.length <= maxBudget) {
+                currentHtml = newHtml;
+                expanded = true;
+                break;
+              } else {
+                node.expanded = false;
+              }
+            }
+            if (!expanded)
+              break;
+          }
+          return currentHtml;
+        }
+        const ariaRef = element._ariaRef;
+        return {
+          ref: ariaRef?.ref || null,
+          role: ariaRef?.role || null,
+          element: ariaRef?.name || element.tagName.toLowerCase(),
+          truncatedHTML: truncateIterativeDeepening(element, 300),
+          tagName: element.tagName.toLowerCase(),
+          computedStyles: {
+            display: computedStyle.display,
+            visibility: computedStyle.visibility,
+            opacity: computedStyle.opacity,
+            position: computedStyle.position,
+            zIndex: computedStyle.zIndex,
+            width: computedStyle.width,
+            height: computedStyle.height,
+            backgroundColor: computedStyle.backgroundColor,
+            color: computedStyle.color,
+            fontSize: computedStyle.fontSize,
+            fontFamily: computedStyle.fontFamily
+          },
+          textContent: element.textContent?.trim() || "",
+          innerText: element.innerText?.trim() || "",
+          value: element.value || void 0,
+          checked: element.checked || void 0,
+          disabled: element.disabled || void 0,
+          readonly: element.readOnly || void 0
+        };
+      });
+      elementsData.push({
+        ...elementData,
+        pathToRoot
+      });
+    }
+    let suggestedSelectors = "";
+    if (elementsData.length > 0 && elementsData[0].ref) {
+      try {
+        const topElement = elementsData[0];
+        const { locator } = await tab.refLocator({
+          element: topElement.element,
+          ref: topElement.ref
+        });
+        suggestedSelectors = (await (0, import_utils.generateLocators)(locator)).map((s) => `\`page.${s}\``).join("\n");
+      } catch (e) {
+      }
+    }
+    let result = "";
+    if (elementsData.length > 1)
+      result += `\u26A0\uFE0F Warning: Found ${elementsData.length} elements at (${params.x}, ${params.y})
+
+`;
+    elementsData.forEach((elementInfo, index) => {
+      const isTopmost = index === 0;
+      const header = isTopmost ? `**Element at (${params.x}, ${params.y}) - Topmost (will receive clicks):**` : `**Element ${index + 1} at (${params.x}, ${params.y}) - Below topmost:**`;
+      result += header + "\n";
+      result += `- RefId: ${elementInfo.ref || "N/A"}
+`;
+      result += `- Path to root: ${elementInfo.pathToRoot}
+`;
+      if (isTopmost && suggestedSelectors)
+        result += `- Suggested Playwright Selector:
+${suggestedSelectors}
+`;
+      result += `
+**HTML (truncated to 300 chars):**
+\`\`\`html
+${elementInfo.truncatedHTML}
+\`\`\`
+`;
+      result += `
+**Key Computed Styles:**
+`;
+      result += `- Display: ${elementInfo.computedStyles.display}
+`;
+      result += `- Visibility: ${elementInfo.computedStyles.visibility}
+`;
+      result += `- Opacity: ${elementInfo.computedStyles.opacity}
+`;
+      result += `- Position: ${elementInfo.computedStyles.position}
+`;
+      result += `- Z-Index: ${elementInfo.computedStyles.zIndex}
+`;
+      result += `- Width: ${elementInfo.computedStyles.width}
+`;
+      result += `- Height: ${elementInfo.computedStyles.height}
+`;
+      result += `- Background Color: ${elementInfo.computedStyles.backgroundColor}
+`;
+      result += `- Color: ${elementInfo.computedStyles.color}
+`;
+      result += `
+**Element Properties:**
+`;
+      result += `- Tag: ${elementInfo.tagName}
+`;
+      result += `- Text Content: "${elementInfo.textContent}"
+`;
+      result += `- Inner Text: "${elementInfo.innerText}"
+`;
+      if (elementInfo.value !== void 0)
+        result += `- Value: "${elementInfo.value}"
+`;
+      if (elementInfo.checked !== void 0)
+        result += `- Checked: ${elementInfo.checked}
+`;
+      if (elementInfo.disabled !== void 0)
+        result += `- Disabled: ${elementInfo.disabled}
+`;
+      if (elementInfo.readonly !== void 0)
+        result += `- Read Only: ${elementInfo.readonly}
+`;
+      if (index < elementsData.length - 1)
+        result += "\n---\n\n";
+    });
+    response.addResult(result);
+  }
+});
 var mouse_default = [
   mouseMove,
   mouseClick,
   mouseDrag,
-  mouseDragToXY
+  mouseDragToXY,
+  inspectAtXY
 ];

package/lib/mcp/browser/tools/screenshot.js

@@ -51,7 +51,7 @@ const screenshot = (0, import_tool.defineTabTool)({
   schema: {
     name: "browser_take_screenshot",
     title: "Take a screenshot",
-    description: `Take a screenshot of the current page. You can't perform actions based on the screenshot, use browser_snapshot for actions.`,
+    description: `Take a screenshot of the current page. You can call tools ends with '_xy' based on the screenshot coordinates.`,
     inputSchema: screenshotSchema,
     type: "readOnly"
   },

package/lib/mcp/browser/tools/snapshot.js

@@ -88,9 +88,8 @@ const click = (0, import_tool.defineTabTool)({
         options
       );
     });
-    if (!result) {
+    if (!result)
       return;
-    }
     if (result.mode === "auto" && result.interceptorInfo) {
       const actionName = params.doubleClick ? ".dblclick({ allowIntercept: true })" : ".click({ allowIntercept: true })";
       (0, import_utils.addInterceptorWarning)(response, resolved, actionName, result.interceptorInfo);
@@ -133,9 +132,8 @@ const drag = (0, import_tool.defineTabTool)({
         {}
       );
     });
-    if (!result) {
+    if (!result)
       return;
-    }
     if (result.mode === "auto" && result.interceptorInfo)
       (0, import_utils.addInterceptorWarning)(response, start.resolved, ".dragTo(target, { allowIntercept: true })", result.interceptorInfo);
     const needsAllowIntercept = result.mode === "auto" && result.interceptorInfo || result.mode === "always";
@@ -163,9 +161,8 @@ const hover = (0, import_tool.defineTabTool)({
         {}
       );
     });
-    if (!result) {
+    if (!result)
       return;
-    }
     if (result.mode === "auto" && result.interceptorInfo)
       (0, import_utils.addInterceptorWarning)(response, resolved, ".hover({ allowIntercept: true })", result.interceptorInfo);
     const needsAllowIntercept = result.mode === "auto" && result.interceptorInfo || result.mode === "always";
@@ -213,7 +210,7 @@ const pickLocator = (0, import_tool.defineTabTool)({
 const elementInspect = (0, import_tool.defineTool)({
   capability: "core",
   schema: {
-    name: "browser_element_inspect",
+    name: "browser_inspect_element",
     title: "Inspect element for testing",
     description: "Get element details for generating test assertions - returns suggested selector, HTML, and computed styles",
     inputSchema: elementSchema,
@@ -226,31 +223,19 @@ const elementInspect = (0, import_tool.defineTool)({
     let elementDetails;
     const suggestedSelectors = (await (0, import_utils.generateLocators)(locator)).map((s) => `\`page.${s}\``).join("\n");
     try {
+      const elementHandle = await locator.elementHandle();
+      if (!elementHandle)
+        throw new Error("Element not found");
+      const pathToRoot = await elementHandle.getPathWithRefs();
       elementDetails = await locator.evaluate((element) => {
         const computedStyle = window.getComputedStyle(element);
-        const path = [];
-        let current = element;
-        while (current && current !== document.documentElement) {
-          const ariaRef = current._ariaRef;
-          const tagName = current.tagName?.toLowerCase() || "unknown";
-          let nodeInfo = tagName;
-          if (ariaRef?.ref) {
-            nodeInfo += ` [${ariaRef.ref}]`;
-            if (ariaRef.role) {
-              nodeInfo += ` [${ariaRef.role}]`;
-            }
-          }
-          path.unshift(nodeInfo);
-          current = current.parentElement;
-        }
         function serializeAttributes(el) {
           const essentialAttrs = ["id", "class", "type", "name", "role", "aria-label"];
           const attrs = [];
           for (const attrName of essentialAttrs) {
             const value = el.getAttribute(attrName);
-            if (value) {
+            if (value)
               attrs.push(` ${attrName}="${value}"`);
-            }
           }
           return attrs.join("");
         }
@@ -267,16 +252,14 @@ const elementInspect = (0, import_tool.defineTool)({
           const openTag = `<${tag}${attrs}>`;
           const closeTag = `</${tag}>`;
           const selfClosing = ["img", "input", "br", "hr", "meta", "link"];
-          if (selfClosing.includes(tag)) {
+          if (selfClosing.includes(tag))
             return `<${tag}${attrs} />`;
-          }
           if (node.childNodes.length === 0) {
             const text = node.element.textContent?.trim() || "";
-            if (text && text.length <= 50) {
+            if (text && text.length <= 50)
               return openTag + text + closeTag;
-            } else if (text) {
+            else if (text)
               return openTag + text.substring(0, 47) + "..." + closeTag;
-            }
             return openTag + closeTag;
           }
           if (!node.expanded) {
@@ -290,27 +273,23 @@ const elementInspect = (0, import_tool.defineTool)({
           const queue = [node];
           const expandable = [];
           while (queue.length > 0) {
-            const current2 = queue.shift();
-            if (current2.childNodes.length > 0 && !current2.expanded) {
-              expandable.push(current2);
-            }
-            if (current2.expanded) {
-              queue.push(...current2.childNodes);
-            }
+            const current = queue.shift();
+            if (current.childNodes.length > 0 && !current.expanded)
+              expandable.push(current);
+            if (current.expanded)
+              queue.push(...current.childNodes);
           }
           return expandable;
         }
         function truncateIterativeDeepening(el, maxBudget) {
-          if (el.outerHTML.length <= maxBudget) {
+          if (el.outerHTML.length <= maxBudget)
             return el.outerHTML;
-          }
           const root = buildTree(el);
           let currentHtml = renderTree(root);
           while (currentHtml.length < maxBudget) {
             const expandable = getExpandableNodes(root);
-            if (expandable.length === 0) {
+            if (expandable.length === 0)
               break;
-            }
             let expanded = false;
             for (const node of expandable) {
               node.expanded = true;
@@ -323,16 +302,14 @@ const elementInspect = (0, import_tool.defineTool)({
                 node.expanded = false;
               }
             }
-            if (!expanded) {
+            if (!expanded)
               break;
-            }
           }
           return currentHtml;
         }
         return {
           outerHTML: element.outerHTML,
           truncatedHTML: truncateIterativeDeepening(element, 300),
-          pathToRoot: path.join(" > "),
           tagName: element.tagName.toLowerCase(),
           computedStyles: {
             display: computedStyle.display,
@@ -354,10 +331,12 @@ const elementInspect = (0, import_tool.defineTool)({
             zIndex: computedStyle.zIndex,
             transform: computedStyle.transform
           },
-          attributes: Array.from(element.attributes).reduce((acc, attr) => {
-            acc[attr.name] = attr.value;
-            return acc;
-          }, {}),
+          attributes: (() => {
+            const attrs = {};
+            for (const attr of Array.from(element.attributes))
+              attrs[attr.name] = attr.value;
+            return attrs;
+          })(),
           textContent: element.textContent?.trim() || "",
           innerText: element.innerText?.trim() || "",
           value: element.value || void 0,
@@ -367,6 +346,7 @@ const elementInspect = (0, import_tool.defineTool)({
           bounds: element.getBoundingClientRect()
         };
       });
+      elementDetails.pathToRoot = pathToRoot;
     } catch (error) {
       response.addResult(`Error inspecting element "${params.element}": ${error instanceof Error ? error.message : String(error)}
 
@@ -403,22 +383,18 @@ ${elementDetails.truncatedHTML}
 - Tag: ${elementDetails.tagName}
 - Text Content: "${elementDetails.textContent}"
 - Inner Text: "${elementDetails.innerText}"`;
-    if (elementDetails.value !== void 0) {
+    if (elementDetails.value !== void 0)
       result += `
 - Value: "${elementDetails.value}"`;
-    }
-    if (elementDetails.checked !== void 0) {
+    if (elementDetails.checked !== void 0)
       result += `
 - Checked: ${elementDetails.checked}`;
-    }
-    if (elementDetails.disabled !== void 0) {
+    if (elementDetails.disabled !== void 0)
       result += `
 - Disabled: ${elementDetails.disabled}`;
-    }
-    if (elementDetails.readonly !== void 0) {
+    if (elementDetails.readonly !== void 0)
       result += `
 - Read Only: ${elementDetails.readonly}`;
-    }
     response.addResult(result);
   }
 });

package/lib/mcp/sdk/http.js

@@ -241,16 +241,14 @@ function configFromInitRequest(body) {
   for (const [snakeKey, camelKey] of Object.entries(keyMap)) {
     if (playwrightConfig[snakeKey] !== void 0) {
       let value = playwrightConfig[snakeKey];
-      if (snakeKey === "no_sandbox") {
+      if (snakeKey === "no_sandbox")
         value = !value;
-      }
       options[camelKey] = value;
     }
   }
   for (const key of Object.keys(playwrightConfig)) {
-    if (!key.includes("_") && options[key] === void 0) {
+    if (!key.includes("_") && options[key] === void 0)
       options[key] = playwrightConfig[key];
-    }
   }
   testDebug("Converted to CLIOptions:", options);
   return (0, import_config.configFromCLIOptions)(options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@one2x/playwright",
-  "version": "1.57.0-alpha.12",
+  "version": "1.57.0-alpha.14",
   "description": "A high-level API to automate web browsers",
   "repository": {
     "type": "git",
@@ -65,7 +65,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "content-type": "^1.0.5",
-    "playwright-core": "npm:@one2x/playwright-core@1.57.0-alpha.12",
+    "playwright-core": "npm:@one2x/playwright-core@1.57.0-alpha.14",
     "raw-body": "^2.5.2"
   },
   "optionalDependencies": {