feat(plugins): add frames to execute js

blakebyrnes · blakebyrnes · commit 65258a3fa6ad · 2021-12-10T14:37:41.000-05:00
diff --git a/client/lib/CoreFrameEnvironment.ts b/client/lib/CoreFrameEnvironment.ts
@@ -17,12 +17,18 @@ export default class CoreFrameEnvironment {
   public frameId: number;
   public sessionId: string;
   public commandQueue: CoreCommandQueue;
+  public parentFrameId: number;
 
-  constructor(meta: ISessionMeta & { sessionName: string }, commandQueue: CoreCommandQueue) {
+  constructor(
+    meta: ISessionMeta & { sessionName: string },
+    parentFrameId: number,
+    commandQueue: CoreCommandQueue,
+  ) {
     const { tabId, sessionId, frameId, sessionName } = meta;
     this.tabId = tabId;
     this.sessionId = sessionId;
     this.frameId = frameId;
+    this.parentFrameId = parentFrameId;
     const queueMeta = {
       sessionId,
       tabId,
diff --git a/client/lib/CoreTab.ts b/client/lib/CoreTab.ts
@@ -51,7 +51,10 @@ export default class CoreTab implements IJsPathEventTarget {
     this.commandQueue = new CoreCommandQueue(meta, connection, coreSession);
     this.coreSession = coreSession;
     this.eventHeap = new CoreEventHeap(this.meta, connection);
-    this.frameEnvironmentsById.set(frameId, new CoreFrameEnvironment(meta, this.commandQueue));
+    this.frameEnvironmentsById.set(
+      frameId,
+      new CoreFrameEnvironment(meta, null, this.commandQueue),
+    );
 
     const resolvedThis = Promise.resolve(this);
     this.eventHeap.registerEventInterceptors({
@@ -74,7 +77,7 @@ export default class CoreTab implements IJsPathEventTarget {
       meta.frameId = frameMeta.id;
       this.frameEnvironmentsById.set(
         frameMeta.id,
-        new CoreFrameEnvironment(meta, this.commandQueue),
+        new CoreFrameEnvironment(meta, frameMeta.parentFrameId, this.commandQueue),
       );
     }
     return this.frameEnvironmentsById.get(frameMeta.id);
diff --git a/client/lib/FrameEnvironment.ts b/client/lib/FrameEnvironment.ts
@@ -30,13 +30,14 @@ import { getComputedVisibilityFnName } from '@secret-agent/interfaces/jsPathFnNa
 import IAwaitedOptions from '../interfaces/IAwaitedOptions';
 import RequestGenerator, { getRequestIdOrUrl } from './Request';
 import CookieStorage, { createCookieStorage } from './CookieStorage';
-import Agent from './Agent';
+import Agent, { IState as IAgentState } from './Agent';
 import { delegate as AwaitedHandler, getAwaitedPathAsMethodArg } from './SetupAwaitedHandler';
 import CoreFrameEnvironment from './CoreFrameEnvironment';
 import Tab from './Tab';
 import { IMousePosition } from '../interfaces/IInteractions';
 
 const { getState, setState } = StateMachine<FrameEnvironment, IState>();
+const agentState = StateMachine<Agent, IAgentState>();
 const awaitedPathState = StateMachine<
   any,
   { awaitedPath: AwaitedPath; awaitedOptions: IAwaitedOptions }
@@ -67,6 +68,18 @@ export default class FrameEnvironment {
       tab,
       coreFrame,
     });
+    async function sendToFrameEnvironment(pluginId: string, ...args: any[]): Promise<any> {
+      return (await coreFrame).commandQueue.run(
+        'FrameEnvironment.runPluginCommand',
+        pluginId,
+        args,
+      );
+    }
+
+    for (const clientPlugin of agentState.getState(secretAgent).clientPlugins) {
+      if (clientPlugin.onFrameEnvironment)
+        clientPlugin.onFrameEnvironment(secretAgent, this, sendToFrameEnvironment);
+    }
   }
 
   public get isMainFrame(): Promise<boolean> {
@@ -77,6 +90,21 @@ export default class FrameEnvironment {
     return getCoreFrameEnvironment(this).then(x => x.frameId);
   }
 
+  public get children(): Promise<FrameEnvironment[]> {
+    return getState(this).tab.frameEnvironments.then(async frames => {
+      const frameId = await this.frameId;
+
+      const childFrames: FrameEnvironment[] = [];
+      for (const frame of frames) {
+        const parentFrameId = await frame.parentFrameId;
+        if (parentFrameId === frameId) {
+          childFrames.push(frame);
+        }
+      }
+      return childFrames;
+    });
+  }
+
   public get url(): Promise<string> {
     return getCoreFrameEnvironment(this).then(x => x.getUrl());
   }
@@ -88,9 +116,7 @@ export default class FrameEnvironment {
   }
 
   public get parentFrameId(): Promise<number | null> {
-    return getCoreFrameEnvironment(this)
-      .then(x => x.getFrameMeta())
-      .then(x => x.parentFrameId);
+    return getCoreFrameEnvironment(this).then(x => x.parentFrameId);
   }
 
   public get cookieStorage(): CookieStorage {
diff --git a/core/lib/CorePlugins.ts b/core/lib/CorePlugins.ts
@@ -221,7 +221,13 @@ export default class CorePlugins implements ICorePlugins {
   ): Promise<any> {
     const plugin = this.instanceById[toPluginId];
     if (plugin && plugin.onClientCommand) {
-      return await plugin.onClientCommand(commandMeta, ...args);
+      return await plugin.onClientCommand(
+        {
+          puppetPage: commandMeta.puppetPage,
+          puppetFrame: commandMeta.puppetFrame,
+        },
+        ...args,
+      );
     }
     this.logger.warn(`Plugin (${toPluginId}) could not be found for command`);
   }
diff --git a/core/lib/FrameEnvironment.ts b/core/lib/FrameEnvironment.ts
@@ -137,6 +137,7 @@ export default class FrameEnvironment {
       this.getLocationHref,
       this.interact,
       this.removeCookie,
+      this.runPluginCommand,
       this.setCookie,
       this.setFileInputFiles,
       this.waitForElement,
@@ -351,6 +352,14 @@ b) Use the UserProfile feature to set cookies for 1 or more domains before they'
     }
   }
 
+  public async runPluginCommand(toPluginId: string, args: any[]): Promise<any> {
+    const commandMeta = {
+      puppetPage: this.tab.puppetPage,
+      puppetFrame: this.puppetFrame,
+    };
+    return await this.session.plugins.onPluginCommand(toPluginId, commandMeta, args);
+  }
+
   public waitForElement(jsPath: IJsPath, options?: IWaitForElementOptions): Promise<boolean> {
     return this.waitForDom(jsPath, options);
   }
diff --git a/core/lib/Tab.ts b/core/lib/Tab.ts
@@ -565,6 +565,7 @@ export default class Tab extends TypedEventEmitter<ITabEventParams> {
   public async runPluginCommand(toPluginId, args: any[]): Promise<any> {
     const commandMeta = {
       puppetPage: this.puppetPage,
+      puppetFrame: this.mainFrameEnvironment?.puppetFrame,
     };
     return await this.session.plugins.onPluginCommand(toPluginId, commandMeta, args);
   }
diff --git a/interfaces/IClientPlugin.ts b/interfaces/IClientPlugin.ts
@@ -1,11 +1,16 @@
 import { PluginTypes } from './IPluginTypes';
-import type { Agent, Tab } from '../client';
+import type { Agent, Tab, FrameEnvironment } from '../client';
 
 export default interface IClientPlugin {
   id: string;
 
   onAgent?(agent: Agent, sendToCore: ISendToCoreFn): void;
   onTab?(agent: Agent, tab: Tab, sendToCore: ISendToCoreFn): void;
+  onFrameEnvironment?(
+    agent: Agent,
+    frameEnvironment: FrameEnvironment,
+    sendToCore: ISendToCoreFn,
+  ): void;
 }
 
 export interface IClientPluginClass {
diff --git a/interfaces/ICorePlugin.ts b/interfaces/ICorePlugin.ts
@@ -16,6 +16,7 @@ import IDeviceProfile from './IDeviceProfile';
 import IHttp2ConnectSettings from './IHttp2ConnectSettings';
 import IHttpSocketAgent from './IHttpSocketAgent';
 import ISessionCreateOptions from './ISessionCreateOptions';
+import { IPuppetFrame } from './IPuppetFrame';
 
 export default interface ICorePlugin
   extends ICorePluginMethods,
@@ -36,6 +37,7 @@ export interface ICorePluginMethods {
 
 export interface IOnClientCommandMeta {
   puppetPage: IPuppetPage;
+  puppetFrame: IPuppetFrame;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/plugins/execute-js/index.ts b/plugins/execute-js/index.ts
@@ -5,12 +5,13 @@ import ClientPlugin from './lib/ClientPlugin';
 import CorePlugin from './lib/CorePlugin';
 
 type ExecuteJsPluginAdditions = {
-  executeJs(fn: string | ((...args: any[]) => any), ...args: any[]);
+  executeJs<T extends any[]>(fn: string | ((...args: T) => any), ...args: T);
 };
 
 declare module '@secret-agent/client/lib/extendables' {
   interface Agent extends ExecuteJsPluginAdditions {}
   interface Tab extends ExecuteJsPluginAdditions {}
+  interface FrameEnvironment extends ExecuteJsPluginAdditions {}
 }
 
 export { ClientPlugin, CorePlugin };
diff --git a/plugins/execute-js/lib/ClientPlugin.ts b/plugins/execute-js/lib/ClientPlugin.ts
@@ -1,6 +1,7 @@
 import { ISendToCoreFn } from '@secret-agent/interfaces/IClientPlugin';
 import ClientPlugin from '@secret-agent/plugin-utils/lib/ClientPlugin';
-import type { Agent, Tab } from 'secret-agent';
+import type { Agent, Tab, FrameEnvironment } from 'secret-agent';
+import { IExecuteJsArgs } from './IExecuteJsArgs';
 
 const { name: pluginId } = require('../package.json');
 
@@ -9,29 +10,39 @@ export default class ExecuteJsClientPlugin extends ClientPlugin {
   public static coreDependencyIds = [pluginId];
 
   public onAgent(agent: Agent, sendToCore: ISendToCoreFn) {
-    agent.executeJs = (fn, ...args) => {
-      return this.executeJs(fn, sendToCore, args);
-    };
+    agent.executeJs = this.executeJs.bind(this, sendToCore);
   }
 
   public onTab(agent: Agent, tab: Tab, sendToCore: ISendToCoreFn) {
-    tab.executeJs = (fn, ...args) => {
-      return this.executeJs(fn, sendToCore, args);
-    };
+    tab.executeJs = this.executeJs.bind(this, sendToCore);
+  }
+
+  public onFrameEnvironment(
+    agent: Agent,
+    frameEnvironment: FrameEnvironment,
+    sendToCore: ISendToCoreFn,
+  ) {
+    frameEnvironment.executeJs = this.executeJs.bind(this, sendToCore);
   }
 
   // PRIVATE
 
-  private executeJs(fn, sendToCore, args): Promise<any> {
-    let fnName;
-    let fnSerialized;
-    if (typeof fn === 'string') {
-      fnName = '';
-      fnSerialized = fn;
-    } else {
+  private executeJs<T extends any[]>(
+    sendToCore: ISendToCoreFn,
+    fn: string | ((...args: T) => any),
+    ...args: T
+  ): Promise<any> {
+    let fnName = '';
+    let fnSerialized = fn as string;
+    if (typeof fn !== 'string') {
       fnName = fn.name;
       fnSerialized = `(${fn.toString()})(${JSON.stringify(args).slice(1, -1)});`;
     }
-    return sendToCore(pluginId, fnName, fnSerialized, args);
+    return sendToCore(pluginId, <IExecuteJsArgs>{
+      fnName,
+      fnSerialized,
+      args,
+      isolateFromWebPageEnvironment: false,
+    });
   }
 }
diff --git a/plugins/execute-js/lib/CorePlugin.ts b/plugins/execute-js/lib/CorePlugin.ts
@@ -1,26 +1,22 @@
 import { IOnClientCommandMeta } from '@secret-agent/interfaces/ICorePlugin';
-import { IPuppetPage } from '@secret-agent/interfaces/IPuppetPage';
 import CorePlugin from '@secret-agent/plugin-utils/lib/CorePlugin';
+import { IExecuteJsArgs } from './IExecuteJsArgs';
 
 const { name: pluginId } = require('../package.json');
 
 export default class ExecuteJsCorePlugin extends CorePlugin {
   public static id = pluginId;
 
   public async onClientCommand(
-    { puppetPage }: IOnClientCommandMeta,
-    fnName: string,
-    serializedFn: string,
+    { puppetFrame, puppetPage }: IOnClientCommandMeta,
+    args: IExecuteJsArgs,
   ): Promise<any> {
-    const response = await this.runFn(puppetPage, fnName, serializedFn);
-    return response;
-  }
-
-  private async runFn(puppetPage: IPuppetPage, fnName: string, serializedFn: string) {
-    const result = await puppetPage.evaluate<any>(serializedFn);
+    const { fnName, fnSerialized, isolateFromWebPageEnvironment } = args;
+    const frame = puppetFrame ?? puppetPage.mainFrame;
+    const result = await frame.evaluate<any>(fnSerialized, isolateFromWebPageEnvironment);
 
     if ((result as any)?.error) {
-      this.logger.error<any>(fnName, { result });
+      this.logger.error<any>(fnName, { error: result.error });
       throw new Error((result as any).error as string);
     } else {
       return result as any;
diff --git a/plugins/execute-js/lib/IExecuteJsArgs.ts b/plugins/execute-js/lib/IExecuteJsArgs.ts
@@ -0,0 +1,6 @@
+export interface IExecuteJsArgs {
+  fnName: string;
+  fnSerialized: string;
+  args: any[];
+  isolateFromWebPageEnvironment: boolean;
+}
diff --git a/plugins/execute-js/test/basic.test.ts b/plugins/execute-js/test/basic.test.ts
@@ -59,7 +59,6 @@ test('it should run function in browser and return response', async () => {
   await agent.close();
 });
 
-
 test('it should run function in browser and return incr', async () => {
   koaServer.get('/test2', ctx => {
     ctx.body = `<body>
@@ -84,10 +83,67 @@ test('it should run function in browser and return incr', async () => {
 
   await agent.goto(`${koaServer.baseUrl}/test2`);
   await agent.activeTab.waitForLoad(LocationStatus.DomContentLoaded);
-  const response = await agent.executeJs((num) => {
+  const response = await agent.executeJs(num => {
     // @ts-ignore
     return window.testRun(num);
   }, 1);
   expect(response).toEqual(2);
   await agent.close();
 });
+
+test('it should run function in iframe', async () => {
+  koaServer.get('/iframe-host', ctx => {
+    ctx.body = `<body>
+<h1>Iframe page</h1>
+<iframe src="/iframe" id="iframe"></iframe>
+<script>
+    window.testFunc = function() {
+      return "page";
+    }
+</script>
+</body>`;
+  });
+  koaServer.get('/iframe', ctx => {
+    ctx.body = `<body>
+<script>
+    window.testFunc = function() {
+      return "iframe";
+    }
+</script>
+</body>`;
+  });
+
+  const agent = new Agent({
+    connectionToCore: {
+      host: await coreServer.address,
+    },
+  });
+  Helpers.onClose(() => agent.close());
+  agent.use(ExecuteJsPlugin);
+
+  await agent.goto(`${koaServer.baseUrl}/iframe-host`);
+  await agent.waitForPaintingStable();
+
+  const iframe = await agent.getFrameEnvironment(agent.document.querySelector('iframe'));
+  await iframe.waitForLoad(LocationStatus.DomContentLoaded);
+
+  await expect(
+    iframe.executeJs(() => {
+      // @ts-ignore
+      return window.testFunc();
+    }),
+  ).resolves.toBe('iframe');
+  await expect(
+    agent.activeTab.executeJs(() => {
+      // @ts-ignore
+      return window.testFunc();
+    }),
+  ).resolves.toBe('page');
+  await expect(
+    agent.executeJs(() => {
+      // @ts-ignore
+      return window.testFunc();
+    }),
+  ).resolves.toBe('page');
+  await agent.close();
+});
diff --git a/website/docs/BasicInterfaces/FrameEnvironment.md b/website/docs/BasicInterfaces/FrameEnvironment.md
@@ -8,6 +8,12 @@ Frames cannot be constructed in SecretAgent. They're made available through the
 
 ## Properties
 
+### frameEnvironment.children {#child-frames}
+
+Returns child FrameEnvironments for this frame.
+
+#### **Type**: Promise<[`FrameEnvironment`](/docs/basic-interfaces/tab#frame-environments)[]>
+
 ### frameEnvironment.cookieStorage {#cookie-storage}
 
 Returns a [CookieStorage](/docs/advanced/cookie-storage) instance to get/set/delete cookies.

Original file line number	Diff line number	Diff line change
`@@ -565,6 +565,7 @@ export default class Tab extends TypedEventEmitter<ITabEventParams> {`
`565`	`565`	`public async runPluginCommand(toPluginId, args: any[]): Promise<any> {`
`566`	`566`	`const commandMeta = {`
`567`	`567`	`puppetPage: this.puppetPage,`
	`568`	`+ puppetFrame: this.mainFrameEnvironment?.puppetFrame,`
`568`	`569`	`};`
`569`	`570`	`return await this.session.plugins.onPluginCommand(toPluginId, commandMeta, args);`
`570`	`571`	`}`