@monoes/monobrowse 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monoes/monobrowse",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Native browser automation via Chrome DevTools Protocol — the engine powering monomind browse",
   "type": "module",
   "bin": {

package/src/__tests__/box-model.test.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect, vi } from 'vitest';
+import { deriveBoxOutput } from '../cli/commands.js';
+import { getElementBox } from '../browser/snapshot.js';
+import type { ElementRef } from '../browser/types.js';
+
+describe('getElementBox (issue #15: center-vs-top-left contract)', () => {
+  it('averages the CDP content quad\'s four corners into a center point', async () => {
+    // Content quad order per CDP DOM.getBoxModel: [x1,y1 top-left, x2,y2
+    // top-right, x3,y3 bottom-right, x4,y4 bottom-left]. A 372x37 box whose
+    // top-left is (454, 513.5) — matching the issue's own reproduction data.
+    const client = {
+      send: vi.fn().mockResolvedValue({
+        model: {
+          content: [454, 513.5, 826, 513.5, 826, 550.5, 454, 550.5],
+          width: 372,
+          height: 37,
+        },
+      }),
+    };
+    const ref = { backendDOMNodeId: 1 } as unknown as ElementRef;
+    const box = await getElementBox(client as any, 'session-1', ref);
+    expect(box).toEqual({ x: 640, y: 532, width: 372, height: 37 });
+  });
+});
+
+describe('deriveBoxOutput (issue #15: get box exposing both conventions)', () => {
+  it('derives true top-left x/y from the center point, alongside explicit centerX/centerY', () => {
+    const center = { x: 640, y: 532, width: 372, height: 37 };
+    const result = deriveBoxOutput(center);
+    expect(result).toEqual({
+      x: 454, y: 513.5, width: 372, height: 37,
+      centerX: 640, centerY: 532,
+    });
+  });
+
+  it('returns null when there is no box (element not in DOM)', () => {
+    expect(deriveBoxOutput(null)).toBeNull();
+  });
+});

package/src/browser/snapshot.ts

@@ -217,6 +217,17 @@ export async function getObjectIdForRef(
   return result.object?.objectId ?? null;
 }
 
+/**
+ * Returns the element's content box — but `x`/`y` are the CENTER point
+ * (averaged across all four corners of CDP's content quad), not the
+ * top-left origin a `getBoundingClientRect()`-style box normally implies.
+ * This is deliberate: every caller in this file (clickElement, fillElement,
+ * hoverElement, dragElement, ...) uses box.x/box.y directly as the
+ * interaction target, which should land at the element's center. Do NOT
+ * add width/2 or height/2 to these values — that double-offsets away from
+ * the element (see issue #15). If you need the true top-left origin, derive
+ * it as `x - width / 2, y - height / 2`.
+ */
 export async function getElementBox(
   client: CdpClient,
   sessionId: string,

package/src/cli/commands.ts

@@ -777,7 +777,8 @@ const getCommand: Command = {
         const refKey = refArg.startsWith('@') ? refArg.slice(1) : refArg;
         const ref = _refs.get(refKey);
         if (!ref) throw new Error(`Ref @${refKey} not found`);
-        value = await browser.getElementBox(client, sessionId, ref);
+        const center = await browser.getElementBox(client, sessionId, ref);
+        value = deriveBoxOutput(center);
         break;
       }
       case 'styles': {
@@ -1591,8 +1592,11 @@ const tapCommand: Command = {
       const ref = await browser.resolveRef(client, sessionId, _refs, key);
       const box = await browser.getElementBox(client, sessionId, ref);
       if (!box) throw new Error(`Cannot get bounds for @${key}`);
-      x = Math.round(box.x + box.width / 2);
-      y = Math.round(box.y + box.height / 2);
+      // box.x/box.y from getElementBox() ARE already the center point (see
+      // its own doc comment) — adding width/2 here double-offset the tap
+      // target away from the element (issue #15).
+      x = Math.round(box.x);
+      y = Math.round(box.y);
     } else {
       const posJson = await browser.evaluateJs(client, sessionId,
         `(function(){var el=document.querySelector(${JSON.stringify(arg)});if(!el)return null;var r=el.getBoundingClientRect();return JSON.stringify({x:r.left+r.width/2,y:r.top+r.height/2});})()`) as string | null;
@@ -2497,8 +2501,30 @@ function tokenizeBatchCommand(input: string): string[] {
  * only its own known --flags are consumed from the front; everything after
  * them is taken verbatim as one argument, untouched by tokenization.
  *
+/**
+ * `get box`'s output shape: browser.getElementBox() returns the element's
+ * CENTER point under x/y (correct for internal click-target callers), but
+ * `get box` is a bounding-box accessor where x/y conventionally means the
+ * top-left origin — a caller computing its own center as `box.x + width/2`
+ * would otherwise double-offset away from the element (issue #15). Expose
+ * both conventions, explicitly labeled, so neither is ambiguous.
+ *
  * Exported for direct unit testing — not part of the CLI's public API.
  */
+export function deriveBoxOutput(
+  center: { x: number; y: number; width: number; height: number } | null
+): { x: number; y: number; width: number; height: number; centerX: number; centerY: number } | null {
+  if (!center) return null;
+  return {
+    x: center.x - center.width / 2,
+    y: center.y - center.height / 2,
+    width: center.width,
+    height: center.height,
+    centerX: center.x,
+    centerY: center.y,
+  };
+}
+
 export function parseBatchCommandLine(cmdStr: string): { subName: string; subArgs: string[]; flags: Record<string, unknown> } {
   const trimmed = cmdStr.trim();
   const evalMatch = trimmed.match(/^eval\b\s*/);