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

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

@@ -23,6 +23,7 @@ __export(mouse_exports, {
 module.exports = __toCommonJS(mouse_exports);
 var import_bundle = require("../../sdk/bundle");
 var import_tool = require("./tool");
+var import_snapshot = require("./snapshot");
 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")
 });
@@ -102,8 +103,38 @@ const mouseDrag = (0, import_tool.defineTabTool)({
     response.setIncludeAutoScreenshot();
   }
 });
+const mouseDragToXY = (0, import_tool.defineTabTool)({
+  capability: "vision",
+  schema: {
+    name: "browser_drag_to_xy",
+    title: "Drag element to coordinates",
+    description: "Drag element to specific coordinates",
+    inputSchema: import_snapshot.elementSchema.extend({
+      endX: import_bundle.z.number().describe("Target X coordinate"),
+      endY: import_bundle.z.number().describe("Target Y coordinate")
+    }),
+    type: "input"
+  },
+  handle: async (tab, params, response) => {
+    response.setIncludeSnapshot();
+    const { locator, resolved } = await tab.refLocator(params);
+    response.addCode(`// Drag ${params.element} to coordinates (${params.endX}, ${params.endY})`);
+    response.addCode(`await page.${resolved}.hover();`);
+    response.addCode(`await page.mouse.down();`);
+    response.addCode(`await page.mouse.move(${params.endX}, ${params.endY});`);
+    response.addCode(`await page.mouse.up();`);
+    await tab.waitForCompletion(async () => {
+      await locator.hover();
+      await tab.page.mouse.down();
+      await tab.page.mouse.move(params.endX, params.endY);
+      await tab.page.mouse.up();
+    });
+    response.setIncludeAutoScreenshot();
+  }
+});
 var mouse_default = [
   mouseMove,
   mouseClick,
-  mouseDrag
+  mouseDrag,
+  mouseDragToXY
 ];

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

@@ -228,8 +228,111 @@ const elementInspect = (0, import_tool.defineTool)({
     try {
       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) {
+              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 current2 = queue.shift();
+            if (current2.childNodes.length > 0 && !current2.expanded) {
+              expandable.push(current2);
+            }
+            if (current2.expanded) {
+              queue.push(...current2.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;
+        }
         return {
           outerHTML: element.outerHTML,
+          truncatedHTML: truncateIterativeDeepening(element, 300),
+          pathToRoot: path.join(" > "),
           tagName: element.tagName.toLowerCase(),
           computedStyles: {
             display: computedStyle.display,
@@ -277,12 +380,13 @@ Try capturing a new snapshot with browser_snapshot and using the updated element
     }
     let result = `
 **Element:** ${params.element}
+**Path to root:** ${elementDetails.pathToRoot}
 **Suggested Playwright Selector:**
 ${suggestedSelectors}
 
-**HTML:**
+**HTML (truncated to 300 chars with intelligent structure preservation):**
 \`\`\`html
-${elementDetails.outerHTML}
+${elementDetails.truncatedHTML}
 \`\`\`
 
 **Key Computed Styles:**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@one2x/playwright",
-  "version": "1.57.0-alpha.11",
+  "version": "1.57.0-alpha.12",
   "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.11",
+    "playwright-core": "npm:@one2x/playwright-core@1.57.0-alpha.12",
     "raw-body": "^2.5.2"
   },
   "optionalDependencies": {