Add Wokwi ESP32 simulation testing with Playwright

Co-authored-by: softhack007 <[email protected]>

Author: Copilot

.github/workflows/wokwi-test.yml

@@ -0,0 +1,122 @@
+name: Wokwi ESP32 Simulation Test
+
+on:
+  push:
+    branches: [ "mdev", "copilot/**" ]
+  pull_request:
+    branches: [ "mdev" ]
+  workflow_dispatch:
+
+jobs:
+  wokwi-test:
+    name: Test WLED with Wokwi Simulator
+    runs-on: ubuntu-22.04
+    
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Cache pip
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements.txt') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+
+      - name: Cache PlatformIO
+        uses: actions/cache@v4
+        with:
+          path: ~/.platformio
+          key: ${{ runner.os }}-pio-esp32dev_compat
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.9'
+
+      - name: Install PlatformIO
+        run: pip install -r requirements.txt
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install Node.js dependencies
+        run: npm ci
+
+      - name: Build web UI
+        run: npm run build
+
+      - name: Build firmware for ESP32
+        env:
+          WLED_RELEASE: True
+        run: pio run -e esp32dev_compat
+
+      - name: Install Wokwi CLI
+        run: curl -L https://wokwi.com/ci/install.sh | sh
+
+      - name: Prepare firmware for Wokwi
+        run: ./test/wokwi/prepare-firmware.sh esp32dev_compat
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Start Wokwi simulator in background
+        run: |
+          cd test/wokwi
+          # Start simulator in background
+          ./run-simulator.sh &
+          WOKWI_PID=$!
+          echo "WOKWI_PID=$WOKWI_PID" >> $GITHUB_ENV
+          
+          # Wait for simulator to start and web server to be ready
+          echo "Waiting for WLED web server to be ready..."
+          timeout=60
+          elapsed=0
+          while [ $elapsed -lt $timeout ]; do
+            if curl -s http://localhost:8080 > /dev/null 2>&1; then
+              echo "Web server is ready!"
+              break
+            fi
+            echo "Waiting... ($elapsed seconds)"
+            sleep 2
+            elapsed=$((elapsed + 2))
+          done
+          
+          if [ $elapsed -ge $timeout ]; then
+            echo "Error: Web server did not start within $timeout seconds"
+            exit 1
+          fi
+
+      - name: Run Playwright tests
+        run: npm run test:wokwi
+        env:
+          CI: true
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+
+      - name: Stop Wokwi simulator
+        if: always()
+        run: |
+          if [ ! -z "$WOKWI_PID" ]; then
+            kill $WOKWI_PID || true
+          fi
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: wokwi-test-results
+          path: |
+            test-results/
+            playwright-report/
+          retention-days: 7

.gitignore

@@ -28,3 +28,14 @@ compile_commands.json
 /wled00/wled00.ino.cpp
 /wled00/html_*.h
 _codeql_detected_source_root
+
+# Playwright and test artifacts
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+# Wokwi runtime files
+/test/wokwi/firmware.bin
+/test/wokwi/firmware.elf
+/test/wokwi/.wokwi/
+

package.json

@@ -9,7 +9,10 @@
   },
   "scripts": {
     "build": "node tools/cdata.js",
-    "dev": "nodemon -e js,html,htm,css,png,jpg,gif,ico,js -w tools/ -w wled00/data/ -x node tools/cdata.js"
+    "dev": "nodemon -e js,html,htm,css,png,jpg,gif,ico,js -w tools/ -w wled00/data/ -x node tools/cdata.js",
+    "test": "npm run test:cdata",
+    "test:cdata": "node tools/cdata-test.js",
+    "test:wokwi": "playwright test test/playwright/wokwi-basic.spec.js"
   },
   "repository": {
     "type": "git",
@@ -27,5 +30,8 @@
     "inliner": "^1.13.1",
     "nodemon": "^2.0.20",
     "zlib": "^1.0.5"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.40.0"
   }
 }

playwright.config.js

@@ -0,0 +1,52 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Playwright configuration for WLED-MM Wokwi testing
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './test/playwright',
+  
+  /* Run tests in files in parallel */
+  fullyParallel: false,
+  
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  
+  /* Opt out of parallel tests on CI. */
+  workers: 1,
+  
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:8080',
+    
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    
+    /* Screenshot on failure */
+    screenshot: 'only-on-failure',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'echo "Wokwi simulator should be started separately"',
+    url: 'http://localhost:8080',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+  },
+});

test/playwright/wokwi-basic.spec.js

@@ -0,0 +1,136 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Basic WLED-MM Web Interface Tests
+ * These tests verify that the web interface loads correctly
+ * and doesn't have JavaScript errors on basic pages.
+ */
+
+test.describe('WLED-MM Basic Web Interface', () => {
+  let consoleErrors = [];
+  let pageErrors = [];
+
+  test.beforeEach(async ({ page }) => {
+    // Reset error collectors
+    consoleErrors = [];
+    pageErrors = [];
+
+    // Listen for console errors
+    page.on('console', msg => {
+      if (msg.type() === 'error') {
+        consoleErrors.push(msg.text());
+      }
+    });
+
+    // Listen for page errors
+    page.on('pageerror', error => {
+      pageErrors.push(error.message);
+    });
+  });
+
+  test('should load main index page without errors', async ({ page }) => {
+    await page.goto('/');
+    
+    // Wait for page to be loaded
+    await page.waitForLoadState('networkidle');
+    
+    // Check for page title or main content
+    const title = await page.title();
+    expect(title).toBeTruthy();
+    
+    // Verify no JavaScript errors occurred
+    expect(consoleErrors).toHaveLength(0);
+    expect(pageErrors).toHaveLength(0);
+    
+    console.log('Main page loaded successfully');
+  });
+
+  test('should load settings page without errors', async ({ page }) => {
+    await page.goto('/settings.htm');
+    
+    // Wait for page to be loaded
+    await page.waitForLoadState('networkidle');
+    
+    // Verify no JavaScript errors occurred
+    expect(consoleErrors).toHaveLength(0);
+    expect(pageErrors).toHaveLength(0);
+    
+    console.log('Settings page loaded successfully');
+  });
+
+  test('should load WiFi settings page without errors', async ({ page }) => {
+    await page.goto('/settings/wifi');
+    
+    // Wait for page to be loaded
+    await page.waitForLoadState('networkidle');
+    
+    // Verify no JavaScript errors occurred
+    expect(consoleErrors).toHaveLength(0);
+    expect(pageErrors).toHaveLength(0);
+    
+    console.log('WiFi settings page loaded successfully');
+  });
+
+  test('should load LED settings page without errors', async ({ page }) => {
+    await page.goto('/settings/leds');
+    
+    // Wait for page to be loaded
+    await page.waitForLoadState('networkidle');
+    
+    // Verify no JavaScript errors occurred
+    expect(consoleErrors).toHaveLength(0);
+    expect(pageErrors).toHaveLength(0);
+    
+    console.log('LED settings page loaded successfully');
+  });
+
+  test('should load UI settings page without errors', async ({ page }) => {
+    await page.goto('/settings/ui');
+    
+    // Wait for page to be loaded
+    await page.waitForLoadState('networkidle');
+    
+    // Verify no JavaScript errors occurred
+    expect(consoleErrors).toHaveLength(0);
+    expect(pageErrors).toHaveLength(0);
+    
+    console.log('UI settings page loaded successfully');
+  });
+
+  test('should load edit page without errors', async ({ page }) => {
+    await page.goto('/edit.htm');
+    
+    // Wait for page to be loaded
+    await page.waitForLoadState('networkidle');
+    
+    // Verify no JavaScript errors occurred
+    expect(consoleErrors).toHaveLength(0);
+    expect(pageErrors).toHaveLength(0);
+    
+    console.log('Edit page loaded successfully');
+  });
+
+  test('should be able to check JSON API info', async ({ page }) => {
+    const response = await page.goto('/json/info');
+    
+    expect(response?.status()).toBe(200);
+    
+    const json = await response?.json();
+    expect(json).toBeTruthy();
+    expect(json.ver).toBeTruthy(); // Should have version
+    
+    console.log('JSON API responding correctly, version:', json.ver);
+  });
+
+  test('should be able to check JSON API state', async ({ page }) => {
+    const response = await page.goto('/json/state');
+    
+    expect(response?.status()).toBe(200);
+    
+    const json = await response?.json();
+    expect(json).toBeTruthy();
+    expect(json.on).toBeDefined(); // Should have on/off state
+    
+    console.log('JSON state API responding correctly');
+  });
+});