@one2x/playwright 1.57.0-alpha.13 → 1.57.0-alpha.15

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

@@ -146,125 +146,117 @@ const inspectAtXY = (0, import_tool.defineTabTool)({
     type: "readOnly"
   },
   handle: async (tab, params, response) => {
-    const elementsData = await tab.page.evaluate(({ x, y }) => {
+    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])) {
+          if (i !== index && element.contains(allElements[i]))
             return false;
-          }
         }
         return true;
       });
-      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 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 openTag + closeTag;
+          return attrs.join("");
         }
-        if (!node.expanded) {
-          const count = node.element.children.length;
-          return `${openTag}<!-- ${count} child element${count !== 1 ? "s" : ""} removed -->${closeTag}`;
+        function buildTree(el) {
+          return {
+            element: el,
+            expanded: false,
+            childNodes: Array.from(el.children).map((child) => buildTree(child))
+          };
         }
-        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);
+        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 (current.expanded) {
-            queue.push(...current.childNodes);
+          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;
         }
-        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;
+        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);
           }
-          let expanded = false;
-          for (const node of expandable) {
-            node.expanded = true;
-            const newHtml = renderTree(root);
-            if (newHtml.length <= maxBudget) {
-              currentHtml = newHtml;
-              expanded = true;
+          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;
-            } else {
-              node.expanded = false;
+            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;
           }
-          if (!expanded) {
-            break;
-          }
+          return currentHtml;
         }
-        return currentHtml;
-      }
-      return meaningfulElements.map((element) => {
-        const computedStyle = window.getComputedStyle(element);
         const ariaRef = element._ariaRef;
-        const path = [];
-        let current = element;
-        while (current && current !== document.documentElement) {
-          const ref = current._ariaRef;
-          const tagName = current.tagName?.toLowerCase() || "unknown";
-          let nodeInfo = tagName;
-          if (ref?.ref) {
-            nodeInfo += ` [${ref.ref}]`;
-            if (ref.role) nodeInfo += ` [${ref.role}]`;
-          }
-          path.unshift(nodeInfo);
-          current = current.parentElement;
-        }
         return {
           ref: ariaRef?.ref || null,
           role: ariaRef?.role || null,
           element: ariaRef?.name || element.tagName.toLowerCase(),
-          pathToRoot: path.join(" > "),
           truncatedHTML: truncateIterativeDeepening(element, 300),
           tagName: element.tagName.toLowerCase(),
+          bounds: element.getBoundingClientRect(),
           computedStyles: {
             display: computedStyle.display,
             visibility: computedStyle.visibility,
@@ -286,7 +278,11 @@ const inspectAtXY = (0, import_tool.defineTabTool)({
           readonly: element.readOnly || void 0
         };
       });
-    }, params);
+      elementsData.push({
+        ...elementData,
+        pathToRoot
+      });
+    }
     let suggestedSelectors = "";
     if (elementsData.length > 0 && elementsData[0].ref) {
       try {
@@ -300,11 +296,10 @@ const inspectAtXY = (0, import_tool.defineTabTool)({
       }
     }
     let result = "";
-    if (elementsData.length > 1) {
+    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:**`;
@@ -313,16 +308,26 @@ const inspectAtXY = (0, import_tool.defineTabTool)({
 `;
       result += `- Path to root: ${elementInfo.pathToRoot}
 `;
-      if (isTopmost && suggestedSelectors) {
+      if (isTopmost && suggestedSelectors)
         result += `- Suggested Playwright Selector:
 ${suggestedSelectors}
 `;
-      }
       result += `
 **HTML (truncated to 300 chars):**
 \`\`\`html
 ${elementInfo.truncatedHTML}
 \`\`\`
+`;
+      result += `
+**Bounding Box (viewport coordinates):**
+`;
+      result += `- x: ${elementInfo.bounds.x}
+`;
+      result += `- y: ${elementInfo.bounds.y}
+`;
+      result += `- width: ${elementInfo.bounds.width}
+`;
+      result += `- height: ${elementInfo.bounds.height}
 `;
       result += `
 **Key Computed Styles:**
@@ -336,10 +341,6 @@ ${elementInfo.truncatedHTML}
       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}
 `;
@@ -354,25 +355,20 @@ ${elementInfo.truncatedHTML}
 `;
       result += `- Inner Text: "${elementInfo.innerText}"
 `;
-      if (elementInfo.value !== void 0) {
+      if (elementInfo.value !== void 0)
         result += `- Value: "${elementInfo.value}"
 `;
-      }
-      if (elementInfo.checked !== void 0) {
+      if (elementInfo.checked !== void 0)
         result += `- Checked: ${elementInfo.checked}
 `;
-      }
-      if (elementInfo.disabled !== void 0) {
+      if (elementInfo.disabled !== void 0)
         result += `- Disabled: ${elementInfo.disabled}
 `;
-      }
-      if (elementInfo.readonly !== void 0) {
+      if (elementInfo.readonly !== void 0)
         result += `- Read Only: ${elementInfo.readonly}
 `;
-      }
-      if (index < elementsData.length - 1) {
+      if (index < elementsData.length - 1)
         result += "\n---\n\n";
-      }
     });
     response.addResult(result);
   }

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";
@@ -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)}
 
@@ -389,13 +369,17 @@ ${suggestedSelectors}
 ${elementDetails.truncatedHTML}
 \`\`\`
 
+**Bounding Box (viewport coordinates):**
+- x: ${elementDetails.bounds.x}
+- y: ${elementDetails.bounds.y}
+- width: ${elementDetails.bounds.width}
+- height: ${elementDetails.bounds.height}
+
 **Key Computed Styles:**
 - Display: ${elementDetails.computedStyles.display}
 - Visibility: ${elementDetails.computedStyles.visibility}
 - Opacity: ${elementDetails.computedStyles.opacity}
 - Position: ${elementDetails.computedStyles.position}
-- Width: ${elementDetails.computedStyles.width}
-- Height: ${elementDetails.computedStyles.height}
 - Background Color: ${elementDetails.computedStyles.backgroundColor}
 - Color: ${elementDetails.computedStyles.color}
 
@@ -403,22 +387,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.13",
+  "version": "1.57.0-alpha.15",
   "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.13",
+    "playwright-core": "npm:@one2x/playwright-core@1.57.0-alpha.15",
     "raw-body": "^2.5.2"
   },
   "optionalDependencies": {