c6b15e0bcd
- Add visual-test-pipeline.js: captures screenshots, extracts UI elements with bounding boxes, compares via pixelmatch, reports console/network errors - Add capture-screenshots.js: baseline/current screenshot capture at mobile/tablet/desktop viewports - Add console-error-monitor-standalone.js: standalone console/network error detection without MCP dependency - Rewrite docker-compose.web-testing.yml: real Playwright image, working services, proper volume mounts - Update package.json: v2.0.0, add playwright dependency, clean scripts - Update README.md: accurate Docker-first docs with usage examples - Add .gitignore: exclude node_modules, current/diff screenshots, reports - Include baseline screenshots for bbox.wtf homepage
108 lines
4.0 KiB
YAML
108 lines
4.0 KiB
YAML
# Web Testing Infrastructure for APAW
|
|
# Covers: Visual Regression, Link Checking, Form Testing, Console Errors
|
|
#
|
|
# Usage:
|
|
# docker compose -f docker/docker-compose.web-testing.yml up visual-tester
|
|
# docker compose -f docker/docker-compose.web-testing.yml run --rm screenshot-baseline
|
|
# docker compose -f docker/docker-compose.web-testing.yml run --rm screenshot-current
|
|
# docker compose -f docker/docker-compose.web-testing.yml run --rm visual-compare
|
|
|
|
services:
|
|
# ─── Screenshot Capture: Create Baselines ─────────────────────────
|
|
screenshot-baseline:
|
|
image: mcr.microsoft.com/playwright:v1.52.0-noble
|
|
container_name: apaw-screenshot-baseline
|
|
working_dir: /app
|
|
volumes:
|
|
- ../tests:/app/tests
|
|
environment:
|
|
- TARGET_URL=http://host.docker.internal:3000
|
|
- PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
|
|
command: >
|
|
sh -c "npm install --prefix /app/tests pixelmatch pngjs 2>/dev/null;
|
|
node /app/tests/scripts/capture-screenshots.js baseline"
|
|
extra_hosts:
|
|
- "host.docker.internal:host-gateway"
|
|
shm_size: '2gb'
|
|
ipc: host
|
|
|
|
# ─── Screenshot Capture: Create Current ──────────────────────────
|
|
screenshot-current:
|
|
image: mcr.microsoft.com/playwright:v1.52.0-noble
|
|
container_name: apaw-screenshot-current
|
|
working_dir: /app
|
|
volumes:
|
|
- ../tests:/app/tests
|
|
environment:
|
|
- TARGET_URL=http://host.docker.internal:3000
|
|
- PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
|
|
command: >
|
|
sh -c "npm install --prefix /app/tests pixelmatch pngjs 2>/dev/null;
|
|
node /app/tests/scripts/capture-screenshots.js current"
|
|
extra_hosts:
|
|
- "host.docker.internal:host-gateway"
|
|
shm_size: '2gb'
|
|
ipc: host
|
|
|
|
# ─── Visual Regression: Compare Screenshots ──────────────────────
|
|
visual-compare:
|
|
image: node:20-alpine
|
|
container_name: apaw-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: apaw-visual-tester
|
|
working_dir: /app
|
|
volumes:
|
|
- ../tests:/app/tests
|
|
environment:
|
|
- TARGET_URL=http://host.docker.internal:3000
|
|
- PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
|
|
- 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/visual-test-pipeline.js"
|
|
extra_hosts:
|
|
- "host.docker.internal:host-gateway"
|
|
shm_size: '2gb'
|
|
ipc: host
|
|
|
|
# ─── Console Error Monitor ──────────────────────────────────────
|
|
console-monitor:
|
|
image: mcr.microsoft.com/playwright:v1.52.0-noble
|
|
container_name: apaw-console-monitor
|
|
working_dir: /app
|
|
volumes:
|
|
- ../tests:/app/tests
|
|
environment:
|
|
- TARGET_URL=http://host.docker.internal:3000
|
|
- REPORTS_DIR=/app/tests/reports
|
|
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
|
|
|
|
networks:
|
|
default:
|
|
name: apaw-testing |