Optional Vis-tests with browserstack (#15111)

packages/tools/tests/browserstack.config.ts

@@ -0,0 +1,46 @@
+import cp from "child_process";
+import BrowserStackLocal from "browserstack-local";
+const clientPlaywrightVersion = cp.execSync("npx playwright --version").toString().trim().split(" ")[1];
+
+// BrowserStack Specific Capabilities.
+// Set 'browserstack.local:true For Local testing
+const caps = {
+    browser: "chrome",
+    os: "osx",
+    os_version: "catalina",
+    name: "My first playwright test",
+    build: "playwright-build",
+    "browserstack.username": process.env.BROWSERSTACK_USERNAME,
+    "browserstack.accessKey": process.env.BROWSERSTACK_ACCESS_KEY,
+    "browserstack.local": process.env.BROWSERSTACK_LOCAL || false,
+    "client.playwrightVersion": clientPlaywrightVersion,
+};
+
+// replace YOUR_ACCESS_KEY with your key. You can also set an environment variable - "BROWSERSTACK_ACCESS_KEY".
+export const BS_LOCAL_ARGS = {
+    key: process.env.BROWSERSTACK_ACCESS_KEY,
+};
+
+export const bsLocal = new BrowserStackLocal.Local();
+
+// Patching the capabilities dynamically according to the project name.
+const patchCaps = (name, title) => {
+    let combination = name.split(/@browserstack/)[0];
+    let [browerCaps, osCaps] = combination.split(/:/);
+    let [browser, browser_version] = browerCaps.split(/@/);
+    let osCapsSplit = osCaps.split(/ /);
+    let os = osCapsSplit.shift();
+    let os_version = osCapsSplit.join(" ");
+    caps.browser = browser ? browser : "chrome";
+    caps.os_version = browser_version ? browser_version : "latest";
+    caps.os = os ? os : "osx";
+    caps.os_version = os_version ? os_version : "catalina";
+    caps.name = title;
+};
+
+export const getCdpEndpoint = (name: string, title: string) => {
+    patchCaps(name, title);
+    const cdpUrl = `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify(caps))}`;
+    return cdpUrl;
+};
+

packages/tools/tests/globalSetup.ts

@@ -0,0 +1,22 @@
+import { BS_LOCAL_ARGS, bsLocal } from "./browserstack.config";
+import { promisify } from "util";
+const sleep = promisify(setTimeout);
+const redColour = "\x1b[31m";
+const whiteColour = "\x1b[0m";
+export default async () => {
+    console.log("Starting BrowserStackLocal ...");
+    // Starts the Local instance with the required arguments
+    let localResponseReceived = false;
+    bsLocal.start(BS_LOCAL_ARGS, (err) => {
+        if (err) {
+            console.error(`${redColour}Error starting BrowserStackLocal${whiteColour}`);
+        } else {
+            console.log("BrowserStackLocal Started");
+        }
+        localResponseReceived = true;
+    });
+    while (!localResponseReceived) {
+        await sleep(1000);
+    }
+};
+

packages/tools/tests/globalTeardown.ts

@@ -0,0 +1,18 @@
+// global-teardown.js
+import { bsLocal } from "./browserstack.config";
+import { promisify } from "util";
+const sleep = promisify(setTimeout);
+export default async () => {
+    // Stop the Local instance after your test run is completed, i.e after driver.quit
+    let localStopped = false;
+
+    if (bsLocal && bsLocal.isRunning()) {
+        bsLocal.stop(() => {
+            localStopped = true;
+            console.log("Stopped BrowserStackLocal");
+        });
+        while (!localStopped) {
+            await sleep(1000);
+        }
+    }
+};

packages/tools/tests/package.json

@@ -33,7 +33,8 @@
         "jest": "^29.7.0",
         "jest-puppeteer": "^10.0.1",
         "sass": "^1.62.1",
-        "puppeteer": "^22.1.0"
+        "puppeteer": "^22.1.0",
+        "browserstack-local": "^1.5.5"
     },
     "optionalDependencies": {
         "jest-image-snapshot": "^6.1.0"

packages/tools/tests/playwright.config.ts

@@ -1,15 +1,18 @@
 import { defineConfig, devices } from "@playwright/test";
+import { getCdpEndpoint } from "./browserstack.config";
 
 const isCI = !!process.env.CI;
 const browserType = process.env.BROWSER || (isCI ? "Firefox" : "Chrome");
-const numberOfWorkers = process.env.CIWORKERS ? +process.env.CIWORKERS : process.env.CI ? 1 : undefined;
+const numberOfWorkers = process.env.CIWORKERS ? +process.env.CIWORKERS : process.env.CI ? 1 : browserType === "BrowserStack" ? 1 : undefined;
 const customFlags = process.env.CUSTOM_FLAGS ? process.env.CUSTOM_FLAGS.split(" ") : [];
 const headless = process.env.HEADLESS !== "false";
 const forceChrome = process.env.FORCE_CHROME === "true";
 
 const args = browserType === "Chrome" ? ["--use-angle=default", "--js-flags=--expose-gc"] : ["-wait-for-browser"];
 args.push(...customFlags);
 
+const browserStackBrowser = process.env.BROWSERSTACK_BROWSER || "chrome@latest:OSX Sonoma";
+
 export default defineConfig({
     testDir: "./test/playwright",
     /* Run tests in files in parallel */
@@ -29,6 +32,9 @@ export default defineConfig({
         ignoreHTTPSErrors: true,
     },
 
+    globalSetup: browserType === "BrowserStack" ? require.resolve("./globalSetup.ts") : undefined,
+    globalTeardown: browserType === "BrowserStack" ? require.resolve("./globalTeardown.ts") : undefined,
+
     /* Project configuration */
     projects: [
         {
@@ -43,13 +49,17 @@ export default defineConfig({
                           args,
                       },
                   }
-                : {
-                      ...devices["Desktop " + browserType],
-                      headless,
-                      launchOptions: {
-                          args,
-                      },
-                  },
+                : browserType === "BrowserStack"
+                  ? {
+                        connectOptions: { wsEndpoint: getCdpEndpoint(browserStackBrowser, "WebGL2") },
+                    }
+                  : {
+                        ...devices["Desktop " + browserType],
+                        headless,
+                        launchOptions: {
+                            args,
+                        },
+                    },
         },
 
         {
@@ -64,26 +74,35 @@ export default defineConfig({
                           args,
                       },
                   }
-                : {
-                      ...devices["Desktop " + browserType],
-                      headless,
-                      launchOptions: {
-                          args,
-                      },
-                  },
+                : browserType === "BrowserStack"
+                  ? {
+                        connectOptions: { wsEndpoint: getCdpEndpoint(browserStackBrowser, "WebGL1") },
+                    }
+                  : {
+                        ...devices["Desktop " + browserType],
+                        headless,
+                        launchOptions: {
+                            args,
+                        },
+                    },
         },
 
         {
             name: "webgpu",
             testMatch: "**/*webgpu.test.ts",
-            use: {
-                // use real chrome (not chromium) for webgpu tests
-                channel: "chrome",
-                headless,
-                launchOptions: {
-                    args,
-                },
-            },
+            use:
+                browserType === "BrowserStack"
+                    ? {
+                          connectOptions: { wsEndpoint: getCdpEndpoint(browserStackBrowser, "WebGPU") },
+                      }
+                    : {
+                          // use real chrome (not chromium) for webgpu tests
+                          channel: "chrome",
+                          headless,
+                          launchOptions: {
+                              args,
+                          },
+                      },
         },
     ],