#!/bin/bash # # Web Testing Quick Start Script # # Usage: ./scripts/web-test.sh [options] # # Project root: Run from project root # # Examples: # ./scripts/web-test.sh https://my-app.com # ./scripts/web-test.sh https://my-app.com --auto-fix # ./scripts/web-test.sh https://my-app.com --visual-only # set -e # Get script directory and project root SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" PROJECT_ROOT="$(cd "${SCRIPT_DIR}/.." && pwd)" # Colors RED='\033[0;31m' GREEN='\033[0;32m' YELLOW='\033[1;33m' BLUE='\033[0;34m' NC='\033[0m' # No Color # Default values TARGET_URL="" AUTO_FIX=false VISUAL_ONLY=false CONSOLE_ONLY=false LINKS_ONLY=false THRESHOLD=0.05 # Parse arguments while [[ $# -gt 0 ]]; do case $1 in --auto-fix) AUTO_FIX=true shift ;; --visual-only) VISUAL_ONLY=true shift ;; --console-only) CONSOLE_ONLY=true shift ;; --links-only) LINKS_ONLY=true shift ;; --threshold) THRESHOLD=$2 shift 2 ;; -h|--help) echo "Usage: $0 [options]" echo "" echo "Options:" echo " --auto-fix Auto-fix detected issues" echo " --visual-only Run visual tests only" echo " --console-only Run console error detection only" echo " --links-only Run link checking only" echo " --threshold N Visual diff threshold (default: 0.05)" echo " -h, --help Show this help" exit 0 ;; *) if [[ -z "$TARGET_URL" ]]; then TARGET_URL=$1 fi shift ;; esac done # Validate URL if [[ -z "$TARGET_URL" ]]; then echo -e "${RED}Error: URL is required${NC}" echo "Usage: $0 [options]" exit 1 fi # Banner echo -e "${BLUE}═══════════════════════════════════════════════════${NC}" echo -e "${BLUE} Web Application Testing Suite${NC}" echo -e "${BLUE}═══════════════════════════════════════════════════${NC}" echo "" echo -e "Target URL: ${YELLOW}${TARGET_URL}${NC}" echo -e "Auto Fix: ${YELLOW}${AUTO_FIX}${NC}" echo -e "Threshold: ${YELLOW}${THRESHOLD}${NC}" echo "" # Check Docker echo -e "${BLUE}Checking Docker...${NC}" if ! docker info > /dev/null 2>&1; then echo -e "${RED}Error: Docker is not running${NC}" echo "Please start Docker and try again" exit 1 fi echo -e "${GREEN}✓ Docker is running${NC}" # Check if Playwright MCP is running echo -e "${BLUE}Checking Playwright MCP...${NC}" if curl -s http://localhost:8931/mcp -X POST -d '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' | grep -q "tools"; then echo -e "${GREEN}✓ Playwright MCP is running${NC}" else echo -e "${YELLOW}Starting Playwright MCP container...${NC}" cd "${PROJECT_ROOT}" docker compose -f docker/docker-compose.web-testing.yml up -d # Wait for MCP to be ready echo -n "Waiting for MCP to be ready" for i in {1..30}; do if curl -s http://localhost:8931/mcp -X POST -d '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' | grep -q "tools"; then echo -e " ${GREEN}✓${NC}" break fi echo -n "." sleep 1 done if ! curl -s http://localhost:8931/mcp -X POST -d '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' | grep -q "tools"; then echo -e "${RED}Error: Playwright MCP failed to start${NC}" exit 1 fi fi # Install dependencies if needed cd "${PROJECT_ROOT}/tests" if [[ ! -d "node_modules" ]]; then echo -e "${BLUE}Installing dependencies...${NC}" npm install --silent fi # Export environment export TARGET_URL export PIXELMATCH_THRESHOLD=$THRESHOLD export PLAYWRIGHT_MCP_URL="http://localhost:8931/mcp" export MCP_PORT=8931 export REPORTS_DIR="${PROJECT_ROOT}/tests/reports" # Run tests echo "" echo -e "${BLUE}═══════════════════════════════════════════════════${NC}" echo -e "${BLUE} Running Tests${NC}" echo -e "${BLUE}═══════════════════════════════════════════════════${NC}" echo "" if [[ "$VISUAL_ONLY" == true ]]; then echo -e "${BLUE}Visual Regression Testing Only${NC}" node scripts/compare-screenshots.js elif [[ "$CONSOLE_ONLY" == true ]]; then echo -e "${BLUE}Console Error Detection Only${NC}" node scripts/console-error-monitor.js elif [[ "$LINKS_ONLY" == true ]]; then echo -e "${BLUE}Link Checking Only${NC}" node scripts/link-checker.js else echo -e "${BLUE}Running All Tests${NC}" node run-all-tests.js fi # Check results TEST_RESULT=$? echo "" echo -e "${BLUE}═══════════════════════════════════════════════════${NC}" echo -e "${BLUE} Test Results${NC}" echo -e "${BLUE}═══════════════════════════════════════════════════${NC}" echo "" if [[ $TEST_RESULT -eq 0 ]]; then echo -e "${GREEN}✓ All tests passed!${NC}" else echo -e "${RED}✗ Tests failed${NC}" # Auto-fix if requested if [[ "$AUTO_FIX" == true ]]; then echo "" echo -e "${YELLOW}Auto-fixing detected issues...${NC}" echo "" # This would trigger Kilo Code agents # In production, this would call Task tool with the-fixer echo -e "${YELLOW}Note: Auto-fix requires Kilo Code integration${NC}" echo -e "${YELLOW}Run: /web-test-fix ${TARGET_URL}${NC}" fi fi echo "" echo -e "${BLUE}Reports generated:${NC}" echo " - ${PROJECT_ROOT}/tests/reports/web-test-report.html" echo " - ${PROJECT_ROOT}/tests/reports/web-test-report.json" echo "" echo -e "${BLUE}To view report:${NC}" echo " open ${PROJECT_ROOT}/tests/reports/web-test-report.html" echo "" exit $TEST_RESULT