feat: implement visual regression testing v2.0 — Playwright pipeline with bbox extraction
- 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
This commit is contained in:
NW
@@ -1,133 +1,108 @@
|
||||
version: '3.8'
|
||||
|
||||
# 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:
|
||||
# Main Playwright MCP Server - E2E Testing
|
||||
playwright-mcp:
|
||||
image: mcr.microsoft.com/playwright/mcp:latest
|
||||
container_name: playwright-mcp
|
||||
ports:
|
||||
- "8931:8931"
|
||||
# ─── 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
|
||||
- ./tests/visual/baseline:/app/baseline
|
||||
- ./tests/visual/current:/app/current
|
||||
- ./tests/visual/diff:/app/diff
|
||||
- ./tests/reports:/app/reports
|
||||
- ../tests:/app/tests
|
||||
environment:
|
||||
- PLAYWRIGHT_MCP_BROWSER=chromium
|
||||
- PLAYWRIGHT_MCP_HEADLESS=true
|
||||
- PLAYWRIGHT_MCP_NO_SANDBOX=true
|
||||
- PLAYWRIGHT_MCP_PORT=8931
|
||||
- PLAYWRIGHT_MCP_HOST=0.0.0.0
|
||||
- TARGET_URL=http://host.docker.internal:3000
|
||||
- PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
|
||||
command: >
|
||||
node cli.js
|
||||
--headless
|
||||
--browser chromium
|
||||
--no-sandbox
|
||||
--port 8931
|
||||
--host 0.0.0.0
|
||||
--caps=core,pdf
|
||||
restart: unless-stopped
|
||||
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
|
||||
healthcheck:
|
||||
test: ["CMD", "curl", "-f", "http://localhost:8931/health"]
|
||||
interval: 30s
|
||||
timeout: 10s
|
||||
retries: 3
|
||||
start_period: 10s
|
||||
|
||||
# Visual Regression Service - Pixelmatch Comparison
|
||||
visual-regression:
|
||||
image: node:20-alpine
|
||||
container_name: visual-regression
|
||||
# ─── 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/visual:/app
|
||||
- ./tests/reports:/app/reports
|
||||
- ../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 "npm install pixelmatch pngjs &&
|
||||
node /app/scripts/compare-screenshots.js"
|
||||
profiles:
|
||||
- visual
|
||||
depends_on:
|
||||
- playwright-mcp
|
||||
sh -c "cd /app/tests && npm install --ignore-scripts 2>/dev/null;
|
||||
node scripts/compare-screenshots.js"
|
||||
|
||||
# Console Error Aggregator
|
||||
# ─── 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: node:20-alpine
|
||||
container_name: console-monitor
|
||||
image: mcr.microsoft.com/playwright:v1.52.0-noble
|
||||
container_name: apaw-console-monitor
|
||||
working_dir: /app
|
||||
volumes:
|
||||
- ./tests/console:/app
|
||||
- ./tests/reports:/app/reports
|
||||
- ../tests:/app/tests
|
||||
environment:
|
||||
- TARGET_URL=http://host.docker.internal:3000
|
||||
- REPORTS_DIR=/app/tests/reports
|
||||
command: >
|
||||
sh -c "npm install &&
|
||||
node /app/scripts/aggregate-errors.js"
|
||||
profiles:
|
||||
- console
|
||||
depends_on:
|
||||
- playwright-mcp
|
||||
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
|
||||
|
||||
# Link Checker Service
|
||||
link-checker:
|
||||
image: node:20-alpine
|
||||
container_name: link-checker
|
||||
working_dir: /app
|
||||
volumes:
|
||||
- ./tests/links:/app
|
||||
- ./tests/reports:/app/reports
|
||||
command: >
|
||||
sh -c "npm install playwright &&
|
||||
node /app/scripts/check-links.js"
|
||||
profiles:
|
||||
- links
|
||||
depends_on:
|
||||
- playwright-mcp
|
||||
|
||||
# Form Tester Service
|
||||
form-tester:
|
||||
image: node:20-alpine
|
||||
container_name: form-tester
|
||||
working_dir: /app
|
||||
volumes:
|
||||
- ./tests/forms:/app
|
||||
- ./tests/reports:/app/reports
|
||||
command: >
|
||||
sh -c "npm install playwright &&
|
||||
node /app/scripts/test-forms.js"
|
||||
profiles:
|
||||
- forms
|
||||
depends_on:
|
||||
- playwright-mcp
|
||||
|
||||
# Full Test Suite - All Tests
|
||||
full-testing:
|
||||
image: node:20-alpine
|
||||
container_name: full-testing
|
||||
working_dir: /app
|
||||
volumes:
|
||||
- ./tests:/app/tests
|
||||
- ./tests/reports:/app/reports
|
||||
command: >
|
||||
sh -c "npm install playwright pixelmatch pngjs &&
|
||||
node /app/tests/run-all-tests.js"
|
||||
profiles:
|
||||
- full
|
||||
depends_on:
|
||||
- playwright-mcp
|
||||
|
||||
# Networks
|
||||
networks:
|
||||
test-network:
|
||||
driver: bridge
|
||||
|
||||
# Volumes for test data persistence
|
||||
volumes:
|
||||
baseline-screenshots:
|
||||
test-results:
|
||||
default:
|
||||
name: apaw-testing
|
||||
Reference in New Issue
Block a user