fix: Use browser.$() for element instead of $()

Author: Winify

src/recording/code-generator.ts

@@ -78,25 +78,25 @@ function generateStep(step: RecordedStep): string {
     case 'navigate':
       return `await browser.url('${escapeStr(p.url)}');`;
     case 'click_element':
-      return `await $('${escapeStr(p.selector)}').click();`;
+      return `await browser.$('${escapeStr(p.selector)}').click();`;
     case 'set_value':
-      return `await $('${escapeStr(p.selector)}').setValue('${escapeStr(p.value)}');`;
+      return `await browser.$('${escapeStr(p.selector)}').setValue('${escapeStr(p.value)}');`;
     case 'scroll': {
       const scrollAmount = (p.direction as string) === 'down' ? (p.pixels as number) : -(p.pixels as number);
       return `await browser.execute(() => window.scrollBy(0, ${scrollAmount}));`;
     }
     case 'tap_element':
       if (p.selector !== undefined) {
-        return `await $('${escapeStr(p.selector)}').click();`;
+        return `await browser.$('${escapeStr(p.selector)}').click();`;
       }
       return `await browser.tap({ x: ${p.x}, y: ${p.y} });`;
     case 'swipe':
       return `await browser.execute('mobile: swipe', { direction: '${escapeStr(p.direction)}' });`;
     case 'drag_and_drop':
       if (p.targetSelector !== undefined) {
-        return `await $('${escapeStr(p.sourceSelector)}').dragAndDrop($('${escapeStr(p.targetSelector)}'));`;
+        return `await browser.$('${escapeStr(p.sourceSelector)}').dragAndDrop(browser.$('${escapeStr(p.targetSelector)}'));`;
       }
-      return `await $('${escapeStr(p.sourceSelector)}').dragAndDrop({ x: ${p.x}, y: ${p.y} });`;
+      return `await browser.$('${escapeStr(p.sourceSelector)}').dragAndDrop({ x: ${p.x}, y: ${p.y} });`;
     default:
       return `// [unknown tool] ${step.tool}`;
   }

tests/recording/code-generator.test.ts

@@ -95,12 +95,12 @@ describe('generateCode - tool mappings', () => {
 
   it('click_element → $().click()', () => {
     const code = generateCode(makeHistory([{ tool: 'click_element', params: { selector: '#btn' } }]));
-    expect(code).toContain("await $('#btn').click();");
+    expect(code).toContain("await browser.$('#btn').click();");
   });
 
   it('set_value → $().setValue()', () => {
     const code = generateCode(makeHistory([{ tool: 'set_value', params: { selector: '#input', value: 'hello' } }]));
-    expect(code).toContain("await $('#input').setValue('hello');");
+    expect(code).toContain("await browser.$('#input').setValue('hello');");
   });
 
   it('scroll down → positive scrollBy', () => {
@@ -115,7 +115,7 @@ describe('generateCode - tool mappings', () => {
 
   it('tap_element (selector form) → $().click()', () => {
     const code = generateCode(makeHistory([{ tool: 'tap_element', params: { selector: '~btn' } }]));
-    expect(code).toContain("await $('~btn').click();");
+    expect(code).toContain("await browser.$('~btn').click();");
   });
 
   it('tap_element (coordinate form) → browser.tap()', () => {
@@ -133,15 +133,15 @@ describe('generateCode - tool mappings', () => {
       tool: 'drag_and_drop',
       params: { sourceSelector: '#from', targetSelector: '#to' },
     }]));
-    expect(code).toContain("await $('#from').dragAndDrop($('#to'));");
+    expect(code).toContain("await browser.$('#from').dragAndDrop(browser.$('#to'));");
   });
 
   it('drag_and_drop (coordinate form) → $().dragAndDrop({ x, y })', () => {
     const code = generateCode(makeHistory([{
       tool: 'drag_and_drop',
       params: { sourceSelector: '#from', x: 50, y: 75 },
     }]));
-    expect(code).toContain("await $('#from').dragAndDrop({ x: 50, y: 75 });");
+    expect(code).toContain("await browser.$('#from').dragAndDrop({ x: 50, y: 75 });");
   });
 });