✨ Integrate selenium and appium session support

.github/workflows/test.yml

@@ -55,6 +55,7 @@ jobs:
           - '@percy/cli-build'
           - '@percy/cli-config'
           - '@percy/sdk-utils'
+          - '@percy/webdriver-utils'
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v3

packages/core/src/api.js

@@ -4,6 +4,8 @@ import { createRequire } from 'module';
 import logger from '@percy/logger';
 import { normalize } from '@percy/config/utils';
 import { getPackageJSON, Server } from './utils.js';
+// TODO Remove below esline disable once we publish webdriver-util
+import automateScreenshot from '@percy/webdriver-utils'; // eslint-disable-line import/no-extraneous-dependencies
 
 // need require.resolve until import.meta.resolve can be transpiled
 export const PERCY_DOM = createRequire(import.meta.url).resolve('@percy/dom');
@@ -115,6 +117,9 @@ export function createPercyServer(percy, port) {
     .route('post', '/percy/flush', async (req, res) => res.json(200, {
       success: await percy.flush(req.body).then(() => true)
     }))
+    .route('post', '/percy/automateScreenshot', async (req, res) => res.json(200, {
+      success: await (percy.upload(await automateScreenshot(req.body))).then(() => true)
+    }))
   // stops percy at the end of the current event loop
     .route('/percy/stop', (req, res) => {
       setImmediate(() => percy.stop());

packages/sdk-utils/src/request.js

@@ -2,7 +2,8 @@ import percy from './percy-info.js';
 
 // Helper to send a request to the local CLI API
 export async function request(path, options = {}) {
-  let response = await request.fetch(`${percy.address}${path}`, options);
+  let url = path.startsWith('http') ? path : `${percy.address}${path}`;
+  let response = await request.fetch(url, options);
 
   // maybe parse response body as json
   if (typeof response.body === 'string' &&
@@ -48,7 +49,9 @@ if (process.env.__PERCY_BROWSERIFIED__) {
 } else {
   // use http.request in node
   request.fetch = async function fetch(url, options) {
-    let { default: http } = await import('http');
+    let { protocol } = new URL(url);
+    // rollup throws error for -> await import(protocol === 'https:' ? 'https' : 'http')
+    let { default: http } = protocol === 'https:' ? await import('https') : await import('http');
 
     return new Promise((resolve, reject) => {
       http.request(url, options)

packages/webdriver-utils/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@percy/webdriver-utils",
+  "version": "1.22.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/percy/cli",
+    "directory": "packages/webdriver-utils"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build",
+    "lint": "eslint --ignore-path ../../.gitignore .",
+    "test": "node ../../scripts/test",
+    "test:coverage": "yarn test --coverage"
+  },
+  "dependencies": {
+    "@percy/sdk-utils": "1.22.0"
+  }
+}

packages/webdriver-utils/src/driver.js

@@ -0,0 +1,51 @@
+import utils from '@percy/sdk-utils';
+import Cache from './util/cache.js';
+const { request } = utils;
+
+export default class Driver {
+  constructor(sessionId, executorUrl) {
+    this.sessionId = sessionId;
+    this.executorUrl = executorUrl.includes('@') ? `https://${executorUrl.split('@')[1]}` : executorUrl;
+  }
+
+  async getCapabilites() {
+    return await Cache.withCache(Cache.caps, this.sessionId, async() => {
+      const baseUrl = `${this.executorUrl}/session/${this.sessionId}`;
+      const caps = JSON.parse((await request(baseUrl)).body);
+      return caps.value;
+    })
+  }
+
+  async getWindowSize() {
+    const baseUrl = `${this.executorUrl}/session/${this.sessionId}/window/current/size`;
+    const windowSize = JSON.parse((await request(baseUrl)).body);
+    return windowSize;
+  }
+
+  // command => {script: "", args: []}
+  async executeScript(command) {
+    if ((!command.constructor === Object) ||
+      !(Object.keys(command).length === 2 &&
+      Object.keys(command).includes('script') &&
+      Object.keys(command).includes('args'))
+    ) {
+      throw new Error('Please pass command as {script: "", args: []}');
+    }
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json;charset=utf-8'
+      },
+      body: JSON.stringify(command)
+    };
+    const baseUrl = `${this.executorUrl}/session/${this.sessionId}/execute/sync`;
+    const response = JSON.parse((await request(baseUrl, options)).body);
+    return response;
+  }
+
+  async takeScreenshot() {
+    const baseUrl = `${this.executorUrl}/session/${this.sessionId}/screenshot`;
+    const screenShot = JSON.parse((await request(baseUrl)).body);
+    return screenShot.value;
+  }
+}

packages/webdriver-utils/src/index.js

@@ -0,0 +1,11 @@
+import ProviderResolver from './providers/providerResolver.js';
+import utils from '@percy/sdk-utils';
+
+const log = utils.logger('webdriver-utils:main');
+
+export default async function automateScreenshot(options) {
+  log.info('Starting automate screenshot');
+  const automate = ProviderResolver.resolve(options.sessionId, options.commandExecutorUrl, options.capabilities, options.sessionCapabilites);
+  await automate.createDriver();
+  return await automate.screenshot(options.snapshotName);
+}

packages/webdriver-utils/src/metadata/desktopMetaData.js

@@ -0,0 +1,43 @@
+export default class DesktopMetaData {
+  constructor(driver, opts) {
+    this.driver = driver;
+    this.capabilities = opts;
+  }
+
+  browserName() {
+    return this.capabilities.browserName.toLowerCase();
+  }
+
+  osName() {
+    let osName = this.capabilities.osVersion;
+    if (osName) return osName.toLowerCase();
+
+    osName = this.capabilities.platform;
+    return osName;
+  }
+
+  // desktop will show this as browser version
+  osVersion() {
+    return this.capabilities.version.split('.')[0];
+  }
+
+  deviceName() {
+    return this.browserName() + '_' + this.osVersion() + '_' + this.osName();
+  }
+
+  orientation() {
+    return 'landscape';
+  }
+
+  async windowSize() {
+    const dpr = await this.devicePixelRatio();
+    const data = await this.driver.getWindowSize();
+    const width = parseInt(data.value.width * dpr), height = parseInt(data.value.height * dpr);
+    return { width, height };
+  }
+
+  async devicePixelRatio() {
+    const devicePixelRatio = await this.driver.executeScript({ script: 'return window.devicePixelRatio;', args: [] });
+    return devicePixelRatio.value;
+  }
+}

packages/webdriver-utils/src/metadata/metaDataResolver.js

@@ -0,0 +1,15 @@
+import DesktopMetaData from './desktopMetaData.js';
+import MobileMetaData from './mobileMetaData.js';
+
+export default class MetaDataResolver {
+  static resolve(driver, capabilities, opts) {
+    if (!driver) throw new Error('Please pass a Driver object');
+
+    const platform = opts.platformName || opts.platform;
+    if (['ios', 'android'].includes(platform.toLowerCase())) {
+      return new MobileMetaData(driver, capabilities);
+    } else {
+      return new DesktopMetaData(driver, capabilities);
+    }
+  }
+}

packages/webdriver-utils/src/metadata/mobileMetaData.js

@@ -0,0 +1,42 @@
+export default class MobileMetaData {
+  constructor(driver, opts) {
+    this.driver = driver;
+    this.capabilities = opts;
+  }
+
+  browserName() {
+    return this.capabilities.browserName.toLowerCase();
+  }
+
+  osName() {
+    let osName = this.capabilities.os.toLowerCase();
+    if (osName === 'mac' && this.browserName() === 'iphone') {
+      osName = 'ios';
+    }
+    return osName;
+  }
+
+  osVersion() {
+    return this.capabilities.osVersion.split('.')[0];
+  }
+
+  deviceName() {
+    return this.capabilities.deviceName.split('-')[0];
+  }
+
+  orientation() {
+    return this.capabilities.orientation;
+  }
+
+  async windowSize() {
+    const dpr = await this.devicePixelRatio();
+    const data = await this.driver.getWindowSize();
+    const width = parseInt(data.value.width * dpr), height = parseInt(data.value.height * dpr);
+    return { width, height };
+  }
+
+  async devicePixelRatio() {
+    const devicePixelRatio = await this.driver.executeScript({ script: 'return window.devicePixelRatio;', args: [] });
+    return devicePixelRatio.value;
+  }
+}