cdp-skill 1.0.14 → 1.0.16

package/src/tests/ClickExecutor.test.js

@@ -120,17 +120,48 @@ describe('ClickExecutor', () => {
           if (params?.expression?.includes('location.href')) {
             return { result: { value: 'https://example.com' } };
           }
-          if (params?.expression?.includes('__ariaRefs')) {
+          // LazyResolver: first queries __ariaRefMeta for metadata
+          if (params?.expression?.includes('__ariaRefMeta') && params?.expression?.includes('get') && !params?.expression?.includes('lazyResolveRef')) {
+            return { result: { value: { selector: '#btn', role: 'button', name: 'Submit' } } };
+          }
+          // LazyResolver: then resolves element by selector
+          if (params?.expression?.includes('found') && params?.expression?.includes('box')) {
+            return { result: { value: { found: true, box: { x: 50, y: 50, width: 100, height: 40 } } } };
+          }
+          // LazyResolver: gets objectId
+          if (params?.expression?.includes('querySelector') && !params?.expression?.includes('lazyResolveRef')) {
+            return { result: { objectId: 'obj-123' } };
+          }
+          // Browser-side lazy resolution for click verification/execution - return success
+          if (params?.expression?.includes('lazyResolveRef') && params?.expression?.includes('click')) {
+            return { result: { value: { success: true } } };
+          }
+          // Browser-side lazy resolution for event setup
+          if (params?.expression?.includes('lazyResolveRef')) {
+            return { result: { value: null } };
+          }
+          // Verification check
+          if (params?.expression?.includes('__clickVerifyEl') || params?.expression?.includes('targetReceived')) {
             return { result: { value: { targetReceived: true } } };
           }
           return { result: { objectId: 'obj-123' } };
         }
+        if (method === 'Runtime.callFunctionOn') {
+          // Visibility check after lazy resolution
+          if (params?.functionDeclaration?.includes('getComputedStyle') && params?.functionDeclaration?.includes('isVisible')) {
+            return { result: { value: { isVisible: true, box: { x: 50, y: 50, width: 100, height: 40 } } } };
+          }
+          if (params?.functionDeclaration?.includes('__clickReceived')) {
+            return { result: { value: true } };
+          }
+          return { result: { value: { success: true, targetReceived: true } } };
+        }
         return {};
       });
 
-      const result = await executor.execute({ ref: 's1e1' });
+      const result = await executor.execute({ ref: 'f0s1e1' });
       assert.strictEqual(result.clicked, true);
-      assert.strictEqual(result.ref, 's1e1');
+      assert.strictEqual(result.ref, 'f0s1e1');
     });
 
     it('should detect ref from string selector pattern', async () => {
@@ -139,17 +170,44 @@ describe('ClickExecutor', () => {
           if (params?.expression?.includes('location.href')) {
             return { result: { value: 'https://example.com' } };
           }
-          if (params?.expression?.includes('__ariaRefs')) {
+          // LazyResolver: queries __ariaRefMeta for metadata
+          if (params?.expression?.includes('__ariaRefMeta') && params?.expression?.includes('get') && !params?.expression?.includes('lazyResolveRef')) {
+            return { result: { value: { selector: '#btn', role: 'button', name: 'Submit' } } };
+          }
+          // LazyResolver: resolves element
+          if (params?.expression?.includes('found') && params?.expression?.includes('box')) {
+            return { result: { value: { found: true, box: { x: 50, y: 50, width: 100, height: 40 } } } };
+          }
+          if (params?.expression?.includes('querySelector') && !params?.expression?.includes('lazyResolveRef')) {
+            return { result: { objectId: 'obj-123' } };
+          }
+          // Browser-side lazy resolution for click - return success
+          if (params?.expression?.includes('lazyResolveRef') && params?.expression?.includes('click')) {
+            return { result: { value: { success: true } } };
+          }
+          if (params?.expression?.includes('lazyResolveRef')) {
+            return { result: { value: null } };
+          }
+          if (params?.expression?.includes('__clickVerifyEl') || params?.expression?.includes('targetReceived')) {
             return { result: { value: { targetReceived: true } } };
           }
           return { result: { objectId: 'obj-123' } };
         }
+        if (method === 'Runtime.callFunctionOn') {
+          if (params?.functionDeclaration?.includes('getComputedStyle') && params?.functionDeclaration?.includes('isVisible')) {
+            return { result: { value: { isVisible: true, box: { x: 50, y: 50, width: 100, height: 40 } } } };
+          }
+          if (params?.functionDeclaration?.includes('__clickReceived')) {
+            return { result: { value: true } };
+          }
+          return { result: { value: { success: true, targetReceived: true } } };
+        }
         return {};
       });
 
-      const result = await executor.execute('s1e12');
+      const result = await executor.execute('f0s1e12');
       assert.strictEqual(result.clicked, true);
-      assert.strictEqual(result.ref, 's1e12');
+      assert.strictEqual(result.ref, 'f0s1e12');
     });
 
     it('should handle text-based click', async () => {
@@ -392,7 +450,7 @@ describe('ClickExecutor', () => {
       const noAriaExecutor = createClickExecutor(mockSession, mockElementLocator, mockInputEmulator);
 
       // Without ariaSnapshot, the executor falls back to selector-based click
-      // which will fail to find the element "s1e1" (since it's not a valid CSS selector)
+      // which will fail to find the element "f0s1e1" (since it's not a valid CSS selector)
       mockSession.send = mock.fn(async (method, params) => {
         if (method === 'Runtime.evaluate') {
           if (params?.expression?.includes('location.href')) {
@@ -404,100 +462,162 @@ describe('ClickExecutor', () => {
       });
 
       await assert.rejects(
-        () => noAriaExecutor.execute({ ref: 's1e1' }),
+        () => noAriaExecutor.execute({ ref: 'f0s1e1' }),
         (err) => {
-          // Without ariaSnapshot, the ref 's1e1' is treated as selector, failing to find
+          // Without ariaSnapshot, the ref 'f0s1e1' is treated as selector, failing to find
           return err.message.includes('not found') || err.message.includes('ariaSnapshot');
         }
       );
     });
 
-    it('should return stale warning when ref element is stale', async () => {
-      mockAriaSnapshot.getElementByRef = mock.fn(async () => ({
-        box: { x: 50, y: 50, width: 100, height: 40 },
-        isVisible: true,
-        stale: true
-      }));
-
+    it('should throw when ref element cannot be resolved (lazy resolution)', async () => {
+      // LazyResolver returns null when metadata not found or element can't be resolved
       mockSession.send = mock.fn(async (method, params) => {
-        if (method === 'Runtime.evaluate' && params?.expression?.includes('location.href')) {
-          return { result: { value: 'https://example.com' } };
+        if (method === 'Runtime.evaluate') {
+          if (params?.expression?.includes('location.href')) {
+            return { result: { value: 'https://example.com' } };
+          }
+          // LazyResolver: no metadata found
+          if (params?.expression?.includes('__ariaRefMeta')) {
+            return { result: { value: null } };
+          }
+          return { result: { value: null } };
         }
         return {};
       });
 
-      const result = await executor.execute({ ref: 's1e1' });
-      assert.strictEqual(result.clicked, false);
-      assert.strictEqual(result.stale, true);
-      assert.ok(result.warning.includes('no longer attached'));
+      await assert.rejects(
+        async () => await executor.execute({ ref: 'f0s1e1' }),
+        (err) => err.message.includes('not found')
+      );
     });
 
     it('should return warning when ref element is not visible', async () => {
-      mockAriaSnapshot.getElementByRef = mock.fn(async () => ({
-        box: { x: 50, y: 50, width: 100, height: 40 },
-        isVisible: false,
-        stale: false
-      }));
-
       mockSession.send = mock.fn(async (method, params) => {
-        if (method === 'Runtime.evaluate' && params?.expression?.includes('location.href')) {
-          return { result: { value: 'https://example.com' } };
+        if (method === 'Runtime.evaluate') {
+          if (params?.expression?.includes('location.href')) {
+            return { result: { value: 'https://example.com' } };
+          }
+          // LazyResolver: metadata found
+          if (params?.expression?.includes('__ariaRefMeta') && params?.expression?.includes('get')) {
+            return { result: { value: { selector: '#btn', role: 'button', name: 'Submit' } } };
+          }
+          // LazyResolver: element found
+          if (params?.expression?.includes('found') && params?.expression?.includes('box')) {
+            return { result: { value: { found: true, box: { x: 50, y: 50, width: 100, height: 40 } } } };
+          }
+          if (params?.expression?.includes('querySelector')) {
+            return { result: { objectId: 'obj-123' } };
+          }
+          if (params?.expression?.includes('lazyResolveRef')) {
+            return { result: { value: null } };
+          }
+          return { result: { objectId: 'obj-123' } };
+        }
+        if (method === 'Runtime.callFunctionOn') {
+          // Visibility check returns not visible
+          if (params?.functionDeclaration?.includes('getComputedStyle') && params?.functionDeclaration?.includes('isVisible')) {
+            return { result: { value: { isVisible: false, box: { x: 50, y: 50, width: 100, height: 40 } } } };
+          }
+          return { result: { value: { found: false } } };
         }
         return {};
       });
 
-      const result = await executor.execute({ ref: 's1e1' });
+      const result = await executor.execute({ ref: 'f0s1e1' });
       assert.strictEqual(result.clicked, false);
       assert.ok(result.warning.includes('not visible'));
     });
 
-    it('should succeed when ref element is re-resolved via metadata', async () => {
-      mockAriaSnapshot.getElementByRef = mock.fn(async () => ({
-        box: { x: 50, y: 50, width: 100, height: 40 },
-        isVisible: true,
-        stale: false,
-        reResolved: true
-      }));
-
+    it('should succeed when ref element is resolved via lazy resolution', async () => {
       mockSession.send = mock.fn(async (method, params) => {
         if (method === 'Runtime.evaluate') {
           if (params?.expression?.includes('location.href')) {
             return { result: { value: 'https://example.com' } };
           }
-          if (params?.expression?.includes('__ariaRefs')) {
+          // LazyResolver: metadata found
+          if (params?.expression?.includes('__ariaRefMeta') && params?.expression?.includes('get') && !params?.expression?.includes('lazyResolveRef')) {
+            return { result: { value: { selector: '#btn', role: 'button', name: 'Submit' } } };
+          }
+          // LazyResolver: element found
+          if (params?.expression?.includes('found') && params?.expression?.includes('box')) {
+            return { result: { value: { found: true, box: { x: 50, y: 50, width: 100, height: 40 } } } };
+          }
+          if (params?.expression?.includes('querySelector') && !params?.expression?.includes('lazyResolveRef')) {
+            return { result: { objectId: 'obj-123' } };
+          }
+          // Browser-side lazy resolution for click - return success
+          if (params?.expression?.includes('lazyResolveRef') && params?.expression?.includes('click')) {
+            return { result: { value: { success: true } } };
+          }
+          if (params?.expression?.includes('lazyResolveRef')) {
+            return { result: { value: null } };
+          }
+          if (params?.expression?.includes('__clickVerifyEl') || params?.expression?.includes('targetReceived')) {
             return { result: { value: { targetReceived: true } } };
           }
           return { result: { objectId: 'obj-123' } };
         }
+        if (method === 'Runtime.callFunctionOn') {
+          if (params?.functionDeclaration?.includes('getComputedStyle') && params?.functionDeclaration?.includes('isVisible')) {
+            return { result: { value: { isVisible: true, box: { x: 50, y: 50, width: 100, height: 40 } } } };
+          }
+          if (params?.functionDeclaration?.includes('__clickReceived')) {
+            return { result: { value: true } };
+          }
+          return { result: { value: { success: true, targetReceived: true } } };
+        }
         return {};
       });
 
-      const result = await executor.execute({ ref: 's1e1' });
+      const result = await executor.execute({ ref: 'f0s1e1' });
       assert.strictEqual(result.clicked, true);
-      assert.strictEqual(result.ref, 's1e1');
+      assert.strictEqual(result.ref, 'f0s1e1');
     });
 
     it('should click non-visible element with force option', async () => {
-      mockAriaSnapshot.getElementByRef = mock.fn(async () => ({
-        box: { x: 50, y: 50, width: 100, height: 40 },
-        isVisible: false,
-        stale: false
-      }));
-
       mockSession.send = mock.fn(async (method, params) => {
         if (method === 'Runtime.evaluate') {
           if (params?.expression?.includes('location.href')) {
             return { result: { value: 'https://example.com' } };
           }
-          if (params?.expression?.includes('__ariaRefs')) {
+          // LazyResolver: metadata found
+          if (params?.expression?.includes('__ariaRefMeta') && params?.expression?.includes('get') && !params?.expression?.includes('lazyResolveRef')) {
+            return { result: { value: { selector: '#btn', role: 'button', name: 'Submit' } } };
+          }
+          // LazyResolver: element found
+          if (params?.expression?.includes('found') && params?.expression?.includes('box')) {
+            return { result: { value: { found: true, box: { x: 50, y: 50, width: 100, height: 40 } } } };
+          }
+          if (params?.expression?.includes('querySelector') && !params?.expression?.includes('lazyResolveRef')) {
+            return { result: { objectId: 'obj-123' } };
+          }
+          // Browser-side lazy resolution for click - return success
+          if (params?.expression?.includes('lazyResolveRef') && params?.expression?.includes('click')) {
+            return { result: { value: { success: true } } };
+          }
+          if (params?.expression?.includes('lazyResolveRef')) {
+            return { result: { value: null } };
+          }
+          if (params?.expression?.includes('__clickVerifyEl') || params?.expression?.includes('targetReceived')) {
             return { result: { value: { targetReceived: true } } };
           }
           return { result: { objectId: 'obj-123' } };
         }
+        if (method === 'Runtime.callFunctionOn') {
+          // Visibility check returns not visible, but force=true will proceed
+          if (params?.functionDeclaration?.includes('getComputedStyle') && params?.functionDeclaration?.includes('isVisible')) {
+            return { result: { value: { isVisible: false, box: { x: 50, y: 50, width: 100, height: 40 } } } };
+          }
+          if (params?.functionDeclaration?.includes('__clickReceived')) {
+            return { result: { value: true } };
+          }
+          return { result: { value: { success: true, targetReceived: true } } };
+        }
         return {};
       });
 
-      const result = await executor.execute({ ref: 's1e1', force: true });
+      const result = await executor.execute({ ref: 'f0s1e1', force: true });
       assert.strictEqual(result.clicked, true);
     });
   });

package/src/tests/ContextHelpers.test.js

@@ -133,8 +133,8 @@ describe('ContextHelpers', () => {
       });
 
       it('should describe click with ref', () => {
-        const result = buildActionContext('click', { ref: 's1e1' }, {});
-        assert.strictEqual(result, 'Clicked [ref=s1e1]');
+        const result = buildActionContext('click', { ref: 'f0s1e1' }, {});
+        assert.strictEqual(result, 'Clicked [ref=f0s1e1]');
       });
 
       it('should describe click with text', () => {

package/src/tests/ExecuteInteraction.test.js

@@ -184,7 +184,7 @@ describe('executeHover', () => {
     const snapshot = createMockAriaSnapshot();
 
     const result = await executeHover(locator, emulator, snapshot, {
-      ref: 's1e1'
+      ref: 'f0s1e1'
     });
 
     assert.strictEqual(result.hovered, true);
@@ -295,7 +295,7 @@ describe('executeDrag', () => {
 
     await assert.rejects(
       executeDrag(locator, emulator, pc, snapshot, {
-        source: 's1e1',
+        source: 'f0s1e1',
         target: { x: 200, y: 200 }
       }),
       { message: /no longer attached/i }

package/src/tests/ExecuteQuery.test.js

@@ -33,7 +33,7 @@ function createMockAriaSnapshot(opts = {}) {
         };
       }
       const yaml = opts.yaml || '- button "Submit"';
-      const refs = opts.refs || { 's1e1': 'ref-data' };
+      const refs = opts.refs || { 'f0s1e1': 'ref-data' };
 
       // For snapshotSearch, return tree structure
       if (opts.searchTree) {
@@ -41,8 +41,8 @@ function createMockAriaSnapshot(opts = {}) {
           tree: {
             role: 'document',
             children: [
-              { role: 'button', name: 'Submit', ref: 's1e1', box: { x: 10, y: 10, width: 80, height: 40 } },
-              { role: 'button', name: 'Cancel', ref: 's1e2', box: { x: 100, y: 10, width: 80, height: 40 } }
+              { role: 'button', name: 'Submit', ref: 'f0s1e1', box: { x: 10, y: 10, width: 80, height: 40 } },
+              { role: 'button', name: 'Cancel', ref: 'f0s1e2', box: { x: 100, y: 10, width: 80, height: 40 } }
             ]
           },
           yaml,
@@ -60,13 +60,13 @@ function createMockAriaSnapshot(opts = {}) {
       };
     }),
     getElementByRef: mock.fn(async (ref) => {
-      if (opts.refNotFound || ref === 's1e999') {
+      if (opts.refNotFound || ref === 'f0s1e999') {
         return null;
       }
-      if (opts.refStale || ref === 's1e998') {
+      if (opts.refStale || ref === 'f0s1e998') {
         return { stale: true };
       }
-      if (opts.refHidden || ref === 's1e997') {
+      if (opts.refHidden || ref === 'f0s1e997') {
         return {
           isVisible: false,
           box: { x: 0, y: 0, width: 0, height: 0 }
@@ -122,7 +122,7 @@ function createMockPageController(opts = {}) {
             return {
               result: {
                 value: {
-                  ref: 's1e1',
+                  ref: 'f0s1e1',
                   existing: false,
                   tag: 'BUTTON',
                   selector: 'button.submit',
@@ -146,8 +146,8 @@ function createMockPageController(opts = {}) {
               result: {
                 value: {
                   results: [
-                    { x: 100, y: 100, ref: 's1e1', tag: 'BUTTON' },
-                    { x: 200, y: 200, ref: 's1e2', tag: 'A' }
+                    { x: 100, y: 100, ref: 'f0s1e1', tag: 'BUTTON' },
+                    { x: 200, y: 200, ref: 'f0s1e2', tag: 'A' }
                   ]
                 }
               }
@@ -158,8 +158,8 @@ function createMockPageController(opts = {}) {
               result: {
                 value: {
                   elements: [
-                    { ref: 's1e1', tag: 'BUTTON', distance: 10 },
-                    { ref: 's1e2', tag: 'A', distance: 25 }
+                    { ref: 'f0s1e1', tag: 'BUTTON', distance: 10 },
+                    { ref: 'f0s1e2', tag: 'A', distance: 25 }
                   ],
                   searchCenter: { x: 100, y: 100 },
                   searchRadius: 50
@@ -249,7 +249,7 @@ describe('executeSnapshot', () => {
     const result = await executeSnapshot(ariaSnapshot, true);
 
     assert.strictEqual(result.yaml, '- button "Submit"');
-    assert.deepStrictEqual(result.refs, { 's1e1': 'ref-data' });
+    assert.deepStrictEqual(result.refs, { 'f0s1e1': 'ref-data' });
     assert.strictEqual(result.snapshotId, 1);
     assert.ok(result.stats);
   });
@@ -403,14 +403,14 @@ describe('executeGetDom', () => {
 describe('executeGetBox', () => {
   it('should throw if ariaSnapshot is null', async () => {
     await assert.rejects(
-      async () => executeGetBox(null, 's1e1'),
+      async () => executeGetBox(null, 'f0s1e1'),
       /ariaSnapshot is required/
     );
   });
 
   it('should get box for single ref string', async () => {
     const ariaSnapshot = createMockAriaSnapshot();
-    const result = await executeGetBox(ariaSnapshot, 's1e1');
+    const result = await executeGetBox(ariaSnapshot, 'f0s1e1');
 
     assert.strictEqual(result.x, 100);
     assert.strictEqual(result.y, 200);
@@ -422,40 +422,40 @@ describe('executeGetBox', () => {
 
   it('should get boxes for array of refs', async () => {
     const ariaSnapshot = createMockAriaSnapshot();
-    const result = await executeGetBox(ariaSnapshot, ['s1e1', 's1e2']);
+    const result = await executeGetBox(ariaSnapshot, ['f0s1e1', 'f0s1e2']);
 
-    assert.ok(result.s1e1);
-    assert.ok(result.s1e2);
-    assert.strictEqual(result.s1e1.x, 100);
-    assert.strictEqual(result.s1e2.x, 100);
+    assert.ok(result.f0s1e1);
+    assert.ok(result.f0s1e2);
+    assert.strictEqual(result.f0s1e1.x, 100);
+    assert.strictEqual(result.f0s1e2.x, 100);
   });
 
   it('should handle ref object with refs array', async () => {
     const ariaSnapshot = createMockAriaSnapshot();
-    const result = await executeGetBox(ariaSnapshot, { refs: ['s1e1', 's1e2'] });
+    const result = await executeGetBox(ariaSnapshot, { refs: ['f0s1e1', 'f0s1e2'] });
 
     // When multiple refs, returns object with ref keys
-    assert.ok(result.s1e1);
-    assert.strictEqual(result.s1e1.x, 100);
+    assert.ok(result.f0s1e1);
+    assert.strictEqual(result.f0s1e1.x, 100);
   });
 
   it('should handle ref object with single ref', async () => {
     const ariaSnapshot = createMockAriaSnapshot();
-    const result = await executeGetBox(ariaSnapshot, { ref: 's1e1' });
+    const result = await executeGetBox(ariaSnapshot, { ref: 'f0s1e1' });
 
     assert.strictEqual(result.x, 100);
   });
 
   it('should return error for not found ref', async () => {
     const ariaSnapshot = createMockAriaSnapshot({ refNotFound: true });
-    const result = await executeGetBox(ariaSnapshot, 's1e999');
+    const result = await executeGetBox(ariaSnapshot, 'f0s1e999');
 
     assert.strictEqual(result.error, 'not found');
   });
 
   it('should return stale error for stale ref', async () => {
     const ariaSnapshot = createMockAriaSnapshot({ refStale: true });
-    const result = await executeGetBox(ariaSnapshot, 's1e998');
+    const result = await executeGetBox(ariaSnapshot, 'f0s1e998');
 
     assert.strictEqual(result.error, 'stale');
     assert.ok(result.message.includes('no longer in DOM'));
@@ -463,7 +463,7 @@ describe('executeGetBox', () => {
 
   it('should return hidden error for hidden element', async () => {
     const ariaSnapshot = createMockAriaSnapshot({ refHidden: true });
-    const result = await executeGetBox(ariaSnapshot, 's1e997');
+    const result = await executeGetBox(ariaSnapshot, 'f0s1e997');
 
     assert.strictEqual(result.error, 'hidden');
     assert.ok(result.box);
@@ -487,11 +487,11 @@ describe('executeGetBox', () => {
 
   it('should handle mixed results for multiple refs', async () => {
     const ariaSnapshot = createMockAriaSnapshot();
-    const result = await executeGetBox(ariaSnapshot, ['s1e1', 's1e999', 's1e998']);
+    const result = await executeGetBox(ariaSnapshot, ['f0s1e1', 'f0s1e999', 'f0s1e998']);
 
-    assert.ok(result.s1e1.x);
-    assert.strictEqual(result.s1e999.error, 'not found');
-    assert.strictEqual(result.s1e998.error, 'stale');
+    assert.ok(result.f0s1e1.x);
+    assert.strictEqual(result.f0s1e999.error, 'not found');
+    assert.strictEqual(result.f0s1e998.error, 'stale');
   });
 });
 
@@ -504,7 +504,7 @@ describe('executeRefAt', () => {
     const session = createMockPageController({ refAt: true }).session;
     const result = await executeRefAt(session, { x: 100, y: 200 });
 
-    assert.strictEqual(result.ref, 's1e1');
+    assert.strictEqual(result.ref, 'f0s1e1');
     assert.strictEqual(result.tag, 'BUTTON');
     assert.strictEqual(result.clickable, true);
     assert.strictEqual(result.existing, false);
@@ -553,8 +553,8 @@ describe('executeElementsAt', () => {
 
     assert.ok(result.results);
     assert.strictEqual(result.results.length, 2);
-    assert.strictEqual(result.results[0].ref, 's1e1');
-    assert.strictEqual(result.results[1].ref, 's1e2');
+    assert.strictEqual(result.results[0].ref, 'f0s1e1');
+    assert.strictEqual(result.results[1].ref, 'f0s1e2');
   });
 
   it('should handle empty coordinates array', async () => {