Frame switches (#52)

* added frame switches recording

Signed-off-by: aryangupta701 <[email protected]>

source/ContentScript/recorder.ts

@@ -24,6 +24,7 @@ import {
   ZestStatementElementClick,
   ZestStatementElementSendKeys,
   ZestStatementLaunchBrowser,
+  ZestStatementSwichToFrame,
 } from '../types/zestScript/ZestStatement';
 import {getPath} from './util';
 
@@ -45,38 +46,23 @@ class Recorder {
     });
   }
 
-  handleFrameSwitches(level: number, frame: number): void {
-    if (this.curLevel === level && this.curFrame === frame) {
-      // do nothing
-    } else if (this.curLevel > level) {
+  handleFrameSwitches(level: number, frameIndex: number): void {
+    if (this.curLevel === level && this.curFrame === frameIndex) {
+      return;
+    }
+    if (this.curLevel > level) {
       while (this.curLevel > level) {
+        this.sendZestScriptToZAP(new ZestStatementSwichToFrame(-1));
         this.curLevel -= 1;
-        console.log(
-          'Switched to level: ',
-          this.curLevel,
-          'Frame:',
-          this.curFrame
-        );
-        // switch to parent frame
       }
-      this.curFrame = frame;
-      console.log(
-        'Switched to level: ',
-        this.curLevel,
-        'Frame:',
-        this.curFrame
-      );
-      // switch to frame
+      this.curFrame = frameIndex;
     } else {
       this.curLevel += 1;
-      this.curFrame = frame;
-      console.log(
-        'Switched to level: ',
-        this.curLevel,
-        'Frame:',
-        this.curFrame
-      );
-      // switch to frame number 'frame'
+      this.curFrame = frameIndex;
+      this.sendZestScriptToZAP(new ZestStatementSwichToFrame(frameIndex));
+    }
+    if (this.curLevel !== level) {
+      console.log('Error in switching frames');
     }
   }
 

source/types/zestScript/ZestStatement.ts

@@ -175,15 +175,30 @@ class ZestStatementWindowClose extends ZestStatement {
 class ZestStatementSwichToFrame extends ZestStatement {
   frameIndex: number;
 
-  constructor(frameIndex: number) {
-    super('ZestSwitchToFrame');
+  frameName: string;
+
+  windowHandle: string;
+
+  constructor(
+    frameIndex: number,
+    frameName = '',
+    windowHandle = 'windowHandle1'
+  ) {
+    super('ZestClientSwitchToFrame');
     this.frameIndex = frameIndex;
+    this.frameName = frameName;
+    this.windowHandle = windowHandle;
   }
 
   toJSON(): string {
     return JSON.stringify({
-      elementType: this.elementType,
+      windowHandle: this.windowHandle,
       frameIndex: this.frameIndex,
+      frameName: this.frameName,
+      parent: this.frameIndex === -1,
+      index: this.index,
+      enabled: true,
+      elementType: this.elementType,
     });
   }
 }

test/ContentScript/integrationTests.test.ts

@@ -218,6 +218,26 @@ function integrationTests(
       // Then
       expect(actualOutcome).toBe('test-name.zst');
     });
+
+    test('Should record frame switches', async () => {
+      // Given / When
+      server = getFakeZapServer(actualData, _JSONPORT);
+      const context = await driver.getContext(_JSONPORT, true);
+      await driver.setEnable(false);
+      const page = await context.newPage();
+      await page.goto(
+        `http://localhost:${_HTTPPORT}/webpages/interactions.html`
+      );
+      const frame = await page.frame('frame1');
+      frame?.click('#test-btn');
+      await page.waitForLoadState('networkidle');
+      await page.waitForTimeout(1000);
+      await page.close();
+      // Then
+      expect(JSON.stringify(Array.from(actualData))).toBe(
+        '["{\\"action\\":{\\"action\\":\\"reportZestScript\\"},\\"body\\":{\\"scriptJson\\":\\"{\\"windowHandle\\":\\"windowHandle1\\",\\"frameIndex\\":0,\\"frameName\\":\\"\\",\\"parent\\":false,\\"index\\":1,\\"enabled\\":true,\\"elementType\\":\\"ZestClientSwitchToFrame\\"}\\",\\"apikey\\":\\"not set\\"}}","{\\"action\\":{\\"action\\":\\"reportZestScript\\"},\\"body\\":{\\"scriptJson\\":\\"{\\"windowHandle\\":\\"windowHandle1\\",\\"type\\":\\"id\\",\\"element\\":\\"test-btn\\",\\"index\\":2,\\"enabled\\":true,\\"elementType\\":\\"ZestClientElementClick\\"}\\",\\"apikey\\":\\"not set\\"}}"]'
+      );
+    });
   }
 }
 

test/ContentScript/unitTests.test.ts

@@ -28,6 +28,7 @@ import {
   ElementLocator,
   ZestStatementElementClick,
   ZestStatementElementSendKeys,
+  ZestStatementSwichToFrame,
 } from '../../source/types/zestScript/ZestStatement';
 
 jest.mock('webextension-polyfill');
@@ -458,3 +459,14 @@ test('should return correct path for element with XPath', () => {
   expect(path2.type).toBe('xpath');
   expect(path2.element).toBe('/html/body/div/button[2]');
 });
+
+test('should generate valid frame switch statement', () => {
+  const zestStatementSwichToFrame = new ZestStatementSwichToFrame(
+    0,
+    'testvalue'
+  );
+
+  expect(zestStatementSwichToFrame.toJSON()).toBe(
+    '{"windowHandle":"windowHandle1","frameIndex":0,"frameName":"testvalue","parent":false,"index":-1,"enabled":true,"elementType":"ZestClientSwitchToFrame"}'
+  );
+});

test/ContentScript/webpages/interactions.html

@@ -5,5 +5,6 @@
         <button id="click">click me</button>
         <input type="text" id="input-1" /> 
         <input type="date" id="input-2" />
+        <iframe src="./testFrame.html" name="frame1"></iframe>
     </body>
 </html>

test/ContentScript/webpages/testFrame.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Document</title>
+</head>
+<body>
+    <button id="test-btn">Test ME</button>
+    <script>
+        const button = document.getElementById('test-btn'); 
+        button.addEventListener('click', ()=>{
+            button.after("Clicked !!!"); 
+        })
+    </script>
+</body>
+</html>

views/options.html

@@ -39,4 +39,4 @@ <h1>ZAP Browser Extension</h1>
     <script src="../../option.js"></script>
     For more info see <a href="https://github.com/zaproxy/browser-extension/">https://github.com/zaproxy/browser-extension/</a>
   </body>
-</html>
+</html>