enable running playwright ui in codespace and devcontainers

Author: thatkookooguy

.devcontainer/Dockerfile

@@ -21,6 +21,7 @@ ENV PATH=$PNPM_HOME:$PATH
 # 6. locales: required for character encoding support
 # 7. procps: provides ps command
 # 8. requirements to run playwright
+# 9. install xvfb to run headless browsers
 RUN apt-get update && apt-get install -y \
     git \
     curl \
@@ -29,6 +30,7 @@ RUN apt-get update && apt-get install -y \
     zsh \
     locales \
     procps \
+    xvfb \
     && rm -rf /var/lib/apt/lists/*
 
 # Generate and configure locale
@@ -64,10 +66,10 @@ COPY package.json pnpm-lock.yaml ./
 RUN pnpm install
 
 # Install Playwright dependencies (this ensures browsers can run correctly)
-# RUN pnpm exec playwright install-deps
+RUN pnpm exec playwright install-deps
 
 # Install Playwright browsers
-# RUN pnpm exec playwright install
+RUN pnpm exec playwright install
 
 # Expose the application's port
 EXPOSE 10102

.devcontainer/devcontainer.json

@@ -36,7 +36,8 @@
         "github.vscode-github-actions",
         "formulahendry.auto-rename-tag",
         "donjayamanne.githistory",
-        "oderwat.indent-rainbow"
+        "oderwat.indent-rainbow",
+        "GitHub.copilot"
       ],
       "settings": {
         "terminal.integrated.shell.linux": "/bin/zsh"
@@ -65,6 +66,9 @@
       "label": "unknown",
       "onAutoForward": "ignore"
     },
+    "10103": {
+      "label": "Playwright UI"
+    },
     "10102": {
       "label": "Backend"
     },

package.json

@@ -16,7 +16,8 @@
     "sdk:node": "swagger-codegen generate -i http://localhost:10102/api/docs-json -l typescript-axios -o ./sdks/node --additional-properties npmName=@kibibit/achievibit-server-node-sdk && npm run post:sdk:node",
     "sdk:angular": "swagger-codegen generate -i http://localhost:10102/api/docs-json -l typescript-angular -o ./sdks/angular -c ./angular-sdk-options.json",
     "sdk:angular:build": "ng-packagr -p ./sdks/angular/ng-package.json",
-    "create:github": "ts-node ./scripts/create-github.script.ts"
+    "create:github": "ts-node ./scripts/create-github.script.ts",
+    "e2e:ui": "xvfb-run playwright test --ui --ui-port=10103"
   },
   "author": "thatkookooguy <[email protected]>",
   "license": "MIT",