Enable Playwright e2e tests in dev container and CI pipeline

.devcontainer/Dockerfile

@@ -3,9 +3,22 @@
 
 FROM mcr.microsoft.com/devcontainers/javascript-node:1-22-bookworm
 
-# Install system deps if needed (none required for static site)
+# Install system deps for static site tooling + Playwright (e2e tests)
 RUN apt-get update && apt-get install -y --no-install-recommends \
     curl \
+    # Playwright browser dependencies (so e2e tests run inside devcontainer)
+    libnspr4 \
+    libnss3 \
+    libatk1.0-0 \
+    libdbus-1-3 \
+    libatspi2.0-0 \
+    libxcomposite1 \
+    libxdamage1 \
+    libxfixes3 \
+    libxrandr2 \
+    libgbm1 \
+    libxkbcommon0 \
+    libasound2 \
     && rm -rf /var/lib/apt/lists/*
 
 # Ensure workspace dir exists (mount point)

.devcontainer/devcontainer.json

@@ -1,39 +1,43 @@
 {
-  "name": "mifi Ventures Landing",
-  "dockerFile": "Dockerfile",
-  "workspaceFolder": "/workspaces/mifi-ventures-landing",
-  "workspaceMount": "source=${localWorkspaceFolder},target=/workspaces/mifi-ventures-landing,type=bind",
-  "forwardPorts": [5173, 4173],
-  "portsAttributes": {
-    "5173": {
-      "label": "Dev (Vite)",
-      "onAutoForward": "notify"
-    },
-    "4173": {
-      "label": "Preview (Vite)",
-      "onAutoForward": "notify"
-    }
-  },
-  "customizations": {
-    "vscode": {
-      "extensions": [
-        "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode"
-      ],
-      "settings": {
-        "files.associations": {
-          "*.html": "html",
-          "*.css": "css",
-          "*.svg": "svg"
+    "name": "mifi Ventures Landing",
+    "dockerFile": "Dockerfile",
+    "workspaceFolder": "/workspaces/mifi-ventures-landing",
+    "workspaceMount": "source=${localWorkspaceFolder},target=/workspaces/mifi-ventures-landing,type=bind",
+    "postCreateCommand": "pnpm install && pnpm exec playwright install chromium",
+    "forwardPorts": [5173, 4173],
+    "portsAttributes": {
+        "5173": {
+            "label": "Dev (Vite)",
+            "onAutoForward": "notify"
         },
-        "editor.formatOnSave": true,
-        "editor.defaultFormatter": "esbenp.prettier-vscode",
-        "files.watcherExclude": {
-          "**/node_modules/**": true,
-          "**/.git/objects/**": true
+        "4173": {
+            "label": "Preview (Vite)",
+            "onAutoForward": "notify"
         }
-      }
-    }
-  },
-  "remoteUser": "node"
+    },
+    "customizations": {
+        "vscode": {
+            "extensions": [
+                "dbaeumer.vscode-eslint",
+                "esbenp.prettier-vscode",
+                "rvest.vs-code-prettier-eslint",
+                "yoavbls.pretty-ts-errors",
+                "svelte.svelte-vscode"
+            ],
+            "settings": {
+                "files.associations": {
+                    "*.html": "html",
+                    "*.css": "css",
+                    "*.svg": "svg"
+                },
+                "editor.formatOnSave": true,
+                "editor.defaultFormatter": "esbenp.prettier-vscode",
+                "files.watcherExclude": {
+                    "**/node_modules/**": true,
+                    "**/.git/objects/**": true
+                }
+            }
+        }
+    },
+    "remoteUser": "node"
 }

.woodpecker/ci.yaml

@@ -33,3 +33,13 @@ steps:
       commands:
           - corepack enable && corepack prepare pnpm@10.28.2 --activate
           - pnpm test
+
+    - name: test e2e
+      image: mcr.microsoft.com/playwright:v1.58.0-noble
+      commands:
+          - corepack enable && corepack prepare pnpm@10.28.2 --activate
+          - pnpm install --frozen-lockfile || pnpm install
+          - pnpm run build
+          - npx serve dist -p 4173 &
+          - sleep 2
+          - CI=1 pnpm run test:e2e

eslint.config.js

@@ -5,41 +5,41 @@ import prettier from 'eslint-config-prettier';
 import svelteConfig from './svelte.config.js';
 
 export default [
-  {
-    ignores: [
-      '.svelte-kit/**',
-      'dist/**',
-      'build/**',
-      'node_modules/**',
-      'site/**',
-      'static/**',
-      'build.mjs'
-    ]
-  },
-  js.configs.recommended,
-  ...tseslint.configs.recommended,
-  ...svelte.configs['flat/recommended'],
-  prettier,
-  {
-    files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
-    languageOptions: {
-      parserOptions: {
-        parser: tseslint.parser,
-        projectService: true,
-        extraFileExtensions: ['.svelte'],
-        svelteConfig
-      }
-    }
-  },
-  {
-    files: ['**/*.mjs', 'build.mjs'],
-    languageOptions: { globals: { console: 'readonly', process: 'readonly' } }
-  },
-  {
-    rules: {
-      'svelte/no-at-html-tags': 'warn',
-      'svelte/require-each-key': 'off',
-      'svelte/no-navigation-without-resolve': 'off'
-    }
-  }
+    {
+        ignores: [
+            '.svelte-kit/**',
+            'dist/**',
+            'build/**',
+            'node_modules/**',
+            'site/**',
+            'static/**',
+            'build.mjs',
+        ],
+    },
+    js.configs.recommended,
+    ...tseslint.configs.recommended,
+    ...svelte.configs['flat/recommended'],
+    prettier,
+    {
+        files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+        languageOptions: {
+            parserOptions: {
+                parser: tseslint.parser,
+                projectService: true,
+                extraFileExtensions: ['.svelte'],
+                svelteConfig,
+            },
+        },
+    },
+    {
+        files: ['**/*.mjs', 'build.mjs'],
+        languageOptions: { globals: { console: 'readonly', process: 'readonly' } },
+    },
+    {
+        rules: {
+            'svelte/no-at-html-tags': 'warn',
+            'svelte/require-each-key': 'off',
+            'svelte/no-navigation-without-resolve': 'off',
+        },
+    },
 ];