fix(@angular/build): scope CHROME_BIN executable path to individual playwright instances

Previously, if CHROME_BIN was set in the environment and a user ran tests targeting the Playwright provider, the path was applied to the global Playwright launch options. This caused tests to crash if a user requested non-Chromium browsers (like Firefox) alongside Chromium, because Playwright would incorrectly attempt to launch the Chrome binary for the Firefox instance.

This commit updates the browser configuration to map instances before providers are initialized, and selectively injects `launchOptions: { executablePath: process.env.CHROME_BIN }` at the individual instance level for chrome and chromium only. This restores parity where users can maintain CHROME_BIN variables while safely invoking alternative browsers.

Author: clydin

packages/angular/build/src/builders/unit-test/runners/vitest/browser-provider.ts

@@ -37,7 +37,13 @@ function findBrowserProvider(
   return undefined;
 }
 
-function normalizeBrowserName(browserName: string): { browser: string; headless: boolean } {
+export interface BrowserInstanceConfiguration {
+  browser: string;
+  headless: boolean;
+  provider?: import('vitest/node').BrowserProviderOption;
+}
+
+function normalizeBrowserName(browserName: string): BrowserInstanceConfiguration {
   // Normalize browser names to match Vitest's expectations for headless but also supports karma's names
   // e.g., 'ChromeHeadless' -> 'chrome', 'FirefoxHeadless' -> 'firefox'
   // and 'Chrome' -> 'chrome', 'Firefox' -> 'firefox'.
@@ -79,6 +85,8 @@ export async function setupBrowserConfiguration(
     );
   }
 
+  const instances = browsers.map(normalizeBrowserName);
+
   let provider: import('vitest/node').BrowserProviderOption | undefined;
   if (providerName) {
     const providerPackage = `@vitest/browser-${providerName}`;
@@ -90,17 +98,25 @@ export async function setupBrowserConfiguration(
       if (typeof providerFactory === 'function') {
         if (providerName === 'playwright') {
           const executablePath = process.env['CHROME_BIN'];
-          provider = providerFactory({
-            launchOptions: executablePath
-              ? {
-                  executablePath,
-                }
-              : undefined,
+          const baseOptions = {
             contextOptions: {
               // Enables `prefer-color-scheme` for Vitest browser instead of `light`
               colorScheme: null,
             },
-          });
+          };
+
+          provider = providerFactory(baseOptions);
+
+          if (executablePath) {
+            for (const instance of instances) {
+              if (instance.browser === 'chrome' || instance.browser === 'chromium') {
+                instance.provider = providerFactory({
+                  ...baseOptions,
+                  launchOptions: { executablePath },
+                });
+              }
+            }
+          }
         } else {
           provider = providerFactory();
         }
@@ -133,7 +149,6 @@ export async function setupBrowserConfiguration(
   }
 
   const isCI = !!process.env['CI'];
-  const instances = browsers.map(normalizeBrowserName);
   const messages: string[] = [];
 
   if (providerName === 'preview') {

packages/angular/build/src/builders/unit-test/runners/vitest/browser-provider_spec.ts

@@ -47,8 +47,8 @@ describe('setupBrowserConfiguration', () => {
 
     expect(browser?.enabled).toBeTrue();
     expect(browser?.instances).toEqual([
-      { browser: 'chrome', headless: true },
-      { browser: 'firefox', headless: false },
+      jasmine.objectContaining({ browser: 'chrome', headless: true }),
+      jasmine.objectContaining({ browser: 'firefox', headless: false }),
     ]);
   });
 
@@ -66,8 +66,8 @@ describe('setupBrowserConfiguration', () => {
       );
 
       expect(browser?.instances).toEqual([
-        { browser: 'chrome', headless: true },
-        { browser: 'firefox', headless: true },
+        jasmine.objectContaining({ browser: 'chrome', headless: true }),
+        jasmine.objectContaining({ browser: 'firefox', headless: true }),
       ]);
     } finally {
       if (originalCI === undefined) {
@@ -196,8 +196,8 @@ describe('setupBrowserConfiguration', () => {
     );
 
     expect(browser?.instances).toEqual([
-      { browser: 'chrome', headless: true },
-      { browser: 'firefox', headless: true },
+      jasmine.objectContaining({ browser: 'chrome', headless: true }),
+      jasmine.objectContaining({ browser: 'firefox', headless: true }),
     ]);
     expect(messages).toEqual([]);
   });
@@ -215,4 +215,68 @@ describe('setupBrowserConfiguration', () => {
       'The "headless" option is unnecessary as all browsers are already configured to run in headless mode.',
     ]);
   });
+
+  describe('CHROME_BIN usage', () => {
+    let originalChromeBin: string | undefined;
+
+    beforeEach(() => {
+      originalChromeBin = process.env['CHROME_BIN'];
+      process.env['CHROME_BIN'] = '/custom/path/to/chrome';
+    });
+
+    afterEach(() => {
+      if (originalChromeBin === undefined) {
+        delete process.env['CHROME_BIN'];
+      } else {
+        process.env['CHROME_BIN'] = originalChromeBin;
+      }
+    });
+
+    it('should set executablePath on the individual chrome instance', async () => {
+      const { browser } = await setupBrowserConfiguration(
+        ['ChromeHeadless', 'Chromium'],
+        undefined,
+        false,
+        workspaceRoot,
+        undefined,
+      );
+
+      // Verify the global provider does NOT have executablePath
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect((browser?.provider as any)?.options?.launchOptions?.executablePath).toBeUndefined();
+
+      // Verify the individual instances have executablePath
+      expect(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (browser?.instances?.[0]?.provider as any)?.options?.launchOptions?.executablePath,
+      ).toBe('/custom/path/to/chrome');
+      expect(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (browser?.instances?.[1]?.provider as any)?.options?.launchOptions?.executablePath,
+      ).toBe('/custom/path/to/chrome');
+    });
+
+    it('should set executablePath for chrome instances but not for others when mixed browsers are requested', async () => {
+      const { browser } = await setupBrowserConfiguration(
+        ['ChromeHeadless', 'Firefox'],
+        undefined,
+        false,
+        workspaceRoot,
+        undefined,
+      );
+
+      // Verify the global provider does NOT have executablePath
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect((browser?.provider as any)?.options?.launchOptions?.executablePath).toBeUndefined();
+
+      // Verify chrome gets it
+      expect(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (browser?.instances?.[0]?.provider as any)?.options?.launchOptions?.executablePath,
+      ).toBe('/custom/path/to/chrome');
+
+      // Verify firefox does not
+      expect(browser?.instances?.[1]?.provider).toBeUndefined();
+    });
+  });
 });