Move all but browser tests to leverage puppeteer

.github/workflows/tests.yml

@@ -26,8 +26,36 @@ jobs:
           directory: ./packages/upscalerjs/coverage
           verbose: true
 
-  integration-browser:
-    name: 'Tests: Integration / Browser'
+  integration-browser-browserstack:
+    name: 'Tests: Integration / Browser / Browserstack'
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'BrowserStack Env Setup'  # Invokes the setup-env action
+        uses: browserstack/github-actions/setup-env@master
+        with:
+          username: ${{ secrets.BROWSERSTACK_USERNAME }}
+          access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+
+      - name: 'Checkout repository'
+        uses: actions/checkout@v2
+
+      - uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: 'Installing'
+        env:
+          NODE_OPTIONS: --max_old_space_size=8192
+        run: yarn
+
+      - name: 'Integration Tests'
+        run: yarn test:integration:browserstack --ci
+        env:
+          NODE_OPTIONS: --max_old_space_size=8192
+
+  integration-browser-local:
+    name: 'Tests: Integration / Browser / Local'
     runs-on: ubuntu-latest
     steps:
       - name: 'BrowserStack Env Setup'  # Invokes the setup-env action
@@ -55,8 +83,8 @@ jobs:
           NODE_OPTIONS: --max_old_space_size=8192
 
 
-  integration-node:
-    name: 'Tests: Integration / Node'
+  integration-node-local:
+    name: 'Tests: Integration / Node / Local'
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout repository'

package.json

@@ -42,6 +42,7 @@
     "scaffold:platform": "yarn lerna run scaffold:platform -- --",
     "test": "yarn test:unit",
     "test:unit": "yarn scaffold:platform 'browser' && jest --config packages/upscalerjs/jestconfig.json",
+    "test:integration:browserstack": "ts-node scripts/test.ts --platform browser --kind browserstack",
     "test:integration:browser": "ts-node scripts/test.ts --platform browser",
     "test:integration:node": "ts-node scripts/test.ts --platform node",
     "test:startTestServer": "ts-node test/lib/startServer.ts"
@@ -67,6 +68,7 @@
     "@types/jest": "^26.0.7",
     "@types/jsdom": "^16.2.14",
     "@types/pngjs": "^6.0.1",
+    "@types/puppeteer": "^5.4.4",
     "@types/rimraf": "^3.0.2",
     "@types/serve-handler": "^6.1.1",
     "@types/yargs": "^17.0.5",
@@ -85,6 +87,7 @@
     "pixelmatch": "^5.2.1",
     "pngjs": "^6.0.0",
     "prettier": "^2.0.5",
+    "puppeteer": "^13.1.3",
     "rimraf": "^3.0.2",
     "rollup": "^2.66.1",
     "rollup-plugin-commonjs": "^10.1.0",

scripts/test.ts

@@ -51,16 +51,30 @@ const getPlatform = (argPlatform: string) => {
   throw new Error(`Unsupported platform provided: ${platform}. You must pass either 'browser' or 'node'.`)
 }
 
+const isValidRunner = (runner?: string): runner is undefined | 'local' | 'browserstack' => {
+  return runner === undefined ? true : ['local', 'browserstack'].includes(runner);
+}
+
+const getRunner = (runner?: string): 'local' | 'browserstack' => {
+  if (isValidRunner(runner)) {
+    return runner === undefined ? 'local' : runner;
+
+  }
+  throw new Error(`Unsupported runner provided: ${runner}. You must pass either 'local' or 'browserstack'.`)
+}
+
 (async function main() {
   const argv = await yargs(process.argv.slice(2)).options({
     watch: { type: 'boolean' },
     platform: { type: 'string', demandOption: true },
     skipBuild: { type: 'boolean' },
+    runner: { type: 'string' }
   }).argv;
 
   let bsLocal: undefined | browserstack.Local;
   const platform = getPlatform(argv.platform);
-  if (platform === 'browser') {
+  const runner = getRunner(argv.runner);
+  if (runner === 'browserstack') {
     bsLocal = await startBrowserstack();
     process.on('exit', async () => {
       if (bsLocal !== undefined && bsLocal.isRunning()) {
@@ -79,7 +93,7 @@ const getPlatform = (argPlatform: string) => {
     'yarn', 
     'jest', 
     '--config', 
-    `test/jestconfig.${platform}.js`, 
+    `test/jestconfig.${platform}.${runner}.js`, 
     '--detectOpenHandles', 
     argv.watch ? '--watch' : undefined, 
     ...argv._,

test/integration/browser/build.ts

@@ -1,64 +1,23 @@
 /****
  * Tests that different build outputs all function correctly
  */
-import * as browserstack from 'browserstack-local';
-import * as webdriver from 'selenium-webdriver';
 import { checkImage } from '../../lib/utils/checkImage';
 import { prepareScriptBundleForUMD, DIST as SCRIPT_DIST } from '../../lib/umd/prepare';
 import { startServer } from '../../lib/shared/server';
 import { prepareScriptBundleForESM, bundleWebpack, DIST as WEBPACK_DIST } from '../../lib/esm-webpack/prepare';
+import puppeteer from 'puppeteer';
 
-const DEFAULT_CAPABILITIES = {
-  'build': process.env.BROWSERSTACK_BUILD_NAME,
-  'project': process.env.BROWSERSTACK_PROJECT_NAME,
-  'browserstack.local': true,
-  os: 'windows',
-  os_version: '11',
-  browserName: 'chrome',
-  browser_version: 'latest'
-}
-
-const TRACK_TIME = false;
-const username = process.env.BROWSERSTACK_USERNAME;
-const accessKey = process.env.BROWSERSTACK_ACCESS_KEY;
-const serverURL = `http://${username}:${accessKey}@hub-cloud.browserstack.com/wd/hub`;
-
-const JEST_TIMEOUT = 60 * 1000;
-jest.setTimeout(JEST_TIMEOUT * 1); // 60 seconds timeout
+const JEST_TIMEOUT_IN_SECONDS = 60;
+jest.setTimeout(JEST_TIMEOUT_IN_SECONDS * 1000);
 jest.retryTimes(1);
 
-let server;
-let driver;
 describe('Build Integration Tests', () => {
+  let server;
+  let browser;
+  let page;
 
   const PORT = 8099;
 
-  beforeAll(async function beforeAll() {
-    const start = new Date().getTime();
-
-    driver = new webdriver.Builder()
-      .usingServer(serverURL)
-      .withCapabilities(DEFAULT_CAPABILITIES)
-      .build();
-
-    const end = new Date().getTime();
-    if (TRACK_TIME) {
-      console.log(`Completed pre-test scaffolding in ${Math.round((end - start) / 1000)} seconds`);
-    }
-  }, 20000);
-
-  afterAll(async function buildAfterAll() {
-    const start = new Date().getTime();
-
-    await Promise.all([
-      driver.quit(),
-    ]);
-    const end = new Date().getTime();
-    if (TRACK_TIME) {
-      console.log(`Completed post-test clean up in ${Math.round((end - start) / 1000)} seconds`);
-    }
-  }, 10000);
-
   afterEach(async function afterEach() {
     const stopServer = () => new Promise((resolve) => {
       if (server) {
@@ -69,14 +28,23 @@ describe('Build Integration Tests', () => {
     });
     await Promise.all([
       stopServer(),
+      browser ? browser.close() : undefined,
     ]);
+    browser = undefined;
+    page = undefined;
   });
 
+  const startBrowser = async () => {
+    browser = await puppeteer.launch();
+    page = await browser.newPage();
+    await page.goto(`http://localhost:${PORT}`);
+  }
+
   it("upscales using a UMD build via a script tag", async () => {
     await prepareScriptBundleForUMD();
     server = await startServer(PORT, SCRIPT_DIST);
-    await driver.get(`http://localhost:${PORT}`);
-    const result = await driver.executeScript(() => {
+    await startBrowser();
+    const result = await page.evaluate(() => {
       const Upscaler = window['Upscaler'];
       const upscaler = new Upscaler({
         model: '/pixelator/pixelator.json',
@@ -91,9 +59,9 @@ describe('Build Integration Tests', () => {
     await prepareScriptBundleForESM();
     await bundleWebpack();
     server = await startServer(PORT, WEBPACK_DIST);
-    await driver.get(`http://localhost:${PORT}`);
-    await driver.wait(() => driver.getTitle().then(title => title.endsWith('| Loaded'), 3000));
-    const result = await driver.executeScript(() => {
+    await startBrowser();
+    await page.waitForFunction('document.title.endsWith("| Loaded")');
+    const result = await page.evaluate(() => {
       const Upscaler = window['Upscaler'];
       const upscaler = new Upscaler({
         model: '/pixelator/pixelator.json',