cdp-skill 1.0.8 → 1.0.15

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

@@ -30,9 +30,7 @@ describe('ContextHelpers', () => {
     });
 
     it('should contain form step types', () => {
-      assert.ok(STEP_TYPES.includes('fillForm'));
-      assert.ok(STEP_TYPES.includes('type'));
-      assert.ok(STEP_TYPES.includes('select'));
+      assert.ok(STEP_TYPES.includes('selectText'));
       assert.ok(STEP_TYPES.includes('selectOption'));
       assert.ok(STEP_TYPES.includes('submit'));
     });
@@ -40,19 +38,31 @@ describe('ContextHelpers', () => {
     it('should contain tab step types', () => {
       assert.ok(STEP_TYPES.includes('listTabs'));
       assert.ok(STEP_TYPES.includes('closeTab'));
-      assert.ok(STEP_TYPES.includes('openTab'));
+      assert.ok(STEP_TYPES.includes('newTab'));
+      assert.ok(STEP_TYPES.includes('switchTab'));
     });
 
-    it('should contain iframe step types', () => {
-      assert.ok(STEP_TYPES.includes('switchToFrame'));
-      assert.ok(STEP_TYPES.includes('switchToMainFrame'));
-      assert.ok(STEP_TYPES.includes('listFrames'));
+    it('should contain unified frame step', () => {
+      assert.ok(STEP_TYPES.includes('frame'));
+      assert.ok(!STEP_TYPES.includes('switchToFrame'));
+      assert.ok(!STEP_TYPES.includes('switchToMainFrame'));
+      assert.ok(!STEP_TYPES.includes('listFrames'));
     });
 
-    it('should contain coordinate-based step types', () => {
-      assert.ok(STEP_TYPES.includes('refAt'));
+    it('should contain unified elementsAt step', () => {
       assert.ok(STEP_TYPES.includes('elementsAt'));
-      assert.ok(STEP_TYPES.includes('elementsNear'));
+      assert.ok(!STEP_TYPES.includes('refAt'));
+      assert.ok(!STEP_TYPES.includes('elementsNear'));
+    });
+
+    it('should contain sleep step', () => {
+      assert.ok(STEP_TYPES.includes('sleep'));
+    });
+
+    it('should not contain removed steps', () => {
+      assert.ok(!STEP_TYPES.includes('fillForm'));
+      assert.ok(!STEP_TYPES.includes('fillActive'));
+      assert.ok(!STEP_TYPES.includes('eval'));
     });
   });
 
@@ -65,7 +75,6 @@ describe('ContextHelpers', () => {
       assert.ok(VISUAL_ACTIONS.includes('goto'));
       assert.ok(VISUAL_ACTIONS.includes('click'));
       assert.ok(VISUAL_ACTIONS.includes('fill'));
-      assert.ok(VISUAL_ACTIONS.includes('type'));
       assert.ok(VISUAL_ACTIONS.includes('hover'));
       assert.ok(VISUAL_ACTIONS.includes('press'));
       assert.ok(VISUAL_ACTIONS.includes('scroll'));
@@ -76,14 +85,16 @@ describe('ContextHelpers', () => {
       assert.ok(VISUAL_ACTIONS.includes('query'));
       assert.ok(VISUAL_ACTIONS.includes('queryAll'));
       assert.ok(VISUAL_ACTIONS.includes('inspect'));
-      assert.ok(VISUAL_ACTIONS.includes('eval'));
-      assert.ok(VISUAL_ACTIONS.includes('extract'));
+      assert.ok(VISUAL_ACTIONS.includes('pageFunction'));
+      assert.ok(VISUAL_ACTIONS.includes('get'));
     });
 
     it('should not contain non-visual actions', () => {
       assert.ok(!VISUAL_ACTIONS.includes('cookies'));
       assert.ok(!VISUAL_ACTIONS.includes('listTabs'));
       assert.ok(!VISUAL_ACTIONS.includes('closeTab'));
+      assert.ok(!VISUAL_ACTIONS.includes('eval'));
+      assert.ok(!VISUAL_ACTIONS.includes('fillForm'));
     });
   });
 
@@ -122,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', () => {
@@ -165,11 +176,6 @@ describe('ContextHelpers', () => {
         assert.strictEqual(result, 'Typed in "Email"');
       });
 
-      it('should describe type with selector', () => {
-        const result = buildActionContext('type', { selector: '#search' }, {});
-        assert.strictEqual(result, 'Typed in #search');
-      });
-
       it('should return generic for no params', () => {
         const result = buildActionContext('fill', {}, {});
         assert.strictEqual(result, 'Typed in input');
@@ -222,10 +228,6 @@ describe('ContextHelpers', () => {
       assert.strictEqual(result, 'Typed');
     });
 
-    it('should return Typed for type step', () => {
-      const result = buildCommandContext([{ type: { selector: '#input', text: 'test' } }]);
-      assert.strictEqual(result, 'Typed');
-    });
 
     it('should return Pressed key for press step', () => {
       const result = buildCommandContext([{ press: 'Enter' }]);
@@ -237,13 +239,13 @@ describe('ContextHelpers', () => {
       assert.strictEqual(result, 'Navigated');
     });
 
-    it('should return Navigated for openTab step', () => {
-      const result = buildCommandContext([{ openTab: 'https://example.com' }]);
+    it('should return Navigated for newTab step', () => {
+      const result = buildCommandContext([{ newTab: 'https://example.com' }]);
       assert.strictEqual(result, 'Navigated');
     });
 
-    it('should return Selected for select step', () => {
-      const result = buildCommandContext([{ select: '#dropdown' }]);
+    it('should return Selected for selectText step', () => {
+      const result = buildCommandContext([{ selectText: '#dropdown' }]);
       assert.strictEqual(result, 'Selected');
     });
 
@@ -282,7 +284,16 @@ describe('ContextHelpers', () => {
       mockPageController = {
         session: {
           send: mock.fn(async () => ({ result: { value: '' } }))
-        }
+        },
+        evaluateInFrame: mock.fn(async (expression, options = {}) => {
+          const params = {
+            expression,
+            returnByValue: options.returnByValue !== false,
+            awaitPromise: options.awaitPromise || false
+          };
+          return mockPageController.session.send('Runtime.evaluate', params);
+        }),
+        getFrameContext: mock.fn(() => null)
       };
     });