Ensure Playwright browsers are installed in all GitHub workflow test jobs (#981)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

.github/workflows/docker-browser.yml

@@ -166,6 +166,9 @@ jobs:
       - name: Install dependencies for browser tests
         run: yarn install --frozen-lockfile
 
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+
       - name: Start Docker container for browser tests
         run: |
           docker run -d \

.github/workflows/tests.yml

@@ -147,6 +147,8 @@ jobs:
           node-version: '24'
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
       - name: Build Browser Mode
         run: yarn build:server
       - name: Test App

CI_CD.md

@@ -40,10 +40,13 @@ This workflow builds and publishes a Docker image for the browser mode.
 4. Verify HTTP response
 5. Test data directory creation
 6. Check Docker image size
-7. Start container for frontend tests
+7. Setup Node.js 24 for browser tests
-8. Test frontend bundles (app.bundle.js, vendors.bundle.js)
+8. Install dependencies for browser tests
-9. Push image to GitHub Container Registry
+9. Install Playwright browsers (`npx playwright install --with-deps chromium`)
-10. Generate build attestation for supply chain security
+10. Start container for browser tests
+11. Run browser test suite with Playwright
+12. Push image to GitHub Container Registry
+13. Generate build attestation for supply chain security
 
 **Image Features**:
 - Multi-stage build for minimal size
@@ -65,6 +68,11 @@ This workflow runs on pull requests to `master`, `beta`, and `release` branches.
 Tests the traditional Electron desktop application:
 
 - **Environment**: Custom Docker container (`ghcr.io/thomasnordquist/mqtt-explorer-ui-tests:latest`)
+  - Based on Node.js 24
+  - Includes Xvfb for headless display
+  - Includes FFmpeg for video recording
+  - Includes Mosquitto MQTT broker
+  - **Playwright browsers pre-installed** with system dependencies
 - **Steps**:
   1. Install dependencies with frozen lockfile
   2. Build the Electron application
@@ -84,20 +92,21 @@ Tests the traditional Electron desktop application:
 
 Tests the new browser/server mode:
 
-- **Environment**: Ubuntu latest with Node.js 20
+- **Environment**: Ubuntu latest with Node.js 24
 - **Services**:
   - **Mosquitto MQTT Broker**: Eclipse Mosquitto v2 on port 1883
     - Health checks enabled
     - Anonymous connections allowed
 - **Steps**:
-  1. Setup Node.js 20
+  1. Setup Node.js 24
   2. Install dependencies
-  3. Build browser mode (`yarn build:server`)
+  3. Install Playwright browsers (`npx playwright install --with-deps chromium`)
-  4. Run unit tests (app + backend)
+  4. Build browser mode (`yarn build:server`)
-  5. Start server in background with test credentials
+  5. Run unit tests (app + backend)
-  6. Wait for server to be ready
+  6. Start server in background with test credentials
-  7. Run browser smoke tests
+  7. Wait for server to be ready
-  8. Clean up server process
+  8. Run browser smoke tests
+  9. Clean up server process
 
 **Environment Variables**:
 - `MQTT_EXPLORER_USERNAME=test`
@@ -311,6 +320,7 @@ The workflow uses AWS CLI v2 installed directly and `aws-actions/configure-aws-c
 
 ## Future Improvements
 
+- [x] Add Playwright browser installation to workflows (browser tests can now use Playwright)
 - [ ] Add E2E browser tests with Playwright
 - [ ] Test WebSocket connections in browser mode
 - [ ] Add performance benchmarks

Dockerfile

@@ -10,6 +10,11 @@ ENV LANG en_US.UTF-8
 ENV LANGUAGE en_US:en
 ENV LC_ALL en_US.UTF-8
 
+# Install Playwright and browsers
+# This ensures Playwright browsers are pre-installed in the container
+RUN npm install -g playwright@1.57.0 && \
+    npx playwright install --with-deps chromium
+
 CMD /bin/bash
 
 VOLUME /app