workflow

Author: raju-opti

.github/workflows/javascript.yml

@@ -40,6 +40,31 @@ jobs:
       CI_USER_TOKEN: ${{ secrets.CI_USER_TOKEN }}
       TRAVIS_COM_TOKEN: ${{ secrets.TRAVIS_COM_TOKEN }}
 
+  browser_tests:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        browser: ['chrome', 'firefox', 'edge', 'safari']
+    env:
+      BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
+      BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+      BROWSERSTACK_LOCAL: 'true'
+      USE_LOCAL_BROWSER: 'false'
+      VITEST_BROWSER: ${{ matrix.browser }}
+    steps:
+    - uses: actions/checkout@v3
+    - name: Set up Node
+      uses: actions/setup-node@v3
+      with:
+        node-version: 20
+        cache: 'npm'
+        cache-dependency-path: ./package-lock.json
+    - name: Browser tests - ${{ matrix.browser }}
+      working-directory: .
+      run: |
+        npm install
+        npm run test-vitest-browser
+
   # crossbrowser_and_umd_unit_tests:
   #   runs-on: ubuntu-latest
   #   env:

public/broadcast-channel-polyfill-bundle.js

@@ -0,0 +1,14 @@
+// Apply BroadcastChannel polyfill for Safari 14 and other browsers that don't support it
+// The bundled library exposes BroadcastChannel2
+(function() {
+  if (typeof window !== 'undefined' && typeof window.BroadcastChannel === 'undefined') {
+    if (typeof window.BroadcastChannel2 !== 'undefined') {
+      window.BroadcastChannel = window.BroadcastChannel2;
+      console.log('[Polyfill] BroadcastChannel polyfill applied successfully');
+    } else {
+      console.error('[Polyfill] BroadcastChannel2 not found - polyfill bundle may not have loaded');
+    }
+  } else if (typeof window !== 'undefined') {
+    console.log('[Polyfill] Native BroadcastChannel detected, polyfill not needed');
+  }
+})();

public/broadcast-channel-polyfill.js

@@ -22,10 +22,6 @@ require('dotenv').config();
 const { execSync } = require('child_process');
 const browserstack = require('browserstack-local');
 
-
-// Note: Browser instances are now configured in vitest.browser.config.mts
-// The Vitest config will run all browsers (Chrome, Firefox, Edge, Safari, Opera) automatically
-
 // Determine if we should use local browser or BrowserStack
 // Priority: USE_LOCAL_BROWSER env var, then check for BrowserStack credentials
 let useLocalBrowser = process.env.USE_LOCAL_BROWSER === 'true';
@@ -98,6 +94,9 @@ let hasFailures = false;
 
 async function runTests() {
   try {
+    // Get browser name from environment variable (default to chrome)
+    const browserName = process.env.VITEST_BROWSER || 'chrome';
+
     // Only start tunnel if using BrowserStack
     if (!useLocalBrowser) {
       await startTunnel();
@@ -106,26 +105,26 @@ async function runTests() {
     }
 
     console.log(`\n${'='.repeat(80)}`);
-    const browserList = process.env.VITEST_BROWSER || 'Chrome 102, Firefox 91, Edge 84, Safari 13.1, Opera 76';
-    console.log(`Running tests on ${useLocalBrowser ? 'local browsers' : 'BrowserStack'} (${browserList})...`);
+    console.log(`Running tests on ${useLocalBrowser ? 'local' : 'BrowserStack'}: ${browserName}`);
     console.log('='.repeat(80));
 
     // Set environment variables
     const env = {
       ...process.env,
       USE_LOCAL_BROWSER: useLocalBrowser ? 'true' : 'false',
+      VITEST_BROWSER: browserName,
     };
 
     try {
-      // Run vitest with the browser config - it will run all browser instances
+      // Run vitest with the browser config
       execSync('npm run test-vitest -- --config vitest.browser.config.mts', {
         stdio: 'inherit',
         env,
       });
 
-      console.log('\n✓ All browser tests passed!');
+      console.log(`\n✓ ${browserName} tests passed!`);
     } catch (error) {
-      console.error('\n✗ Some browser tests failed');
+      console.error(`\n✗ ${browserName} tests failed`);
       hasFailures = true;
     }
 
@@ -134,9 +133,9 @@ async function runTests() {
     console.log('='.repeat(80));
 
     if (hasFailures) {
-      console.error('Some browser tests failed. See above for details.');
+      console.error(`${browserName} tests failed. See above for details.`);
     } else {
-      console.log('All browser tests passed!');
+      console.log(`${browserName} tests passed!`);
     }
   } finally {
     // Only stop tunnel if using BrowserStack

scripts/run-browser-tests.js

@@ -171,19 +171,24 @@ const useLocalBrowser = process.env.USE_LOCAL_BROWSER === 'true';
 // }
 
 // Define browser configurations
+// BroadcastChannel API support: Safari 15.4+, Edge 84+, Firefox 91+, Chrome 102+, Opera 76+
 const allBrowserConfigs = [
-  // { name: 'chrome', browserName: 'chrome', os: 'Windows', osVersion: '11' },
-  // { name: 'firefox', browserName: 'firefox', os: 'Windows', osVersion: '11' },
-  // { name: 'edge', browserName: 'edge', os: 'Windows', osVersion: '11' },
-  // we need safari 15.4 + cause vitest/browser relies on BroadcastChannel API
-  { name: 'safari', browserName: 'safari', os: 'OS X', osVersion: 'Monterey' }, // Safari 15+ has BroadcastChannel support
+  { name: 'chrome', browserName: 'chrome', os: 'Windows', osVersion: '11' },
+  { name: 'firefox', browserName: 'firefox', os: 'Windows', osVersion: '11' },
+  { name: 'edge', browserName: 'edge', os: 'Windows', osVersion: '11' },
+  { name: 'safari', browserName: 'safari', os: 'OS X', osVersion: 'Monterey' },
+  { name: 'opera', browserName: 'opera', os: 'Windows', osVersion: '11' },
 ];
 
-// Filter browsers based on VITEST_BROWSER environment variable
-const browserFilter = process.env.VITEST_BROWSER;
-const browserConfigs = browserFilter
-  ? allBrowserConfigs.filter(config => config.name === browserFilter.toLowerCase())
-  : allBrowserConfigs;
+// Get browser from VITEST_BROWSER env var (default to chrome)
+const browserName = process.env.VITEST_BROWSER || 'chrome';
+const browserConfig = allBrowserConfigs.find(c => c.name === browserName.toLowerCase());
+
+if (!browserConfig) {
+  throw new Error(`Browser "${browserName}" not found. Available: ${allBrowserConfigs.map(c => c.name).join(', ')}`);
+}
+
+const browserConfigs = [browserConfig];
 
 // Build local browser capabilities
 function buildLocalCapabilities(browserName: string) {
@@ -203,13 +208,13 @@ function buildLocalCapabilities(browserName: string) {
 function buildBrowserStackCapabilities(config: typeof allBrowserConfigs[0]) {
   return {
     browserName: config.browserName,
-    'goog:chromeOptions': {
-      args: [
-        '--disable-blink-features=AutomationControlled',
-        '--disable-dev-shm-usage',
-        '--no-sandbox',
-      ],
-    },
+    // 'goog:chromeOptions': {
+    //   args: [
+    //     '--disable-blink-features=AutomationControlled',
+    //     '--disable-dev-shm-usage',
+    //     '--no-sandbox',
+    //   ],
+    // },
     'bstack:options': {
       os: config.os,
       osVersion: config.osVersion,
@@ -260,6 +265,16 @@ export default defineConfig({
       name: 'console-capture-plugin',
       enforce: 'pre', // Run before other plugins
       configureServer(server) {
+        // Check if console capture is enabled (default to false)
+        const consoleCaptureEnabled = process.env.VITEST_CONSOLE_CAPTURE === 'true';
+
+        if (!consoleCaptureEnabled) {
+          console.log('[Console Capture] Disabled (set VITEST_CONSOLE_CAPTURE=true to enable)');
+          return;
+        }
+
+        console.log('[Console Capture] Enabled');
+
         // Add middleware to handle console log posts from browser
         server.middlewares.use((req, res, next) => {
           if (req.url === '/__vitest_console__' && req.method === 'POST') {
@@ -442,7 +457,7 @@ export default defineConfig({
     browser: {
       enabled: true,
       provider: 'webdriverio',
-      headless: useLocalBrowser ? (process.env.CI === 'true' || process.env.HEADLESS === 'true') : false,
+      headless: false,
       // Vitest 3 browser mode configuration
       instances: buildBrowserInstances(),
       // Increase browser connection timeout for Safari on BrowserStack (default is 60s)