cdp-skill 1.0.14 → 1.0.16

package/src/tests/FillExecutor.test.js

@@ -126,9 +126,24 @@ describe('FillExecutor', () => {
     it('should fill by ref', async () => {
       mockSession.send = mock.fn(async (method, params) => {
         if (method === 'Runtime.evaluate') {
+          // LazyResolver: queries __ariaRefMeta for metadata
+          if (params?.expression?.includes('__ariaRefMeta') && params?.expression?.includes('get')) {
+            return { result: { value: { selector: '#input', role: 'textbox', name: 'Username' } } };
+          }
+          // LazyResolver: element found
+          if (params?.expression?.includes('found') && params?.expression?.includes('box')) {
+            return { result: { value: { found: true, box: { x: 50, y: 50, width: 200, height: 30 } } } };
+          }
+          if (params?.expression?.includes('querySelector')) {
+            return { result: { objectId: 'obj-123' } };
+          }
           return { result: { objectId: 'obj-123' } };
         }
         if (method === 'Runtime.callFunctionOn') {
+          // Visibility and box check after lazy resolution
+          if (params?.functionDeclaration?.includes('getComputedStyle') && params?.functionDeclaration?.includes('isVisible')) {
+            return { result: { value: { isVisible: true, box: { x: 50, y: 50, width: 200, height: 30 } } } };
+          }
           if (params?.functionDeclaration?.includes('scrollIntoView')) {
             return { result: {} };
           }
@@ -143,18 +158,32 @@ describe('FillExecutor', () => {
         return {};
       });
 
-      const result = await executor.execute({ ref: 's1e1', value: 'ref value' });
+      const result = await executor.execute({ ref: 'f0s1e1', value: 'ref value' });
       assert.strictEqual(result.filled, true);
-      assert.strictEqual(result.ref, 's1e1');
+      assert.strictEqual(result.ref, 'f0s1e1');
       assert.strictEqual(result.method, 'insertText');
     });
 
     it('should detect ref from selector pattern', async () => {
       mockSession.send = mock.fn(async (method, params) => {
         if (method === 'Runtime.evaluate') {
+          // LazyResolver: queries __ariaRefMeta for metadata
+          if (params?.expression?.includes('__ariaRefMeta') && params?.expression?.includes('get')) {
+            return { result: { value: { selector: '#input', role: 'textbox', name: 'Username' } } };
+          }
+          // LazyResolver: element found
+          if (params?.expression?.includes('found') && params?.expression?.includes('box')) {
+            return { result: { value: { found: true, box: { x: 50, y: 50, width: 200, height: 30 } } } };
+          }
+          if (params?.expression?.includes('querySelector')) {
+            return { result: { objectId: 'obj-123' } };
+          }
           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: 200, height: 30 } } } };
+          }
           if (params?.functionDeclaration?.includes('scrollIntoView')) {
             return { result: {} };
           }
@@ -166,9 +195,9 @@ describe('FillExecutor', () => {
         return {};
       });
 
-      const result = await executor.execute({ selector: 's1e5', value: 'test' });
+      const result = await executor.execute({ selector: 'f0s1e5', value: 'test' });
       assert.strictEqual(result.filled, true);
-      assert.strictEqual(result.ref, 's1e5');
+      assert.strictEqual(result.ref, 'f0s1e5');
     });
 
     it('should fill by label', async () => {
@@ -441,9 +470,23 @@ describe('FillExecutor', () => {
     it('should handle refs in batch', async () => {
       mockSession.send = mock.fn(async (method, params) => {
         if (method === 'Runtime.evaluate') {
+          // LazyResolver: queries __ariaRefMeta for metadata
+          if (params?.expression?.includes('__ariaRefMeta') && params?.expression?.includes('get')) {
+            return { result: { value: { selector: '#input', role: 'textbox', name: 'Input' } } };
+          }
+          // LazyResolver: element found
+          if (params?.expression?.includes('found') && params?.expression?.includes('box')) {
+            return { result: { value: { found: true, box: { x: 50, y: 50, width: 200, height: 30 } } } };
+          }
+          if (params?.expression?.includes('querySelector')) {
+            return { result: { objectId: 'obj-123' } };
+          }
           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: 200, height: 30 } } } };
+          }
           if (params?.functionDeclaration?.includes('scrollIntoView')) {
             return { result: {} };
           }
@@ -456,8 +499,8 @@ describe('FillExecutor', () => {
       });
 
       const result = await executor.executeBatch({
-        's1e1': 'value1',
-        's1e2': 'value2'
+        'f0s1e1': 'value1',
+        'f0s1e2': 'value2'
       });
 
       assert.strictEqual(result.total, 2);
@@ -466,45 +509,54 @@ describe('FillExecutor', () => {
   });
 
   describe('ref-based fill edge cases', () => {
-    it('should require ariaSnapshot for ref-based fills', async () => {
-      const noAriaExecutor = createFillExecutor(mockSession, mockElementLocator, mockInputEmulator);
-
-      // Without ariaSnapshot, the fill by ref won't work because ref requires ariaSnapshot
-      // The executor treats ref: 's1e1' as needing ariaSnapshot
-      await assert.rejects(
-        () => noAriaExecutor.execute({ ref: 's1e1', value: 'test' }),
-        (err) => {
-          // May fail with "requires selector, ref, or label" because ref is only valid with ariaSnapshot
-          return err.message.includes('requires') || err.message.includes('ariaSnapshot');
+    it('should throw when ref element cannot be resolved (lazy resolution)', async () => {
+      // LazyResolver returns null when metadata not found
+      mockSession.send = mock.fn(async (method, params) => {
+        if (method === 'Runtime.evaluate') {
+          if (params?.expression?.includes('__ariaRefMeta')) {
+            return { result: { value: null } };
+          }
+          return { result: { value: null } };
         }
-      );
-    });
-
-    it('should throw when ref element is stale', async () => {
-      mockAriaSnapshot.getElementByRef = mock.fn(async () => ({
-        box: { x: 50, y: 50, width: 200, height: 30 },
-        isVisible: true,
-        stale: true
-      }));
+        return {};
+      });
 
       await assert.rejects(
-        () => executor.execute({ ref: 's1e1', value: 'test' }),
+        () => executor.execute({ ref: 'f0s1e1', value: 'test' }),
         (err) => {
-          assert.ok(err.message.includes('no longer attached'));
-          return true;
+          return err.message.includes('not found');
         }
       );
     });
 
     it('should throw when ref element is not visible', async () => {
-      mockAriaSnapshot.getElementByRef = mock.fn(async () => ({
-        box: { x: 50, y: 50, width: 200, height: 30 },
-        isVisible: false,
-        stale: false
-      }));
+      mockSession.send = mock.fn(async (method, params) => {
+        if (method === 'Runtime.evaluate') {
+          // LazyResolver: metadata found
+          if (params?.expression?.includes('__ariaRefMeta') && params?.expression?.includes('get')) {
+            return { result: { value: { selector: '#input', role: 'textbox', name: 'Input' } } };
+          }
+          // LazyResolver: element found
+          if (params?.expression?.includes('found') && params?.expression?.includes('box')) {
+            return { result: { value: { found: true, box: { x: 50, y: 50, width: 200, height: 30 } } } };
+          }
+          if (params?.expression?.includes('querySelector')) {
+            return { result: { objectId: 'obj-123' } };
+          }
+          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: 200, height: 30 } } } };
+          }
+          return { result: { value: { editable: true } } };
+        }
+        return {};
+      });
 
       await assert.rejects(
-        () => executor.execute({ ref: 's1e1', value: 'test' }),
+        () => executor.execute({ ref: 'f0s1e1', value: 'test' }),
         (err) => {
           assert.ok(err.message.includes('not visible'));
           return true;
@@ -516,7 +568,7 @@ describe('FillExecutor', () => {
       mockAriaSnapshot.getElementByRef = mock.fn(async () => null);
 
       await assert.rejects(
-        () => executor.execute({ ref: 's1e99', value: 'test' }),
+        () => executor.execute({ ref: 'f0s1e99', value: 'test' }),
         (err) => {
           assert.ok(err.message.includes('not found'));
           return true;

package/src/tests/LazyResolver.test.js

@@ -0,0 +1,383 @@
+import { describe, it, beforeEach, mock } from 'node:test';
+import assert from 'node:assert';
+import { createLazyResolver } from '../dom/LazyResolver.js';
+
+describe('LazyResolver', () => {
+  let mockSession;
+  let resolver;
+
+  beforeEach(() => {
+    mockSession = {
+      send: mock.fn()
+    };
+    resolver = createLazyResolver(mockSession);
+  });
+
+  describe('createLazyResolver', () => {
+    it('should throw if session is not provided', () => {
+      assert.throws(() => createLazyResolver(null), /CDP session is required/);
+    });
+
+    it('should create a resolver with all methods', () => {
+      assert.ok(typeof resolver.resolveRef === 'function');
+      assert.ok(typeof resolver.resolveSelector === 'function');
+      assert.ok(typeof resolver.resolveText === 'function');
+      assert.ok(typeof resolver.resolveByRoleAndName === 'function');
+      assert.ok(typeof resolver.resolveThroughShadowDOM === 'function');
+    });
+  });
+
+  describe('resolveSelector', () => {
+    it('should return null for empty selector', async () => {
+      const result = await resolver.resolveSelector('');
+      assert.strictEqual(result, null);
+    });
+
+    it('should return null for non-string selector', async () => {
+      const result = await resolver.resolveSelector(123);
+      assert.strictEqual(result, null);
+    });
+
+    it('should return null when element not found', async () => {
+      mockSession.send.mock.mockImplementation((method) => {
+        if (method === 'Runtime.evaluate') {
+          return { result: { value: null } };
+        }
+      });
+
+      const result = await resolver.resolveSelector('#nonexistent');
+      assert.strictEqual(result, null);
+    });
+
+    it('should return objectId and box when element found', async () => {
+      let callCount = 0;
+      mockSession.send.mock.mockImplementation((method) => {
+        callCount++;
+        if (method === 'Runtime.evaluate') {
+          if (callCount === 1) {
+            // First call - check existence and get box
+            return {
+              result: {
+                value: { found: true, box: { x: 10, y: 20, width: 100, height: 50 } }
+              }
+            };
+          } else {
+            // Second call - get objectId
+            return {
+              result: { objectId: 'obj-123' }
+            };
+          }
+        }
+      });
+
+      const result = await resolver.resolveSelector('#myButton');
+      assert.ok(result);
+      assert.strictEqual(result.objectId, 'obj-123');
+      assert.deepStrictEqual(result.box, { x: 10, y: 20, width: 100, height: 50 });
+      assert.strictEqual(result.resolvedBy, 'selector');
+    });
+
+    it('should handle CDP errors gracefully', async () => {
+      mockSession.send.mock.mockImplementation(() => {
+        throw new Error('CDP connection lost');
+      });
+
+      const result = await resolver.resolveSelector('#myButton');
+      assert.strictEqual(result, null);
+    });
+  });
+
+  describe('resolveRef', () => {
+    it('should return null for empty ref', async () => {
+      const result = await resolver.resolveRef('');
+      assert.strictEqual(result, null);
+    });
+
+    it('should return null for non-string ref', async () => {
+      const result = await resolver.resolveRef(123);
+      assert.strictEqual(result, null);
+    });
+
+    it('should return null when metadata not found', async () => {
+      mockSession.send.mock.mockImplementation(() => {
+        return { result: { value: null } };
+      });
+
+      const result = await resolver.resolveRef('f0s1e5');
+      assert.strictEqual(result, null);
+    });
+
+    it('should resolve by selector from metadata', async () => {
+      let callCount = 0;
+      mockSession.send.mock.mockImplementation((method, params) => {
+        callCount++;
+        if (method === 'Runtime.evaluate') {
+          if (callCount === 1) {
+            // First call - get metadata
+            return {
+              result: {
+                value: { selector: '#submitBtn', role: 'button', name: 'Submit' }
+              }
+            };
+          } else if (callCount === 2) {
+            // Second call - check element exists
+            return {
+              result: {
+                value: { found: true, box: { x: 100, y: 200, width: 80, height: 30 } }
+              }
+            };
+          } else {
+            // Third call - get objectId
+            return {
+              result: { objectId: 'resolved-obj-456' }
+            };
+          }
+        }
+      });
+
+      const result = await resolver.resolveRef('f0s1e5');
+      assert.ok(result);
+      assert.strictEqual(result.objectId, 'resolved-obj-456');
+      assert.strictEqual(result.ref, 'f0s1e5');
+      assert.strictEqual(result.resolvedBy, 'selector');
+    });
+
+    it('should fall back to role+name search when selector fails', async () => {
+      let callCount = 0;
+      mockSession.send.mock.mockImplementation((method) => {
+        callCount++;
+        if (method === 'Runtime.evaluate') {
+          if (callCount === 1) {
+            // Get metadata
+            return {
+              result: {
+                value: { selector: '#oldId', role: 'button', name: 'Submit' }
+              }
+            };
+          } else if (callCount === 2) {
+            // Selector check - fails (element not found)
+            return { result: { value: null } };
+          } else if (callCount === 3) {
+            // Role+name search - succeeds
+            return {
+              result: {
+                value: { found: true, box: { x: 50, y: 60, width: 100, height: 40 }, index: 0 }
+              }
+            };
+          } else {
+            // Get objectId via role+name
+            return {
+              result: { objectId: 'fallback-obj-789' }
+            };
+          }
+        }
+      });
+
+      const result = await resolver.resolveRef('f0s1e5');
+      assert.ok(result);
+      assert.strictEqual(result.objectId, 'fallback-obj-789');
+      assert.strictEqual(result.resolvedBy, 'role+name');
+    });
+  });
+
+  describe('resolveByRoleAndName', () => {
+    it('should return null for empty role', async () => {
+      const result = await resolver.resolveByRoleAndName('', 'test');
+      assert.strictEqual(result, null);
+    });
+
+    it('should find element by role and name', async () => {
+      let callCount = 0;
+      mockSession.send.mock.mockImplementation((method) => {
+        callCount++;
+        if (method === 'Runtime.evaluate') {
+          if (callCount === 1) {
+            return {
+              result: {
+                value: { found: true, box: { x: 10, y: 20, width: 100, height: 50 }, index: 2 }
+              }
+            };
+          } else {
+            return {
+              result: { objectId: 'role-obj-123' }
+            };
+          }
+        }
+      });
+
+      const result = await resolver.resolveByRoleAndName('button', 'Save');
+      assert.ok(result);
+      assert.strictEqual(result.objectId, 'role-obj-123');
+      assert.strictEqual(result.resolvedBy, 'role+name');
+      assert.strictEqual(result.role, 'button');
+      assert.strictEqual(result.name, 'Save');
+    });
+  });
+
+  describe('resolveThroughShadowDOM', () => {
+    it('should return null for empty shadow host path', async () => {
+      const result = await resolver.resolveThroughShadowDOM([], '#button');
+      assert.strictEqual(result, null);
+    });
+
+    it('should resolve element through shadow DOM', async () => {
+      let callCount = 0;
+      mockSession.send.mock.mockImplementation((method) => {
+        callCount++;
+        if (method === 'Runtime.evaluate') {
+          if (callCount === 1) {
+            return {
+              result: {
+                value: { found: true, box: { x: 30, y: 40, width: 80, height: 30 } }
+              }
+            };
+          } else {
+            return {
+              result: { objectId: 'shadow-obj-999' }
+            };
+          }
+        }
+      });
+
+      const result = await resolver.resolveThroughShadowDOM(['#host1', '#host2'], '.inner-button');
+      assert.ok(result);
+      assert.strictEqual(result.objectId, 'shadow-obj-999');
+      assert.strictEqual(result.resolvedBy, 'shadow-dom');
+      assert.deepStrictEqual(result.shadowHostPath, ['#host1', '#host2']);
+    });
+  });
+
+  describe('resolveText', () => {
+    it('should return null for empty text', async () => {
+      const result = await resolver.resolveText('');
+      assert.strictEqual(result, null);
+    });
+
+    it('should return null for non-string text', async () => {
+      const result = await resolver.resolveText(123);
+      assert.strictEqual(result, null);
+    });
+
+    it('should find element by text', async () => {
+      let callCount = 0;
+      mockSession.send.mock.mockImplementation((method) => {
+        callCount++;
+        if (method === 'Runtime.evaluate') {
+          if (callCount === 1) {
+            return {
+              result: {
+                value: {
+                  found: true,
+                  box: { x: 100, y: 150, width: 120, height: 35 },
+                  selectors: 'button, input[type="button"]'
+                }
+              }
+            };
+          } else {
+            return {
+              result: { objectId: 'text-obj-555' }
+            };
+          }
+        }
+      });
+
+      const result = await resolver.resolveText('Submit Form');
+      assert.ok(result);
+      assert.strictEqual(result.objectId, 'text-obj-555');
+      assert.strictEqual(result.resolvedBy, 'text');
+      assert.strictEqual(result.text, 'Submit Form');
+    });
+  });
+
+  describe('frame context support', () => {
+    it('should include contextId in eval params when getFrameContext returns a value', async () => {
+      const getFrameContext = () => 12345;
+      const resolverWithFrame = createLazyResolver(mockSession, { getFrameContext });
+
+      mockSession.send.mock.mockImplementation((method, params) => {
+        if (method === 'Runtime.evaluate') {
+          // Verify contextId is included
+          assert.strictEqual(params.contextId, 12345);
+          return { result: { value: null } };
+        }
+      });
+
+      await resolverWithFrame.resolveSelector('#test');
+      assert.ok(mockSession.send.mock.calls.length > 0);
+    });
+
+    it('should not include contextId when getFrameContext returns null', async () => {
+      const getFrameContext = () => null;
+      const resolverWithFrame = createLazyResolver(mockSession, { getFrameContext });
+
+      mockSession.send.mock.mockImplementation((method, params) => {
+        if (method === 'Runtime.evaluate') {
+          // Verify contextId is NOT included
+          assert.strictEqual(params.contextId, undefined);
+          return { result: { value: null } };
+        }
+      });
+
+      await resolverWithFrame.resolveSelector('#test');
+      assert.ok(mockSession.send.mock.calls.length > 0);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle selector returning subtype null', async () => {
+      mockSession.send.mock.mockImplementation((method) => {
+        if (method === 'Runtime.evaluate') {
+          return {
+            result: { value: { found: true, box: { x: 0, y: 0, width: 0, height: 0 } } }
+          };
+        }
+      });
+
+      // Mock second call to return null subtype
+      let firstCall = true;
+      mockSession.send.mock.mockImplementation(() => {
+        if (firstCall) {
+          firstCall = false;
+          return {
+            result: { value: { found: true, box: { x: 0, y: 0, width: 10, height: 10 } } }
+          };
+        }
+        return { result: { subtype: 'null' } };
+      });
+
+      const result = await resolver.resolveSelector('#test');
+      assert.strictEqual(result, null);
+    });
+
+    it('should handle metadata with shadowHostPath', async () => {
+      let callCount = 0;
+      mockSession.send.mock.mockImplementation(() => {
+        callCount++;
+        if (callCount === 1) {
+          // Metadata with shadow path
+          return {
+            result: {
+              value: {
+                selector: '.shadow-button',
+                role: 'button',
+                name: 'Click',
+                shadowHostPath: ['#shadow-host']
+              }
+            }
+          };
+        } else if (callCount === 2) {
+          // Shadow DOM resolution succeeds
+          return {
+            result: { value: { found: true, box: { x: 10, y: 20, width: 50, height: 30 } } }
+          };
+        } else {
+          return { result: { objectId: 'shadow-resolved-obj' } };
+        }
+      });
+
+      const result = await resolver.resolveRef('f0s2e3');
+      assert.ok(result);
+      assert.strictEqual(result.objectId, 'shadow-resolved-obj');
+    });
+  });
+});

package/src/tests/StepValidator.test.js

@@ -170,7 +170,7 @@ describe('StepValidator', () => {
       });
 
       it('should accept object with ref', () => {
-        const errors = validateStepInternal({ click: { ref: 's1e1' } });
+        const errors = validateStepInternal({ click: { ref: 'f0s1e1' } });
         assert.strictEqual(errors.length, 0);
       });
 
@@ -224,7 +224,7 @@ describe('StepValidator', () => {
       });
 
       it('should accept object with ref and value', () => {
-        const errors = validateStepInternal({ fill: { ref: 's1e1', value: 'test' } });
+        const errors = validateStepInternal({ fill: { ref: 'f0s1e1', value: 'test' } });
         assert.strictEqual(errors.length, 0);
       });
 

package/src/tests/TestRunner.test.js

@@ -603,7 +603,7 @@ describe('TestRunner', () => {
     });
 
     it('should accept fill with ref instead of selector', () => {
-      const steps = [{ fill: { ref: 's1e3', value: 'test' } }];
+      const steps = [{ fill: { ref: 'f0s1e3', value: 'test' } }];
 
       const result = testRunner.validateSteps(steps);
       assert.strictEqual(result.valid, true);
@@ -716,7 +716,7 @@ describe('TestRunner', () => {
     });
 
     it('should accept valid hover with ref', () => {
-      const result = validateSteps([{ hover: { ref: 's1e4' } }]);
+      const result = validateSteps([{ hover: { ref: 'f0s1e4' } }]);
       assert.strictEqual(result.valid, true);
     });