From ef78e52c45b095a17c2ba7712109b0d7fc33416e Mon Sep 17 00:00:00 2001
From: Danish Arora <35004822+danisharora099@users.noreply.github.com>
Date: Thu, 16 Jan 2025 12:52:08 +0530
Subject: [PATCH] fix: CI browser/karma (#2204)

* fix: browser tests

* chore: remove redundant replacement
---
 .github/workflows/ci.yml |  5 ++++-
 karma.conf.cjs           | 26 +++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f20caf94fa..1a12df18f8 100644
--- a/.github/workflows/ci.yml
+++ b/.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
 
diff --git a/karma.conf.cjs b/karma.conf.cjs
index dcdf6e3694..94d4552222 100644
--- a/karma.conf.cjs
+++ b/karma.conf.cjs
@@ -1,11 +1,11 @@
+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: {
@@ -13,7 +13,21 @@ module.exports = function (config) {
     },
     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);
 };