telegram-shop/docker/docker-compose.web-testing.yml

# Web Testing Infrastructure
# Covers: Visual Regression, Link Checking, Form Testing, Console Errors
#
# Usage:
#   Local app testing (bridge network):
#     docker compose -f docker/docker-compose.web-testing.yml up visual-tester
#
#   External site testing (host network for DNS):
#     docker compose --profile external -f docker/docker-compose.web-testing.yml up visual-tester
#
#   Override target URL:
#     TARGET_URL=https://example.com docker compose --profile external -f docker/docker-compose.web-testing.yml up visual-tester
#
#   Gitea integration:
#     GITEA_ISSUE=42 docker compose --profile external -f docker/docker-compose.web-testing.yml up visual-tester

services:
  # ─── Screenshot Capture: Create Baselines ─────────────────────────
  screenshot-baseline:
    image: mcr.microsoft.com/playwright:v1.52.0-noble
    container_name: tgshop-screenshot-baseline
    working_dir: /app
    volumes:
      - ../tests:/app/tests
    environment:
      - TARGET_URL=${TARGET_URL:-http://host.docker.internal:3000}
      - PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
      - DNS_RESOLUTION_ORDER=hostname-first
    command: >
      sh -c "cd /app/tests && npm install --ignore-scripts 2>/dev/null;
             node scripts/capture-screenshots.js baseline"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    shm_size: '2gb'
    ipc: host
    network_mode: ${NETWORK_MODE:-bridge}

  # ─── Screenshot Capture: Create Current ──────────────────────────
  screenshot-current:
    image: mcr.microsoft.com/playwright:v1.52.0-noble
    container_name: tgshop-screenshot-current
    working_dir: /app
    volumes:
      - ../tests:/app/tests
    environment:
      - TARGET_URL=${TARGET_URL:-http://host.docker.internal:3000}
      - PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
      - DNS_RESOLUTION_ORDER=hostname-first
    command: >
      sh -c "cd /app/tests && npm install --ignore-scripts 2>/dev/null;
             node scripts/capture-screenshots.js current"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    shm_size: '2gb'
    ipc: host
    network_mode: ${NETWORK_MODE:-bridge}

  # ─── Visual Regression: Compare Screenshots ──────────────────────
  visual-compare:
    image: node:24-alpine
    container_name: tgshop-visual-compare
    working_dir: /app
    volumes:
      - ../tests:/app/tests
    environment:
      - PIXELMATCH_THRESHOLD=0.05
      - BASELINE_DIR=/app/tests/visual/baseline
      - CURRENT_DIR=/app/tests/visual/current
      - DIFF_DIR=/app/tests/visual/diff
      - REPORTS_DIR=/app/tests/reports
    command: >
      sh -c "cd /app/tests && npm install --ignore-scripts 2>/dev/null;
             node scripts/compare-screenshots.js"

  # ─── Full Visual Test Pipeline ──────────────────────────────────
  # Captures current screenshots and compares against baselines
  visual-tester:
    image: mcr.microsoft.com/playwright:v1.52.0-noble
    container_name: tgshop-visual-tester
    working_dir: /app
    volumes:
      - ../tests:/app/tests
    environment:
      - TARGET_URL=${TARGET_URL:-http://host.docker.internal:3000}
      - PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
      - PIXELMATCH_THRESHOLD=${PIXELMATCH_THRESHOLD:-0.05}
      - PAGES=${PAGES:-/,/admin/login}
      - BASELINE_DIR=/app/tests/visual/baseline
      - CURRENT_DIR=/app/tests/visual/current
      - DIFF_DIR=/app/tests/visual/diff
      - REPORTS_DIR=/app/tests/reports
      - GITEA_ISSUE=${GITEA_ISSUE:-}
      - GITEA_TOKEN=${GITEA_TOKEN:-}
      - GITEA_USER=${GITEA_USER:-}
      - GITEA_PASSWORD=${GITEA_PASSWORD:-}
      - DNS_RESOLUTION_ORDER=hostname-first
    command: >
      sh -c "cd /app/tests && npm install --ignore-scripts 2>/dev/null;
             node scripts/visual-test-pipeline.js"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    shm_size: '2gb'
    ipc: host
    network_mode: ${NETWORK_MODE:-bridge}

  # ─── Console Error Monitor ──────────────────────────────────────
  console-monitor:
    image: mcr.microsoft.com/playwright:v1.52.0-noble
    container_name: tgshop-console-monitor
    working_dir: /app
    volumes:
      - ../tests:/app/tests
    environment:
      - TARGET_URL=${TARGET_URL:-http://host.docker.internal:3000}
      - REPORTS_DIR=/app/tests/reports
      - GITEA_ISSUE=${GITEA_ISSUE:-}
      - GITEA_TOKEN=${GITEA_TOKEN:-}
      - GITEA_USER=${GITEA_USER:-}
      - GITEA_PASSWORD=${GITEA_PASSWORD:-}
      - DNS_RESOLUTION_ORDER=hostname-first
    command: >
      sh -c "cd /app/tests && npm install --ignore-scripts 2>/dev/null;
             node scripts/console-error-monitor-standalone.js"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    shm_size: '2gb'
    ipc: host
    network_mode: ${NETWORK_MODE:-bridge}

  # ─── VLMKit Visual Regression Testing ────────────────────────────
  # Uses @mizchi/vlmkit for AI-powered visual regression testing
  vlmkit:
    image: node:24-alpine
    container_name: tgshop-vlmkit
    working_dir: /app
    volumes:
      - ../tests:/app/tests
    environment:
      - TARGET_URL=${TARGET_URL:-http://host.docker.internal:3000}
      - PAGES=${PAGES:-/,/admin/login}
      - VRT_CONFIG_PATH=/app/tests/vrt.config.json
    command: >
      sh -c "cd /app/tests && npm install --ignore-scripts 2>/dev/null;
             ./node_modules/.bin/vlmkit run"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    shm_size: '2gb'
    ipc: host
    network_mode: ${NETWORK_MODE:-bridge}