test: add e2e tests

.github/workflows/e2e.yml

@@ -0,0 +1,169 @@
+name: E2E Tests
+
+on:
+  push:
+    branches:
+      - develop
+      - main
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  group: e2e-${{ github.event.number || github.sha }}
+  cancel-in-progress: true
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    name: E2E Tests
+
+    services:
+      redis-cache:
+        image: redis:alpine
+        ports:
+          - 13000:6379
+      redis-queue:
+        image: redis:alpine
+        ports:
+          - 11000:6379
+      mariadb:
+        image: mariadb:10.6
+        env:
+          MYSQL_ROOT_PASSWORD: root
+        ports:
+          - 3306:3306
+        options: --health-cmd="mariadb-admin ping" --health-interval=5s --health-timeout=2s --health-retries=3
+
+    steps:
+      - name: Clone
+        uses: actions/checkout@v4
+
+      - name: Setup Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.14"
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          check-latest: true
+
+      - name: Add to Hosts
+        run: echo "127.0.0.1 meet.test" | sudo tee -a /etc/hosts
+
+      - name: Cache pip
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: 'echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT'
+
+      - name: Cache yarn
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('e2e/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
+      - name: Install MariaDB Client
+        run: |
+          sudo apt update
+          sudo apt-get install -y mariadb-client
+
+      - name: Setup Bench
+        run: |
+          pip install frappe-bench
+          bench init --skip-redis-config-generation --skip-assets --python "$(which python)" ~/frappe-bench
+          mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL character_set_server = 'utf8mb4'"
+          mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL collation_server = 'utf8mb4_unicode_ci'"
+
+      - name: Install Meet
+        working-directory: /home/runner/frappe-bench
+        run: |
+          bench get-app meet $GITHUB_WORKSPACE
+          bench setup requirements --dev
+          bench new-site --db-root-password root --admin-password admin meet.test
+          bench --site meet.test install-app meet
+          bench build
+        env:
+          CI: "Yes"
+
+      - name: Configure Site for E2E
+        working-directory: /home/runner/frappe-bench
+        run: |
+          bench --site meet.test set-config sfu_secret "e2e-test-secret-key-12345"
+          bench --site meet.test set-config sfu_server_url "http://localhost"
+          bench --site meet.test set-config sfu_server_port "3000"
+          bench --site meet.test set-config ignore_csrf 1
+          bench --site meet.test set-config allow_tests true
+          bench --site meet.test set-config host_name "http://meet.test:8000"
+
+      - name: Build SFU Server
+        working-directory: ${{ github.workspace }}/sfu-server
+        run: |
+          yarn install --frozen-lockfile
+          yarn build
+
+      - name: Install E2E Dependencies
+        working-directory: ${{ github.workspace }}/e2e
+        run: |
+          yarn install --non-interactive
+          yarn playwright install chromium --with-deps
+
+      - name: Start Frappe Server
+        working-directory: /home/runner/frappe-bench
+        run: |
+          sed -i 's/^watch:/# watch:/g' Procfile
+          sed -i 's/^schedule:/# schedule:/g' Procfile
+          bench start &> bench_start.log &
+          echo "Waiting for Frappe server to start..."
+          timeout 60 bash -c 'until curl -s http://meet.test:8000 > /dev/null; do sleep 2; done'
+          echo "Frappe server is ready!"
+
+      - name: Start SFU Server
+        working-directory: ${{ github.workspace }}/sfu-server
+        run: |
+          yarn start &
+          echo "Waiting for SFU server..."
+          timeout 30 bash -c 'until curl -s http://localhost:3000/health > /dev/null 2>&1; do sleep 2; done'
+          echo "SFU server is ready"
+        env:
+          PORT: 3000
+          HOST: 0.0.0.0
+          JWT_SECRET: e2e-test-secret-key-12345
+          MEDIASOUP_ANNOUNCED_IP: 127.0.0.1
+          MEDIASOUP_NUM_WORKERS: 1
+
+      - name: Run E2E Tests
+        working-directory: ${{ github.workspace }}/e2e
+        run: yarn test
+        env:
+          BASE_URL: http://meet.test:8000
+          SFU_URL: http://localhost:3000
+          CI: true
+
+      - name: Upload Test Results
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report
+          path: |
+            e2e/playwright-report/
+            e2e/test-results/
+          compression-level: 1
+          retention-days: 7

e2e/.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+playwright-report/
+test-results/
+results.xml
+.state/
+.DS_Store

e2e/fixtures/media.ts

@@ -0,0 +1,61 @@
+export const STUB_MEDIA_SCRIPT = `(() => {
+	window.localStorage.setItem("mediaPref.autoHideToolbar", "0");
+
+	if (!navigator.mediaDevices) {
+		Object.defineProperty(navigator, "mediaDevices", {
+			value: {},
+			configurable: true,
+		});
+	}
+
+	function createFakeStream(label) {
+		const canvas = document.createElement("canvas");
+		canvas.width = 1280;
+		canvas.height = 720;
+		const context = canvas.getContext("2d");
+		let tick = 0;
+
+		const draw = () => {
+			if (!context) {
+				return;
+			}
+			context.fillStyle = "#111827";
+			context.fillRect(0, 0, canvas.width, canvas.height);
+			context.fillStyle = "#f9fafb";
+			context.font = "32px sans-serif";
+			context.fillText(label, 48, 80);
+			context.font = "20px monospace";
+			context.fillText(String(++tick), 48, 128);
+			requestAnimationFrame(draw);
+		};
+
+		draw();
+
+		const stream = canvas.captureStream(12);
+
+		try {
+			const AudioContextCtor = window.AudioContext || window.webkitAudioContext;
+			if (AudioContextCtor) {
+				const audioContext = new AudioContextCtor();
+				const oscillator = audioContext.createOscillator();
+				const gainNode = audioContext.createGain();
+				const destination = audioContext.createMediaStreamDestination();
+				gainNode.gain.value = 0.001;
+				oscillator.connect(gainNode);
+				gainNode.connect(destination);
+				oscillator.start();
+				for (const track of destination.stream.getAudioTracks()) {
+					stream.addTrack(track);
+				}
+			}
+		} catch {}
+
+		return stream;
+	}
+
+	const userStream = createFakeStream("camera");
+	const displayStream = createFakeStream("screen");
+
+	navigator.mediaDevices.getUserMedia = async () => userStream.clone();
+	navigator.mediaDevices.getDisplayMedia = async () => displayStream.clone();
+})();`;