fix: use --with-deps on macOS/Windows and CI, skip on other Linux distros

Co-authored-by: Sidnioulz <5108577+Sidnioulz@users.noreply.github.com>

Author: Copilot

code/addons/vitest/src/postinstall.ts

@@ -1,6 +1,7 @@
 import { existsSync } from 'node:fs';
 import * as fs from 'node:fs/promises';
 import { writeFile } from 'node:fs/promises';
+import os from 'node:os';
 
 import { babelParse, generate, traverse } from 'storybook/internal/babel';
 import { AddonVitestService } from 'storybook/internal/cli';
@@ -165,9 +166,17 @@ export default async function postInstall(options: PostinstallOptions) {
         useRemotePkg: !!options.skipInstall,
       });
     } else {
+      const platform = os.platform();
+      const useWithDeps = platform === 'darwin' || platform === 'win32';
+      const manualCommand = useWithDeps
+        ? 'npx playwright install chromium --with-deps'
+        : 'npx playwright install chromium';
+      const linuxNote = !useWithDeps
+        ? '\n        Note: add --with-deps to the command above if you are on Debian or Ubuntu.'
+        : '';
       logger.warn(dedent`
         Playwright browser binaries installation skipped. Please run the following command manually later:
-        ${CLI_COLORS.cta('npx playwright install chromium')}
+        ${CLI_COLORS.cta(manualCommand)}${linuxNote}
       `);
     }
   }

code/core/src/cli/AddonVitestService.test.ts

@@ -1,4 +1,5 @@
 import * as fs from 'node:fs/promises';
+import os from 'node:os';
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -14,6 +15,7 @@ import { SupportedBuilder, SupportedFramework } from '../types';
 import { AddonVitestService } from './AddonVitestService';
 
 vi.mock('node:fs/promises', { spy: true });
+vi.mock('node:os', { spy: true });
 vi.mock('storybook/internal/common', { spy: true });
 vi.mock('storybook/internal/node-logger', { spy: true });
 vi.mock('empathic/find', { spy: true });
@@ -418,6 +420,7 @@ describe('AddonVitestService', () => {
     it('should execute playwright install command', async () => {
       const originalCI = process.env.CI;
       delete process.env.CI;
+      vi.mocked(os.platform).mockReturnValue('linux');
       try {
         type ChildProcessFactory = (signal?: AbortSignal) => ResultPromise;
         let commandFactory: ChildProcessFactory | ChildProcessFactory[];
@@ -447,6 +450,7 @@ describe('AddonVitestService', () => {
     it('should execute playwright install command with --with-deps in CI', async () => {
       const originalCI = process.env.CI;
       process.env.CI = 'true';
+      vi.mocked(os.platform).mockReturnValue('linux');
       try {
         type ChildProcessFactory = (signal?: AbortSignal) => ResultPromise;
         let commandFactory: ChildProcessFactory | ChildProcessFactory[];
@@ -474,6 +478,38 @@ describe('AddonVitestService', () => {
       }
     });
 
+    it.each(['darwin', 'win32'] as const)(
+      'should execute playwright install command with --with-deps on %s',
+      async (platform) => {
+        const originalCI = process.env.CI;
+        delete process.env.CI;
+        vi.mocked(os.platform).mockReturnValue(platform);
+        try {
+          type ChildProcessFactory = (signal?: AbortSignal) => ResultPromise;
+          let commandFactory: ChildProcessFactory | ChildProcessFactory[];
+          vi.mocked(prompt.confirm).mockResolvedValue(true);
+          vi.mocked(prompt.executeTaskWithSpinner).mockImplementation(
+            async (factory: ChildProcessFactory | ChildProcessFactory[]) => {
+              commandFactory = Array.isArray(factory) ? factory[0] : factory;
+              commandFactory();
+            }
+          );
+
+          await service.installPlaywright();
+
+          expect(mockPackageManager.runPackageCommand).toHaveBeenCalledWith({
+            args: ['playwright', 'install', 'chromium', '--with-deps'],
+            signal: undefined,
+            stdio: ['inherit', 'pipe', 'pipe'],
+          });
+        } finally {
+          if (originalCI !== undefined) {
+            process.env.CI = originalCI;
+          }
+        }
+      }
+    );
+
     it('should capture error stack when installation fails', async () => {
       const error = new Error('Installation failed');
       error.stack = 'Error stack trace';

code/core/src/cli/AddonVitestService.ts

@@ -1,4 +1,5 @@
 import fs from 'node:fs/promises';
+import os from 'node:os';
 
 import * as babel from 'storybook/internal/babel';
 import type { JsPackageManager } from 'storybook/internal/common';
@@ -106,8 +107,10 @@ export class AddonVitestService {
   /**
    * Install Playwright browser binaries for @storybook/addon-vitest
    *
-   * Installs Chromium via `npx playwright install chromium`. In CI environments, also installs
-   * system-level browser dependencies via `--with-deps`.
+   * Installs Chromium via `npx playwright install chromium`. In CI environments and on
+   * macOS/Windows (officially supported platforms), also installs system-level browser dependencies
+   * via `--with-deps`. On other platforms (e.g. Linux), `--with-deps` is omitted to avoid requiring
+   * `sudo` — system packages are typically managed by the distro package manager.
    *
    * @param packageManager - The package manager to use for installation
    * @param prompt - The prompt instance for displaying progress
@@ -124,7 +127,9 @@ export class AddonVitestService {
   ): Promise<{ errors: string[]; result: 'installed' | 'skipped' | 'aborted' | 'failed' }> {
     const errors: string[] = [];
 
-    const playwrightCommand = process.env.CI
+    const platform = os.platform();
+    const useWithDeps = !!process.env.CI || platform === 'darwin' || platform === 'win32';
+    const playwrightCommand = useWithDeps
       ? ['playwright', 'install', 'chromium', '--with-deps']
       : ['playwright', 'install', 'chromium'];
     const playwrightCommandString = this.packageManager.getPackageCommand(playwrightCommand);