feat:provide ability to execute webdriver io script for via UI (#52)

* feat: Ability to execute webdriver io script for debugging the tests

* feat:ability to view the live video in full screen

Author: sudharsan-selvaraj

package-lock.json

@@ -28,7 +28,7 @@
     "mainClass": "AppiumDashboardPlugin"
   },
   "dependencies": {
-    "@appium/base-plugin": "^1.8.0",
+    "@appium/base-plugin": "^1.8.1",
     "@appium/support": "^2.55.4",
     "@ffmpeg-installer/ffmpeg": "^1.1.0",
     "appium-adb": "^9.0.0",
@@ -58,6 +58,8 @@
     "sqlite3": "^5.0.2",
     "typedi": "^0.10.0",
     "uuid": "^8.3.2",
+    "vm2": "^3.9.8",
+    "webdriverio": "^7.16.15",
     "winston": "^3.3.3"
   },
   "devDependencies": {

package.json

@@ -2,25 +2,78 @@ import { NextFunction, Router, Request, Response } from "express";
 import { EventEmitter } from "events";
 import { BaseController } from "../commons/base-controller";
 import { Config } from "../../config";
+import { defer } from "../utils/common-utils";
+import SessionDebugMap from "../../plugin/session-debug-map";
+import { Session } from "../../models";
 
 export class DebugController extends BaseController {
   constructor(private debugEventEmitter: EventEmitter) {
     super();
   }
 
   public initializeRoutes(router: Router, config: Config) {
+    router.use("/:sessionId/*", async (request, response, next) => {
+      let { sessionId } = request.params;
+      let session = await Session.findOne({
+        where: {
+          session_id: sessionId,
+        },
+      });
+      if (!SessionDebugMap.get(sessionId) || !session) {
+        return this.sendFailureResponse(response, "Invalid sessionid");
+      }
+
+      if (session.is_completed) {
+        return this.sendFailureResponse(response, "Cannot perform this operation for completed session");
+      }
+      return next();
+    });
+    router.post("/:sessionId/execute_driver_script", this.executeDriverScript.bind(this));
     router.post("/:sessionId/:state", this.changeSessionState.bind(this));
   }
 
+  private async triggerAndWaitForEvent(opts: { sessionId: string; eventObj: any }) {
+    const deferred = defer();
+    this.debugEventEmitter.emit(opts.sessionId, {
+      ...opts.eventObj,
+      callback: deferred.resolve,
+    });
+    return await deferred.promise;
+  }
+
   public async changeSessionState(request: Request, response: Response, next: NextFunction) {
     let { sessionId, state } = request.params;
+
     if (!state.match("play|pause")) {
       return this.sendFailureResponse(response, "Invalid state. Supported states are play,pause");
     }
-    this.debugEventEmitter.emit(sessionId, {
-      event: "change_state",
-      state,
+
+    await this.triggerAndWaitForEvent({
+      sessionId,
+      eventObj: {
+        event: "change_state",
+        state,
+      },
     });
+
     return this.sendSuccessResponse(response, "Changed session state");
   }
+
+  public async executeDriverScript(request: Request, response: Response, next: NextFunction) {
+    let { sessionId } = request.params;
+    let { script } = request.body;
+    if (!script) {
+      return this.sendFailureResponse(response, "please provide a valid script to execute");
+    }
+
+    let output = await this.triggerAndWaitForEvent({
+      sessionId,
+      eventObj: {
+        event: "execute_driver_script",
+        script,
+      },
+    });
+
+    return this.sendSuccessResponse(response, output);
+  }
 }

src/app/controllers/debug-controller.ts

@@ -22,7 +22,7 @@ export class SessionController extends BaseController {
     router.get("/:sessionId/logs/debug", this.getDebugLogs.bind(this));
     router.get("/:sessionId/profiling_data", this.getProfilingData.bind(this));
     router.get("/:sessionId/http_logs", this.getHttpLogs.bind(this));
-    router.get("/:sessionId/live_video", this.getVideo.bind(this));
+    router.get("/:sessionId/live_video", this.getLiveVideo.bind(this));
   }
 
   public async getSessions(request: Request, response: Response, next: NextFunction) {
@@ -75,16 +75,42 @@ export class SessionController extends BaseController {
 
   public async getVideoForSession(request: Request, response: Response, next: NextFunction) {
     let sessionId: string = request.params.sessionId;
+    const range = request.headers.range;
     let session = await Session.findOne({
       where: {
         session_id: sessionId,
       },
     });
-    if (session && session.video_path) {
-      return response.status(200).sendFile(session.video_path);
+    const videoPath = session?.video_path;
+
+    if (session && videoPath && range) {
+      const videoSize = fs.statSync(videoPath).size;
+      // Parse Range
+      // Example: "bytes=32324-"
+      const CHUNK_SIZE = 10 ** 6; // 1MB
+      const start = Number(range.replace(/\D/g, ""));
+      const end = Math.min(start + CHUNK_SIZE, videoSize - 1);
+
+      // Create headers
+      const contentLength = end - start + 1;
+      const headers = {
+        "Content-Range": `bytes ${start}-${end}/${videoSize}`,
+        "Accept-Ranges": "bytes",
+        "Content-Length": contentLength,
+        "Content-Type": "video/mp4",
+      };
+
+      // HTTP Status 206 for Partial Content
+      response.writeHead(206, headers);
+
+      // create video read stream for this particular chunk
+      const videoStream = fs.createReadStream(videoPath, { start, end });
+
+      // Stream the video chunk to the client
+      videoStream.pipe(response);
+    } else {
+      this.sendFailureResponse(response, "Video not available");
     }
-
-    this.sendFailureResponse(response, "Video not available");
   }
 
   public async getTextLogs(request: Request, response: Response, next: NextFunction) {
@@ -166,7 +192,7 @@ export class SessionController extends BaseController {
     this.sendSuccessResponse(response, logs);
   }
 
-  public async getVideo(request: Request, response: Response, next: NextFunction) {
+  public async getLiveVideo(request: Request, response: Response, next: NextFunction) {
     let sessionId: string = request.params.sessionId;
     let session = await Session.findOne({
       where: {
@@ -182,6 +208,10 @@ export class SessionController extends BaseController {
       const url = `${request.protocol}://${request.hostname}:${proxyPort}`;
       SessionController.mjpegProxyCache.set(proxyPort, new MjpegProxy(url));
     }
-    SessionController.mjpegProxyCache.get(proxyPort)?.proxyRequest(request, response);
+    try {
+      SessionController.mjpegProxyCache.get(proxyPort)?.proxyRequest(request, response);
+    } catch (e) {
+      return this.sendFailureResponse(response, "Live video not available");
+    }
   }
 }

src/app/controllers/session-controller.ts

@@ -1,7 +1,19 @@
 import { filter } from "lodash";
 import { Op, Sequelize } from "sequelize";
 
-export function parseSessionFilterParams(params: Record<string, string>) {
+function defer() {
+  var resolve, reject;
+  var promise = new Promise(function () {
+    resolve = arguments[0];
+    reject = arguments[1];
+  });
+  return {
+    resolve: resolve,
+    reject: reject,
+    promise: promise,
+  };
+}
+function parseSessionFilterParams(params: Record<string, string>) {
   let { start_time, name, os, status, device_udid } = params;
   let filters: any = [];
   if (start_time) {
@@ -45,3 +57,5 @@ export function parseSessionFilterParams(params: Record<string, string>) {
   }
   return filters;
 }
+
+export { defer, parseSessionFilterParams };

src/app/utils/common-utils.ts

@@ -1,7 +1,25 @@
 import { Sequelize } from "sequelize-typescript";
 import * as models from "./models/index";
-import fs from "fs";
 import * as path from "path";
+
+async function sanitizeSessionsTable() {
+  await models.Session.update(
+    {
+      session_status: "TIMEOUT",
+      is_completed: true,
+      end_time: new Date(),
+      is_paused: false,
+      is_profiling_available: false,
+      is_http_logs_available: false,
+    },
+    {
+      where: {
+        is_completed: false,
+      },
+    }
+  );
+}
+
 /**
  * Intialize Sequelize object and load the database models.
  */
@@ -18,5 +36,6 @@ export let sequelizeLoader = async ({ dbPath }: { dbPath: string }): Promise<Seq
 
   /* check whether the database connection is instantiated */
   await sequelize.authenticate();
+  await sanitizeSessionsTable();
   return sequelize;
 };

src/database-loader.ts

@@ -32,7 +32,10 @@ function isSessionPaused(sessionId: string) {
 }
 
 async function handler(req: any, res: any, next: any) {
-  if (!!req.query.internal || new RegExp(/dashboard\//).test(req.url)) {
+  if (new RegExp(/wd-internal\//).test(req.url)) {
+    req.url = req.originalUrl = req.url.replace("wd-internal/", "");
+    return next();
+  } else if (!!req.query.internal || new RegExp(/dashboard\//).test(req.url)) {
     return next();
   }
 

src/plugin/debugger.ts

@@ -0,0 +1,78 @@
+import { SessionInfo } from "../../interfaces/session-info";
+import cp from "child_process";
+import { timing } from "@appium/support";
+import B from "bluebird";
+import { getWdioServerOpts } from "../utils/plugin-utils";
+
+const childScript = require.resolve("./script.js");
+const DEFAULT_SCRIPT_TIMEOUT_MS = 1000 * 60 * 60; // default to 1 hour timeout
+
+class DriverScriptExecutor {
+  private driverOptions: any;
+
+  constructor(private sessionInfo: SessionInfo, private driver: any) {
+    let { hostname, port, path } = getWdioServerOpts(driver);
+
+    this.driverOptions = {
+      sessionId: sessionInfo.session_id,
+      protocol: "http",
+      hostname,
+      port,
+      path,
+      isW3C: true,
+      isMobile: true,
+      capabilities: driver.caps,
+    };
+  }
+
+  public async execute({ script, timeoutMs = DEFAULT_SCRIPT_TIMEOUT_MS }: { script: string; timeoutMs?: number }) {
+    const scriptProc = cp.fork(childScript);
+    let timeoutCanceled = false;
+
+    try {
+      const timer = new timing.Timer();
+      timer.start();
+
+      const waitForResult = async () => {
+        const res: any = await new B((res) => {
+          scriptProc.on("message", res); // this is node IPC
+        });
+
+        return res.data;
+      };
+
+      const waitForTimeout = async () => {
+        while (!timeoutCanceled && timer.getDuration().asMilliSeconds < timeoutMs) {
+          await B.delay(500);
+        }
+
+        if (timeoutCanceled) {
+          return;
+        }
+
+        throw new Error(
+          `Execute driver script timed out after ${timeoutMs}ms. ` + `You can adjust this with the 'timeout' parameter.`
+        );
+      };
+
+      scriptProc.send({ driverOpts: this.driverOptions, script, timeoutMs });
+
+      // and set up a race between the response from the child and the timeout
+      return await B.race([waitForResult(), waitForTimeout()]);
+    } finally {
+      // ensure we always cancel the timeout so that the timeout promise stops
+      // spinning and allows this process to die gracefully
+      timeoutCanceled = true;
+
+      if (scriptProc.connected) {
+        scriptProc.disconnect();
+      }
+
+      if (scriptProc.exitCode === null) {
+        scriptProc.kill();
+      }
+    }
+  }
+}
+
+export { DriverScriptExecutor };