Build Docker image on slim base

.github/workflows/test.yaml

@@ -46,11 +46,11 @@ jobs:
         run: yarn playwright install --with-deps
       - name: Run backend components
         run: |
-          docker compose -f playwright-backend-docker-compose.yml up -d
+          docker compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up -d
           docker ps
-      - name: Copy config file
-        run: cp config/config.devenv.json public/config.json
       - name: Run Playwright tests
+        env:
+          USE_DOCKER: 1
         run: yarn playwright test
       - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
         if: ${{ !cancelled() }}

Dockerfile

@@ -6,7 +6,7 @@ COPY ./dist /dist
 WORKDIR /dist/assets
 RUN gzip -k ../index.html *.js *.map *.css *.wasm *-app-*.json 
 
-FROM nginxinc/nginx-unprivileged:alpine
+FROM nginxinc/nginx-unprivileged:alpine-slim
 
 COPY --from=builder ./dist /app
 

backend/dev_nginx.conf

@@ -62,8 +62,8 @@ server {
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
 
-      # JWT Service running at port 8080
-      proxy_pass http://auth-server:8080/;
+      # JWT Service running at port 6080
+      proxy_pass http://auth-server:6080/;
     }
 
     location ^~ /livekit/sfu/ {

dev-backend-docker-compose.yml

@@ -6,7 +6,7 @@ services:
     image: ghcr.io/element-hq/lk-jwt-service:latest-ci
     hostname: auth-server
     environment:
-      - LIVEKIT_JWT_PORT=8080
+      - LIVEKIT_JWT_PORT=6080
       - LIVEKIT_URL=wss://matrix-rtc.m.localhost/livekit/sfu
       - LIVEKIT_KEY=devkey
       - LIVEKIT_SECRET=secret
@@ -18,7 +18,7 @@ services:
         condition: on-failure
     ports:
       # HOST_PORT:CONTAINER_PORT
-      - 8080:8080
+      - 6080:6080
     networks:
       - ecbackend
 

package.json

@@ -22,6 +22,7 @@
     "test": "vitest",
     "test:coverage": "vitest --coverage",
     "backend": "docker-compose -f dev-backend-docker-compose.yml up",
+    "backend-playwright": "docker-compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up",
     "test:playwright": "playwright test",
     "test:playwright:open": "yarn test:playwright --ui",
     "links:enable": "mv .links.disabled.yaml .links.yaml & touch .links.yaml",

playwright.config.ts

@@ -7,6 +7,10 @@ Please see LICENSE in the repository root for full details.
 
 import { defineConfig, devices } from "@playwright/test";
 
+const baseURL = process.env.USE_DOCKER
+  ? "http://localhost:8080"
+  : "https://localhost:3000";
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -25,7 +29,7 @@ export default defineConfig({
   /* 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: "https://localhost:3000",
+    baseURL,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
@@ -73,8 +77,8 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: "yarn dev",
-    url: "https://localhost:3000",
+    command: "./scripts/playwright-webserver-command.sh",
+    url: baseURL,
     reuseExistingServer: !process.env.CI,
     ignoreHTTPSErrors: true,
   },

playwright/fixtures/widget-user.ts

@@ -30,8 +30,8 @@ const PASSWORD = "foobarbaz1!";
 const CONFIG_JSON = {
   default_server_config: {
     "m.homeserver": {
-      base_url: "http://synapse.localhost:8008",
-      server_name: "synapse.localhost",
+      base_url: "https://synapse.m.localhost",
+      server_name: "synapse.m.localhost",
     },
   },
 
@@ -63,16 +63,27 @@ const CONFIG_JSON = {
  * Set the Element Call URL in the dev tool settings using `window.mxSettingsStore` via `page.evaluate`.
  * @param page
  */
-async function setDevToolElementCallDevUrl(page: Page): Promise<void> {
-  await page.evaluate(() => {
-    window.mxSettingsStore.setValue(
-      "Developer.elementCallUrl",
-      null,
-      "device",
-      "https://localhost:3000/room",
-    );
-  });
-}
+const setDevToolElementCallDevUrl = process.env.USE_DOCKER
+  ? async (page: Page): Promise<void> => {
+      await page.evaluate(() => {
+        window.mxSettingsStore.setValue(
+          "Developer.elementCallUrl",
+          null,
+          "device",
+          "http://localhost:8080/room",
+        );
+      });
+    }
+  : async (page: Page): Promise<void> => {
+      await page.evaluate(() => {
+        window.mxSettingsStore.setValue(
+          "Developer.elementCallUrl",
+          null,
+          "device",
+          "https://localhost:3000/room",
+        );
+      });
+    };
 
 export const widgetTest = test.extend<MyFixtures>({
   asWidget: async ({ browser, context }, pUse) => {
@@ -99,6 +110,13 @@ export const widgetTest = test.extend<MyFixtures>({
       .getByRole("textbox", { name: "Confirm password" })
       .fill(PASSWORD);
     await ewPage1.getByRole("button", { name: "Register" }).click();
+    await expect(
+      ewPage1.getByRole("button", { name: "Continue" }),
+    ).toBeVisible();
+    await ewPage1
+      .getByRole("textbox", { name: "Password", exact: true })
+      .fill(PASSWORD);
+    await ewPage1.getByRole("button", { name: "Continue" }).click();
     await expect(
       ewPage1.getByRole("heading", { name: `Welcome ${userA}` }),
     ).toBeVisible();
@@ -127,6 +145,13 @@ export const widgetTest = test.extend<MyFixtures>({
       .getByRole("textbox", { name: "Confirm password" })
       .fill(PASSWORD);
     await ewPage2.getByRole("button", { name: "Register" }).click();
+    await expect(
+      ewPage2.getByRole("button", { name: "Continue" }),
+    ).toBeVisible();
+    await ewPage2
+      .getByRole("textbox", { name: "Password", exact: true })
+      .fill(PASSWORD);
+    await ewPage2.getByRole("button", { name: "Continue" }).click();
     await expect(
       ewPage2.getByRole("heading", { name: `Welcome ${userB}` }),
     ).toBeVisible();

scripts/playwright-webserver-command.sh

@@ -0,0 +1,10 @@
+#!/bin/sh
+if [ -n "$USE_DOCKER" ]; then
+    set -ex
+    yarn build
+    docker build -t element-call:testing .
+    docker run --rm --name element-call-testing -p 8080:8080 -v ./config/config.devenv.json:/app/config/json:ro,Z element-call:testing
+else
+    cp config/config.devenv.json public/config.json
+    exec yarn dev
+fi