Add docker-compose Playwright E2E stack

.dockerignore

@@ -0,0 +1,12 @@
+node_modules/
+dist/
+logs/
+.DS_Store
+.git/
+config/local.json
+pleroma-backend/
+test/e2e/reports/
+test/e2e-playwright/test-results/
+test/e2e-playwright/playwright-report/
+__screenshots__/
+

.gitignore

@@ -4,6 +4,8 @@ dist/
 npm-debug.log
 test/unit/coverage
 test/e2e/reports
+test/e2e-playwright/test-results
+test/e2e-playwright/playwright-report
 selenium-debug.log
 .idea/
 config/local.json

.gitlab-ci.yml

@@ -60,6 +60,34 @@ test:
       - test/**/__screenshots__
     when: on_failure
 
+e2e-pleroma:
+  stage: test
+  image: docker:26
+  services:
+    - name: docker:26-dind
+  tags:
+    - amd64
+    - himem
+  variables:
+    DOCKER_HOST: tcp://docker:2375
+    DOCKER_TLS_CERTDIR: ""
+    DOCKER_DRIVER: overlay2
+  script:
+    - docker version
+    - docker compose version
+    - echo "$CI_REGISTRY_PASSWORD" | docker login -u "$CI_REGISTRY_USER" --password-stdin "$CI_REGISTRY"
+    - export PLEROMA_IMAGE="${PLEROMA_IMAGE:-$CI_REGISTRY/pleroma/pleroma:stable}"
+    - docker compose -f docker-compose.e2e.yml up --build --remove-orphans --abort-on-container-exit --exit-code-from e2e
+  after_script:
+    - docker compose -f docker-compose.e2e.yml cp e2e:/app/test/e2e-playwright/test-results test/e2e-playwright/test-results || true
+    - docker compose -f docker-compose.e2e.yml cp e2e:/app/test/e2e-playwright/playwright-report test/e2e-playwright/playwright-report || true
+    - docker compose -f docker-compose.e2e.yml down -v --remove-orphans || true
+  artifacts:
+    when: on_failure
+    paths:
+      - test/e2e-playwright/test-results
+      - test/e2e-playwright/playwright-report
+
 build:
   stage: build
   tags:

docker-compose.e2e.yml

@@ -0,0 +1,57 @@
+services:
+  db:
+    image: postgres:15-alpine
+    environment:
+      POSTGRES_USER: pleroma
+      POSTGRES_PASSWORD: pleroma
+      POSTGRES_DB: pleroma
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U pleroma -d pleroma"]
+      interval: 2s
+      timeout: 2s
+      retries: 30
+
+  pleroma:
+    image: ${PLEROMA_IMAGE:-git.pleroma.social:5050/pleroma/pleroma:stable}
+    environment:
+      DB_USER: pleroma
+      DB_PASS: pleroma
+      DB_NAME: pleroma
+      DB_HOST: db
+      DB_PORT: 5432
+      DOMAIN: localhost
+      INSTANCE_NAME: Pleroma E2E
+      ADMIN_EMAIL: ${E2E_ADMIN_EMAIL:-admin@example.com}
+      NOTIFY_EMAIL: ${E2E_ADMIN_EMAIL:-admin@example.com}
+      E2E_ADMIN_USERNAME: ${E2E_ADMIN_USERNAME:-admin}
+      E2E_ADMIN_PASSWORD: ${E2E_ADMIN_PASSWORD:-adminadmin}
+      E2E_ADMIN_EMAIL: ${E2E_ADMIN_EMAIL:-admin@example.com}
+    depends_on:
+      db:
+        condition: service_healthy
+    volumes:
+      - ./docker/pleroma/entrypoint.e2e.sh:/opt/pleroma/entrypoint.e2e.sh:ro
+    entrypoint: ["/bin/ash", "/opt/pleroma/entrypoint.e2e.sh"]
+    healthcheck:
+      # NOTE: "localhost" may resolve to ::1 in some images (IPv6) while Pleroma only
+      # listens on IPv4 in this container. Use 127.0.0.1 to avoid false negatives.
+      test: ["CMD-SHELL", "test -f /var/lib/pleroma/.e2e_seeded && wget -qO- http://127.0.0.1:4000/api/v1/instance >/dev/null || exit 1"]
+      interval: 5s
+      timeout: 3s
+      retries: 60
+
+  e2e:
+    build:
+      context: .
+      dockerfile: docker/e2e/Dockerfile.e2e
+    depends_on:
+      pleroma:
+        condition: service_healthy
+    environment:
+      CI: "1"
+      VITE_PROXY_TARGET: http://pleroma:4000
+      VITE_PROXY_ORIGIN: http://localhost:4000
+      E2E_BASE_URL: http://localhost:8080
+      E2E_ADMIN_USERNAME: ${E2E_ADMIN_USERNAME:-admin}
+      E2E_ADMIN_PASSWORD: ${E2E_ADMIN_PASSWORD:-adminadmin}
+    command: ["yarn", "e2e:pw"]

docker/e2e/Dockerfile.e2e

@@ -0,0 +1,17 @@
+FROM mcr.microsoft.com/playwright:v1.55.0-jammy
+
+WORKDIR /app
+
+ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
+
+RUN npm install -g yarn@1.22.22
+
+COPY package.json yarn.lock ./
+RUN yarn --frozen-lockfile
+
+COPY . .
+
+ENV CI=1
+
+CMD ["yarn", "e2e:pw"]
+

docker/pleroma/entrypoint.e2e.sh

@@ -0,0 +1,57 @@
+#!/bin/ash
+
+set -eu
+
+SEED_SENTINEL_PATH="/var/lib/pleroma/.e2e_seeded"
+
+echo "-- Waiting for database..."
+while ! pg_isready -U "${DB_USER:-pleroma}" -d "postgres://${DB_HOST:-db}:${DB_PORT:-5432}/${DB_NAME:-pleroma}" -t 1; do
+  sleep 1s
+done
+
+echo "-- Running migrations..."
+/opt/pleroma/bin/pleroma_ctl migrate
+
+echo "-- Starting!"
+/opt/pleroma/bin/pleroma start &
+PLEROMA_PID="$!"
+
+cleanup() {
+  if [ -n "${PLEROMA_PID:-}" ] && kill -0 "$PLEROMA_PID" 2>/dev/null; then
+    kill -TERM "$PLEROMA_PID"
+    wait "$PLEROMA_PID" || true
+  fi
+}
+
+trap cleanup INT TERM
+
+echo "-- Waiting for API..."
+api_ok="false"
+for _i in $(seq 1 120); do
+  if wget -qO- http://127.0.0.1:4000/api/v1/instance >/dev/null 2>&1; then
+    api_ok="true"
+    break
+  fi
+  sleep 1s
+done
+
+if [ "$api_ok" != "true" ]; then
+  echo "Timed out waiting for Pleroma API to become available"
+  exit 1
+fi
+
+if [ ! -f "$SEED_SENTINEL_PATH" ]; then
+  if [ -n "${E2E_ADMIN_USERNAME:-}" ] && [ -n "${E2E_ADMIN_PASSWORD:-}" ] && [ -n "${E2E_ADMIN_EMAIL:-}" ]; then
+    echo "-- Seeding admin user (${E2E_ADMIN_USERNAME})..."
+    if ! /opt/pleroma/bin/pleroma_ctl user new "$E2E_ADMIN_USERNAME" "$E2E_ADMIN_EMAIL" --admin --password "$E2E_ADMIN_PASSWORD" -y; then
+      echo "-- User already exists (or creation failed), ensuring admin + confirmed..."
+      /opt/pleroma/bin/pleroma_ctl user set "$E2E_ADMIN_USERNAME" --admin --confirmed
+    fi
+  else
+    echo "-- Skipping admin seeding (missing E2E_ADMIN_* env)"
+  fi
+
+  touch "$SEED_SENTINEL_PATH"
+fi
+
+wait "$PLEROMA_PID"

package.json

@@ -10,11 +10,12 @@
     "unit": "node build/update-emoji.js && vitest --run",
     "unit-ci": "node build/update-emoji.js && vitest --run --browser.headless",
     "unit:watch": "node build/update-emoji.js && vitest",
-    "e2e": "node test/e2e/runner.js",
+    "e2e:pw": "playwright test --config test/e2e-playwright/playwright.config.mjs",
+    "e2e": "sh ./tools/e2e/run.sh",
     "test": "yarn run unit && yarn run e2e",
     "stylelint": "yarn exec stylelint '**/*.scss' '**/*.vue'",
-    "lint": "eslint src test/unit/specs test/e2e/specs",
+    "lint": "eslint src test/unit/specs test/e2e/specs test/e2e-playwright/specs test/e2e-playwright/playwright.config.mjs",
-    "lint-fix": "eslint --fix src test/unit/specs test/e2e/specs"
+    "lint-fix": "eslint --fix src test/unit/specs test/e2e/specs test/e2e-playwright/specs test/e2e-playwright/playwright.config.mjs"
   },
   "dependencies": {
     "@babel/runtime": "7.28.4",

src/components/settings_modal/helpers/rate_setting.vue

@@ -30,60 +30,61 @@
     </p>
     <div class="setting-control">
       <table>
-        <tr>
+        <thead>
-          <th>&nbsp;</th>
+          <tr>
-          <th>
+            <th>&nbsp;</th>
-            {{ $t('admin_dash.rate_limit.period') }}
+            <th>
-          </th>
+              {{ $t('admin_dash.rate_limit.period') }}
-          <th>
+            </th>
-            {{ $t('admin_dash.rate_limit.amount') }}
+            <th>
-          </th>
+              {{ $t('admin_dash.rate_limit.amount') }}
-        </tr>
+            </th>
-        <tr>
+          </tr>
-          <td v-if="isSeparate">
+        </thead>
-            {{ $t('admin_dash.rate_limit.unauthenticated') }}
+        <tbody>
-          </td>
+          <tr>
-          <td v-else>
+            <td>
-            {{ $t('admin_dash.rate_limit.rate_limit') }}
+              {{ isSeparate ? $t('admin_dash.rate_limit.unauthenticated') : $t('admin_dash.rate_limit.rate_limit') }}
-          </td>
+            </td>
-          <td>
+            <td>
-            <input
+              <input
-              class="input string-input"
+                class="input string-input"
-              type="number"
+                type="number"
-              :value="normalizedState[0][0]"
+                :value="normalizedState[0][0]"
-              @change="e => update({ event: e, index: 0, side: 0, eventType: 'edit' })"
+                @change="e => update({ event: e, index: 0, side: 0, eventType: 'edit' })"
-            >
+              >
-          </td>
+            </td>
-          <td>
+            <td>
-            <input
+              <input
-              class="input string-input"
+                class="input string-input"
-              type="number"
+                type="number"
-              :value="normalizedState[0][1]"
+                :value="normalizedState[0][1]"
-              @change="e => update({ event: e, index: 1, side: 0, eventType: 'edit' })"
+                @change="e => update({ event: e, index: 1, side: 0, eventType: 'edit' })"
-            >
+              >
-          </td>
+            </td>
-        </tr>
+          </tr>
-        <tr v-if="isSeparate">
+          <tr v-if="isSeparate">
-          <td>
+            <td>
-            {{ $t('admin_dash.rate_limit.authenticated') }}
+              {{ $t('admin_dash.rate_limit.authenticated') }}
-          </td>
+            </td>
-          <td>
+            <td>
-            <input
+              <input
-              class="input string-input"
+                class="input string-input"
-              type="number"
+                type="number"
-              :value="normalizedState[1][0]"
+                :value="normalizedState[1][0]"
-              @change="e => update({ event: e, index: 0, side: 1, eventType: 'edit' })"
+                @change="e => update({ event: e, index: 0, side: 1, eventType: 'edit' })"
-            >
+              >
-          </td>
+            </td>
-          <td>
+            <td>
-            <input
+              <input
-              class="input string-input"
+                class="input string-input"
-              type="number"
+                type="number"
-              :value="normalizedState[1][1]"
+                :value="normalizedState[1][1]"
-              @change="e => update({ event: e, index: 1, side: 1, eventType: 'edit' })"
+                @change="e => update({ event: e, index: 1, side: 1, eventType: 'edit' })"
-            >
+              >
-          </td>
+            </td>
-        </tr>
+          </tr>
+        </tbody>
       </table>
       <Checkbox
         :model-value="isSeparate"

test/e2e-playwright/playwright.config.mjs

@@ -0,0 +1,49 @@
+/* global process */
+import { defineConfig, devices } from 'playwright/test'
+
+const baseURL = process.env.E2E_BASE_URL || 'http://localhost:8080'
+
+export default defineConfig({
+  testDir: './specs',
+  // Paths are resolved relative to this config file directory.
+  outputDir: 'test-results',
+  timeout: 60_000,
+  expect: {
+    timeout: 10_000
+  },
+  retries: process.env.CI ? 1 : 0,
+  reporter: process.env.CI
+    ? [
+        ['line'],
+        ['html', { outputFolder: 'playwright-report', open: 'never' }]
+      ]
+    : [
+        ['list'],
+        ['html', { outputFolder: 'playwright-report', open: 'never' }]
+      ],
+  use: {
+    baseURL,
+    screenshot: 'only-on-failure',
+    trace: 'on-first-retry',
+    video: 'retain-on-failure'
+  },
+  webServer: {
+    command: 'yarn dev -- --host 0.0.0.0 --port 8080 --strictPort',
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+    env: {
+      ...process.env,
+      VITE_PROXY_TARGET: process.env.VITE_PROXY_TARGET || 'http://localhost:4000',
+      VITE_PROXY_ORIGIN: process.env.VITE_PROXY_ORIGIN || process.env.VITE_PROXY_TARGET || 'http://localhost:4000'
+    }
+  },
+  projects: [
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox']
+      }
+    }
+  ]
+})

test/e2e-playwright/specs/admin_smoke.spec.js

@@ -0,0 +1,25 @@
+/* global process */
+import { test, expect } from 'playwright/test'
+
+const adminUsername = process.env.E2E_ADMIN_USERNAME || 'admin'
+const adminPassword = process.env.E2E_ADMIN_PASSWORD || 'adminadmin'
+
+test('admin can open the admin settings modal', async ({ page }) => {
+  await page.goto('/login')
+
+  const loginForm = page.locator('#main-scroller form.login-form')
+  await loginForm.locator('#username').fill(adminUsername)
+  await loginForm.locator('#password').fill(adminPassword)
+  await loginForm.getByRole('button', { name: 'Log in' }).click()
+
+  await page.waitForURL(/\/main\/friends/)
+
+  await expect(page.getByTitle('Administration')).toBeVisible()
+  await page.getByTitle('Administration').click()
+
+  const modal = page.locator('.settings-modal-panel')
+  await expect(modal.getByRole('heading', { name: 'Administration' })).toBeVisible()
+
+  await modal.getByRole('tab', { name: 'Emoji' }).click()
+  await expect(modal.getByText('Emoji packs')).toBeVisible()
+})

tools/e2e/run.sh

@@ -0,0 +1,32 @@
+#!/bin/sh
+
+set -u
+
+COMPOSE_FILE="docker-compose.e2e.yml"
+
+: "${PLEROMA_IMAGE:=git.pleroma.social:5050/pleroma/pleroma:stable}"
+: "${E2E_ADMIN_USERNAME:=admin}"
+: "${E2E_ADMIN_PASSWORD:=adminadmin}"
+: "${E2E_ADMIN_EMAIL:=admin@example.com}"
+
+cleanup() {
+  docker compose -f "$COMPOSE_FILE" down -v --remove-orphans >/dev/null 2>&1 || true
+}
+
+cleanup
+
+trap 'cleanup; exit 130' INT TERM
+
+set +e
+docker compose -f "$COMPOSE_FILE" up --build --remove-orphans --abort-on-container-exit --exit-code-from e2e
+result="$?"
+set -e
+
+if [ "$result" -ne 0 ]; then
+  docker compose -f "$COMPOSE_FILE" cp e2e:/app/test/e2e-playwright/test-results test/e2e-playwright/test-results >/dev/null 2>&1 || true
+  docker compose -f "$COMPOSE_FILE" cp e2e:/app/test/e2e-playwright/playwright-report test/e2e-playwright/playwright-report >/dev/null 2>&1 || true
+fi
+
+cleanup
+
+exit "$result"

vite.config.js

@@ -12,20 +12,32 @@ import { getCommitHash } from './build/commit_hash.js'
 import mswPlugin from './build/msw_plugin.js'
 
 const localConfigPath = '<projectRoot>/config/local.json'
+const normalizeTarget = (target) => {
+  if (!target || typeof target !== 'string') return target
+  return target.endsWith('/') ? target.replace(/\/$/, '') : target
+}
+
 const getLocalDevSettings = async () => {
+  const envTarget = normalizeTarget(process.env.VITE_PROXY_TARGET)
+  const envOrigin = normalizeTarget(process.env.VITE_PROXY_ORIGIN)
   try {
     const settings = (await import('./config/local.json')).default
-    if (settings.target && settings.target.endsWith('/')) {
+    settings.target = normalizeTarget(settings.target)
-      // replacing trailing slash since it can conflict with some apis
+    settings.origin = normalizeTarget(settings.origin)
-      // and that's how actual BE reports its url
+    if (envTarget) settings.target = envTarget
-      settings.target = settings.target.replace(/\/$/, '')
+    if (envOrigin) settings.origin = envOrigin
-    }
     console.info(`Using local dev server settings (${localConfigPath}):`)
     console.info(JSON.stringify(settings, null, 2))
     return settings
   } catch (e) {
-    console.info(`Local dev server settings not found (${localConfigPath}), using default`, e)
+    if (!envTarget && !envOrigin) {
-    return {}
+      console.info(`Local dev server settings not found (${localConfigPath}), using default`, e)
+      return {}
+    }
+    const settings = { target: envTarget, origin: envOrigin }
+    console.info('Using dev server settings from VITE_PROXY_TARGET/VITE_PROXY_ORIGIN:')
+    console.info(JSON.stringify(settings, null, 2))
+    return settings
   }
 }
 
@@ -51,6 +63,7 @@ const getTransformSWSettings = (settings) => {
 export default defineConfig(async ({ mode, command }) => {
   const settings = await getLocalDevSettings()
   const target = settings.target || 'http://localhost:4000/'
+  const origin = settings.origin || target
   const transformSW = getTransformSWSettings(settings)
   const proxy = {
     '/api': {
@@ -70,7 +83,7 @@ export default defineConfig(async ({ mode, command }) => {
       cookieDomainRewrite: 'localhost',
       ws: true,
       headers: {
-        'Origin': target
+        'Origin': origin
       }
     },
     '/oauth': {