fix: CI browser/karma (#2204)

* fix: browser tests

* chore: remove redundant replacement

Author: danisharora099

.github/workflows/ci.yml

@@ -56,6 +56,10 @@ jobs:
 
   browser:
     runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.48.0-jammy
+    env:
+      HOME: "/root"
     steps:
       - uses: actions/checkout@v3
         with: 
@@ -64,7 +68,6 @@ jobs:
         with:
           node-version: ${{ env.NODE_JS }}
       - uses: ./.github/actions/npm
-      - run: npx playwright install --with-deps
       - run: npm run build:esm
       - run: npm run test:browser
 

karma.conf.cjs

@@ -1,19 +1,33 @@
+const playwright = require("playwright");
 const webpack = require("webpack");
-const playwright = require('playwright');
 
 process.env.CHROME_BIN = playwright.chromium.executablePath();
 process.env.FIREFOX_BIN = playwright.firefox.executablePath();
 
 module.exports = function (config) {
-  config.set({
+  const configuration = {
     frameworks: ["webpack", "mocha"],
     files: ["src/**/!(node).spec.ts"],
     preprocessors: {
       "src/**/!(node).spec.ts": ["webpack"]
     },
     envPreprocessor: ["CI"],
     reporters: ["progress"],
-    browsers: ["ChromeHeadless", "FirefoxHeadless"],
+    browsers: process.env.CI
+      ? ["ChromeHeadlessCI", "FirefoxHeadless"]
+      : ["ChromeHeadless", "FirefoxHeadless"],
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: "ChromeHeadless",
+        flags: [
+          "--no-sandbox",
+          "--disable-gpu",
+          "--disable-dev-shm-usage",
+          "--disable-software-rasterizer",
+          "--disable-extensions"
+        ]
+      }
+    },
     singleRun: true,
     client: {
       mocha: {
@@ -28,7 +42,7 @@ module.exports = function (config) {
       plugins: [
         new webpack.DefinePlugin({
           "process.env.CI": process.env.CI || false,
-          "process.env.DISPLAY": "Browser",
+          "process.env.DISPLAY": "Browser"
         }),
         new webpack.ProvidePlugin({
           process: "process/browser.js"
@@ -45,5 +59,7 @@ module.exports = function (config) {
       stats: { warnings: false },
       devtool: "inline-source-map"
     }
-  });
+  };
+
+  config.set(configuration);
 };