Fix E2E tests to skip when dependencies unavailable

.github/workflows/ci.yml

@@ -18,8 +18,6 @@ jobs:
           bun-version: latest
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: 9
 
       - uses: actions/setup-node@v4
         with:
@@ -29,5 +27,11 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Install ImageMagick
+        run: sudo apt-get update && sudo apt-get install -y imagemagick
+
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps
+
       - name: Run tests
         run: pnpm test:e2e

tests/e2e/fixtures/test-project/package.json

@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 5173",
+    "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },

tests/e2e/fixtures/test-project/vite.config.ts

@@ -3,7 +3,4 @@ import react from '@vitejs/plugin-react';
 
 export default defineConfig({
   plugins: [react()],
-  server: {
-    port: 5173,
-  },
 });

tests/e2e/skill-integration.test.ts

@@ -18,9 +18,13 @@ import { fileURLToPath } from 'url';
 import fs from 'fs-extra';
 import { execSync } from 'child_process';
 import { startDevServer, stopDevServer, waitForServer, getDevServerPort } from './utils/dev-server';
-import { resetTestProject, cleanTmpDir, isImageMagickAvailable, getTmpDir } from './utils/cleanup';
+import { resetTestProject, cleanTmpDir, isImageMagickAvailable, isPlaywrightAvailable, getTmpDir } from './utils/cleanup';
 import { TEST_PROJECT_DIR } from './setup';
 
+// Check tool availability for tests that require them
+const hasImageMagick = isImageMagickAvailable();
+const hasPlaywright = isPlaywrightAvailable();
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
@@ -133,8 +137,8 @@ describeIf('Figma Integration Tests (requires Figma MCP)', () => {
   });
 });
 
-// Always run these tests (no Figma needed)
-describe('Preview Wrapper Dimension Tests', () => {
+// These tests require Playwright and ImageMagick
+describe.skipIf(!hasPlaywright || !hasImageMagick)('Preview Wrapper Dimension Tests', () => {
   afterAll(async () => {
     await stopDevServer();
   });

tests/e2e/utils/cleanup.ts

@@ -209,3 +209,21 @@ export function isImageMagickAvailable(): boolean {
     return false;
   }
 }
+
+/**
+ * Checks if Playwright browsers are installed
+ */
+export function isPlaywrightAvailable(): boolean {
+  try {
+    // Check if chromium browser is available by running a quick check
+    execSync('npx playwright --version', { stdio: 'ignore' });
+    // Also check if browsers are actually installed
+    const result = execSync('ls ~/.cache/ms-playwright/chromium-* 2>/dev/null || echo "not found"', {
+      encoding: 'utf-8',
+      stdio: ['pipe', 'pipe', 'ignore'],
+    });
+    return !result.includes('not found');
+  } catch {
+    return false;
+  }
+}

tests/e2e/validate-visual.test.ts

@@ -4,13 +4,17 @@ import os from 'os';
 import fs from 'fs-extra';
 import { execSync, spawnSync } from 'child_process';
 import { fileURLToPath } from 'url';
+import { isImageMagickAvailable } from './utils/cleanup';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const SCRIPT_PATH = path.resolve(__dirname, '../../skills/figma-to-react/scripts/validate-visual.sh');
 const TMP_DIR = path.join(os.tmpdir(), 'figma-to-react-validate-visual-tests');
 
+// Check if ImageMagick is available for tests that require it
+const hasImageMagick = isImageMagickAvailable();
+
 // Helper to create a solid color test image with ImageMagick
 const createTestImage = (filepath: string, width: number, height: number, color: string = 'blue') => {
   execSync(`magick -size ${width}x${height} xc:${color} "${filepath}"`, { stdio: 'pipe' });
@@ -36,7 +40,7 @@ const runValidation = (
   };
 };
 
-describe('validate-visual.sh - Visual Validation', () => {
+describe.skipIf(!hasImageMagick)('validate-visual.sh - Visual Validation', () => {
   beforeEach(async () => {
     await fs.ensureDir(TMP_DIR);
     // Clean up any previous validation output