feat: add Chrome 113 browser E2E testing

Author: cwoolum

.gitignore

@@ -60,6 +60,7 @@ coverage
 /libpeerconnection.log
 testem.log
 /typings
+packages/kit-headless/browsers/chrome/*
 
 # System Files
 .DS_Store
@@ -74,4 +75,4 @@ Thumbs.db
 
 # Verdaccio
 tmp
-.nx/cache
+.nx/cache

package.json

@@ -35,6 +35,7 @@
     "test.headless": "nx component-test headless",
     "test.visual.headless": "nx visual-test headless",
     "test.pw.headless": "nx e2e headless",
+    "test.pw.headless-chrome-113": "nx e2e-chrome-113 headless",
     "test.pw.headless.ci": "nx e2e headless",
     "test.headless.ci": "nx component-test-ci headless",
     "test.utils": "nx test utils"
@@ -89,6 +90,7 @@
     "@swc-node/register": "~1.6.7",
     "@swc/core": "~1.3.85",
     "@testing-library/cypress": "9.0.0",
+    "@types/decompress": "4.2.7",
     "@types/eslint": "^8.44.2",
     "@types/estree-jsx": "^1.0.3",
     "@types/jest": "^29.4.0",
@@ -117,6 +119,7 @@
     "cypress-real-events": "1.10.3",
     "cz-conventional-changelog": "^3.3.0",
     "danger": "^11.2.8",
+    "decompress": "4.2.1",
     "dotenv": "16.3.1",
     "eslint": "^8.48.0",
     "eslint-config-prettier": "9.0.0",

packages/kit-headless/package.json

@@ -10,6 +10,9 @@
   "module": "./index.qwik.mjs",
   "types": "./index.d.ts",
   "type": "module",
+  "scripts": {
+    "setup.chrome.113": "npx tsx ./scripts/prepare-chrome-113.ts"
+  },
   "exports": {
     ".": {
       "types": "./index.d.ts",
@@ -24,5 +27,7 @@
   "peerDependencies": {
     "@builder.io/qwik": "^1.4.0"
   },
-  "scripts": {}
+  "devDependencies": {
+    "tsx": "4.7.2"
+  }
 }

packages/kit-headless/playwright.config.ts

@@ -1,12 +1,34 @@
 import { workspaceRoot } from '@nx/devkit';
 import { nxE2EPreset } from '@nx/playwright/preset';
 import { defineConfig, devices } from '@playwright/test';
+import path, { dirname } from 'path';
 import { fileURLToPath } from 'url';
+import os from 'os';
 
 const __filename = fileURLToPath(import.meta.url);
 // For CI, you may want to set BASE_URL to the deployed application.
 const baseURL = process.env['BASE_URL'] || 'http://localhost:5173';
 
+const dirName = dirname(__filename);
+
+const currentPlatform = os.platform();
+
+let binaryPath;
+
+switch (currentPlatform) {
+  case 'darwin':
+    binaryPath = './browsers/chrome/113/chrome-darwin/Chromium.app';
+    break;
+  case 'win32':
+    binaryPath = './browsers/chrome/113/chrome-win32/chrome.exe';
+    break;
+  case 'linux':
+    binaryPath = './browsers/chrome/113/chrome-linux/chrome';
+    break;
+  default:
+    throw new Error('Cannot install Chrome 13 on unknown platform');
+}
+
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
@@ -41,6 +63,16 @@ export default defineConfig({
       grepInvert: /@Visual.*/,
     },
 
+    {
+      name: 'popover-chrome-113',
+      use: {
+        launchOptions: {
+          executablePath: path.resolve(dirName, binaryPath),
+        },
+      },
+      grep: /popover/,
+    },
+
     {
       name: 'visual',
       use: { ...devices['Desktop Chrome'] },

packages/kit-headless/project.json

@@ -88,6 +88,21 @@
         "project": ["logic"]
       }
     },
+    "setup-chrome-113": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "setup.chrome.113"
+      }
+    },
+    "e2e-chrome-113": {
+      "executor": "@nx/playwright:playwright",
+      "outputs": ["{workspaceRoot}/dist/.playwright/packages/kit-headless"],
+      "dependsOn": ["setup-chrome-113"],
+      "options": {
+        "config": "packages/kit-headless/playwright.config.ts",
+        "project": ["popover-chrome-113"]
+      }
+    },
     "visual-test": {
       "executor": "@nx/playwright:playwright",
       "outputs": ["{workspaceRoot}/dist/.playwright/packages/kit-headless"],

packages/kit-headless/scripts/prepare-chrome-113.ts

@@ -0,0 +1,62 @@
+import os from 'os';
+import decompress from 'decompress';
+import fs from 'fs';
+
+let progressValue = 0;
+
+function printProgress(progress: number) {
+  if (progress % 5 === 0 && progressValue !== progress) {
+    console.log(`Download ${progress}% complete ⏬`);
+    progressValue = progress;
+  }
+}
+
+async function prepareChrome113() {
+  const path = `browsers/chrome/113/chrome-${os.platform()}`;
+
+  if (fs.existsSync(path)) {
+    console.log('Chrome 113 already exists. Skipping unzip ⏩');
+  } else {
+    console.log('Creating directory to save the browser 🌐');
+    fs.mkdirSync(path, { recursive: true });
+
+    const downloadResponse = await fetch(
+      `https://github.com/qwikifiers/qwik-ui-polyfill-browsers/raw/main/chrome/113/chrome-${os.platform()}.zip`,
+    );
+
+    const contentLength = downloadResponse.headers.get('content-length');
+    const total = parseInt(contentLength ?? '0', 10);
+    let loaded = 0;
+
+    const res = new Response(
+      new ReadableStream({
+        async start(controller) {
+          if (!downloadResponse.body) {
+            throw new Error(
+              'Invalid response received when trying to download Chrome 113',
+            );
+          }
+
+          const reader = downloadResponse.body.getReader();
+          for (;;) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            loaded += value.byteLength;
+            printProgress(Math.round((loaded / total) * 100));
+
+            controller.enqueue(value);
+          }
+          controller.close();
+        },
+      }),
+    );
+
+    await decompress(
+      Buffer.from(await res.arrayBuffer()),
+      `browsers/chrome/113/chrome-${os.platform()}`,
+      { strip: 1 },
+    );
+  }
+}
+
+await prepareChrome113();