Add UI test environment setup documentation and increase before hook timeout

Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

Author: Copilot

.github/copilot-instructions.md

@@ -188,6 +188,59 @@ yarn lint
 yarn lint:fix
 ```
 
+### Running UI Tests (yarn test:ui)
+
+The UI tests require specific setup in the test environment:
+
+**Prerequisites:**
+1. **Xvfb (X Virtual Framebuffer)** - Required for headless Electron testing
+   ```bash
+   # Start Xvfb on display :99
+   Xvfb :99 -screen 0 1024x720x24 -ac &
+   export DISPLAY=:99
+   ```
+
+2. **Mosquitto MQTT Broker** - Required for MQTT message testing
+   ```bash
+   # Install mosquitto
+   sudo apt-get install -y mosquitto mosquitto-clients
+   
+   # Start mosquitto service
+   sudo systemctl start mosquitto
+   
+   # Verify it's running on port 1883
+   sudo systemctl status mosquitto
+   ```
+
+3. **@types/node** - Required for TypeScript compilation
+   ```bash
+   yarn add -D @types/node
+   ```
+
+**Running UI Tests:**
+```bash
+# Build the application first
+yarn build
+
+# Run UI tests with proper display
+DISPLAY=:99 yarn test:ui
+```
+
+**Common Issues:**
+- **"Timeout exceeded" in before hook**: Mosquitto is not running or not accessible on port 1883
+- **"Cannot find type definition file for 'node'"**: Run `yarn add -D @types/node`
+- **Electron fails to launch**: Xvfb is not running or DISPLAY variable not set
+- **Tests hang**: Check if old Electron/mosquitto processes are still running and kill them
+
+**Environment Cleanup:**
+```bash
+# Kill old Electron processes
+ps aux | grep electron | grep -v grep | awk '{print $2}' | xargs kill -9 2>/dev/null
+
+# Kill old mosquitto processes (if running custom instance)
+ps aux | grep mosquitto | grep -v grep | awk '{print $2}' | xargs kill -9 2>/dev/null
+```
+
 ## MCP Introspection Testing
 
 The project supports MCP (Model Context Protocol) for automated testing with Playwright:

src/spec/ui-tests.spec.ts

@@ -46,7 +46,7 @@ describe('MQTT Explorer UI Tests', function () {
    * Setup: Start MQTT broker mock and launch Electron app
    */
   before(async function () {
-    this.timeout(30000)
+    this.timeout(90000) // Increased timeout for slow CI environments
 
     console.log('Starting MQTT mock broker...')
     await mockMqtt()
@@ -55,13 +55,14 @@ describe('MQTT Explorer UI Tests', function () {
     console.log('Launching Electron application...')
     electronApp = await electron.launch({
       args: [`${__dirname}/../../..`, '--runningUiTestOnCi', '--no-sandbox', '--disable-dev-shm-usage'],
+      timeout: 60000, // Give Electron more time to launch
     })
 
     console.log('Waiting for application window...')
-    page = await electronApp.firstWindow({ timeout: 10000 })
+    page = await electronApp.firstWindow({ timeout: 30000 })
 
     // Wait for the connection form to be ready (Host field exists in Electron, Username only in browser)
-    await page.locator('//label[contains(text(), "Host")]/..//input').waitFor({ timeout: 5000 })
+    await page.locator('//label[contains(text(), "Host")]/..//input').waitFor({ timeout: 10000 })
 
     console.log('Application ready for testing')
   })