chore: replace BrowserStack with Cypress cross-browser matrix (#919)

Author: yogeshchoudhary147

.github/workflows/browserstack.yml

@@ -0,0 +1,96 @@
+name: Cross-Browser Tests
+
+on:
+  merge_group:
+  workflow_dispatch:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
+
+env:
+  NODE_VERSION: 22
+
+jobs:
+  build:
+    name: Build Package
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
+
+      - name: Build package
+        uses: ./.github/actions/build
+        with:
+          node: ${{ env.NODE_VERSION }}
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v7
+        with:
+          name: dist-${{ github.run_id }}
+          path: dist
+          retention-days: 1
+
+  cross-browser:
+    needs: build
+    name: ${{ matrix.browser }}
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 25
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [windows-latest]
+        browser: [chrome, edge, firefox]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
+
+      - name: Download build artifacts
+        uses: actions/download-artifact@v8
+        with:
+          name: dist-${{ github.run_id }}
+          path: dist
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: Run cross-browser tests
+        uses: cypress-io/github-action@v7
+        with:
+          browser: ${{ matrix.browser }}
+          start: npm run start:local
+          wait-on: 'http://127.0.0.1:4200'
+          spec: projects/playground/e2e/integration/playground.cy.ts
+          config-file: cypress.config.js
+          install-command: npx cypress install
+
+      - name: Upload Cypress screenshots
+        if: failure()
+        uses: actions/upload-artifact@v7
+        with:
+          name: cypress-screenshots-${{ matrix.browser }}-${{ github.run_id }}
+          path: projects/playground/e2e/screenshots
+          retention-days: 30
+          if-no-files-found: ignore

.github/workflows/cross-browser.yml

@@ -0,0 +1,18 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://127.0.0.1:4200',
+    specPattern: 'projects/playground/e2e/integration/**/*.cy.ts',
+    screenshotsFolder: 'projects/playground/e2e/screenshots',
+    videosFolder: 'projects/playground/e2e/videos',
+    supportFile: false,
+    chromeWebSecurity: false,
+    viewportWidth: 1000,
+    viewportHeight: 1000,
+    reporter: 'junit',
+    reporterOptions: {
+      mochaFile: 'projects/playground/test-results/e2e/junit-[hash].xml',
+    },
+  },
+});

browserstack.json

@@ -54,11 +54,10 @@
     "@types/node": "^22.19.17",
     "@typescript-eslint/eslint-plugin": "^8.59.1",
     "@typescript-eslint/parser": "^8.59.0",
-    "browserstack-cypress-cli": "^1.36.5",
     "concurrently": "^6.2.0",
     "cors": "^2.8.6",
     "cross-fetch": "^4.1.0",
-    "cypress": "^13.17.0",
+    "cypress": "^14.5.4",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "latest",
     "eslint-plugin-jsdoc": "latest",