Frontend Verification Testing

Frontend Verification & Testing

Verify Angular 18 frontend using Chrome DevTools MCP - check console, network, and visual rendering.

Project Context

Photo Map MVP - Angular 18 SPA with geolocation photo management.

Stack:

• Angular 18.2.0+ (standalone components)
• Dev Server: http://localhost:4200
• Backend API: http://localhost:8080 (Spring Boot 3)
• Build: Angular CLI + esbuild

Constraints:

• Both frontend and backend must be running
• JWT authentication for protected routes
• All API calls include Authorization: Bearer <token>

When to Use This Skill

Automatic Triggers:

1. After implementing task logic - po ukończeniu implementacji feature

   • Example: Po dodaniu Gallery Component → verify photos load
   • Example: Po implementacji Login → check form + API call

2. When uncertain about code behavior - gdy wątpliwości czy działa

   • Example: Complex RxJS pipeline → verify console
   • Example: Leaflet map init → check visual rendering

3. When fixing UI bugs (iterative) - przy naprawie błędów (sprawdź → napraw → sprawdź)

   • Example: Layout issue → screenshot → fix CSS → verify
   • Example: API 401 → check network → fix auth → verify

4. On explicit request - na żądanie użytkownika

   • Example: "zweryfikuj frontend", "sprawdź czy login działa"

DO NOT use for:

• ❌ Simple code reading (use Read tool)
• ❌ Unit test execution (use Bash with ng test)
• ❌ Backend-only changes (use spring-boot-backend skill)

Server Management

Check if servers running:

# Check PID files
[ -f scripts/.pid/backend.pid ] && kill -0 $(cat scripts/.pid/backend.pid)
[ -f scripts/.pid/frontend.pid ] && kill -0 $(cat scripts/.pid/frontend.pid)

# Health checks
curl http://localhost:8080/actuator/health  # Backend
curl -I http://localhost:4200               # Frontend

Start servers:

./scripts/start-dev.sh          # Backend + Frontend
./scripts/start-dev.sh --with-db # Include PostgreSQL

When to restart:

• ✅ Code changes (Java/TypeScript modified)
• ✅ Servers not responding (PID dead, ports free)
• ✅ Health checks failing

Rebuild & Restart:

./scripts/stop-dev.sh
cd backend && ./mvnw clean package  # If backend changes
cd frontend && npm run build         # If frontend changes
./scripts/start-dev.sh

→ Full docs: references/server-management.md

Verification Workflow

5-Step Process

Step 0: Verify Servers Running
   ↓
Step 1: Navigate & Capture State
   ↓
Step 2: Check Console Errors
   ↓
Step 3: Check Network Requests
   ↓
Step 4: Visual Verification
   ↓
Step 5: Report Results

Detailed Steps

Step 0: Verify Servers Running

# Check if servers running (PID + health)
[ -f scripts/.pid/backend.pid ] && kill -0 $(cat scripts/.pid/backend.pid)
[ -f scripts/.pid/frontend.pid ] && kill -0 $(cat scripts/.pid/frontend.pid)

# If NOT running OR code changes → restart
./scripts/stop-dev.sh
./scripts/start-dev.sh

Step 1: Navigate & Capture State

• list_pages() → check open pages
• navigate_page(url: "http://localhost:4200/path") → go to route
• take_snapshot() → accessibility tree (structural check)
• take_screenshot() → visual representation

Step 2: Check Console Errors

• list_console_messages(types: ["error", "warn"]) → filter errors
• get_console_message(msgid: N) → detailed stack trace

Step 3: Check Network Requests

• list_network_requests(resourceTypes: ["xhr", "fetch"]) → API calls
• get_network_request(reqid: N) → headers, payload, response

Step 4: Visual Verification

• take_screenshot(fullPage: true) → full page visual
• resize_page(width, height) → test responsive (375, 768, 1920)
• hover(uid), click(uid) → test interactions

Step 5: Report Results

• ✅ PASS: "All verifications passed. No console errors, API calls 200 OK, UI renders correctly."
• ❌ FAIL: "Issues found: Console error at component.ts:42, Network POST /api/login → 401, Visual: missing padding"

Key MCP Tools

Navigation:

• list_pages() - list open tabs
• navigate_page(url, timeout) - go to URL
• wait_for(text, timeout) - wait for text to appear

State Capture:

• take_snapshot(verbose) - accessibility tree (fast, text)
• take_screenshot(uid, fullPage, format) - visual capture (PNG/JPEG/WebP)
• evaluate_script(function, args) - execute JS in page

Console & Network:

• list_console_messages(types, pageIdx, pageSize) - get console logs
• get_console_message(msgid) - detailed error info
• list_network_requests(resourceTypes, pageIdx) - list HTTP requests
• get_network_request(reqid) - detailed request/response

Interaction:

• click(uid, dblClick) - click element by UID
• fill(uid, value) - fill input/textarea
• fill_form(elements) - fill multiple fields
• hover(uid) - hover over element

Emulation:

• resize_page(width, height) - change viewport (mobile: 375x667, tablet: 768x1024, desktop: 1920x1080)
• emulate_network(throttlingOption) - simulate network (Offline, Slow 3G, Fast 3G, etc.)
• performance_start_trace(reload, autoStop) - measure Core Web Vitals

→ Full docs: references/mcp-tools-reference.md

Quick Start

Example 1: Verify Console After Component Implementation

navigate_page(url: "http://localhost:4200/gallery")
list_console_messages(types: ["error", "warn"])
// ✅ No errors → Component works
// ❌ Errors found → get_console_message(msgid) → Fix

Example 2: Verify Network After API Integration

navigate_page(url: "http://localhost:4200/login")
fill_form([{ uid: "input-email", value: "test@example.com" }, { uid: "input-password", value: "test123456" }])
click(uid: "btn-login")
wait_for(text: "Photo Gallery", timeout: 5000)
list_network_requests(resourceTypes: ["fetch"])
get_network_request(reqid: 1)
// → POST /api/auth/login → 200 OK → JWT token ✅

Example 3: Verify Visual Layout

navigate_page(url: "http://localhost:4200/gallery")
take_screenshot(fullPage: true)
resize_page(width: 375, height: 667)  // Mobile
take_screenshot()
// → Check: Single column layout on mobile ✅

→ Detailed scenarios: examples/*.md → Detailed patterns: references/verification-patterns.md

Best Practices

1. Always check console first - even if UI looks correct

   list_console_messages(types: ["error", "warn"])
   

2. Check network for API calls - verify status codes, headers, payloads

   list_network_requests(resourceTypes: ["xhr", "fetch"])
   

3. Test responsive layouts - mobile (375), tablet (768), desktop (1920)

   resize_page(width: 375, height: 667)
   

4. Use snapshots for structure, screenshots for visual

   • Snapshot (fast, text) → "Are elements present?"
   • Screenshot (slow, image) → "Does it look right?"

5. Iterative verification for bug fixes

   • Verify bug → Fix code → Re-verify → Repeat until ✅

6. Report actionable issues

   • ❌ BAD: "Login doesn't work"
   • ✅ GOOD: "Login failed: POST /api/auth/login → 401. Request missing Authorization header. Check AuthInterceptor."

7. Restart servers when code changes

   ./scripts/stop-dev.sh && ./scripts/start-dev.sh
   

Related Skills

• angular-frontend - for implementing Angular components
• spring-boot-backend - for backend API development
• code-review - for code quality checks

Key Reminders

Proactive Verification:

• ✅ Use after implementing tasks
• ✅ Verify BEFORE marking complete
• ✅ Catch issues early

Comprehensive Checks:

• ✅ Console errors (ALWAYS)
• ✅ Network requests (for API features)
• ✅ Visual rendering (for UI features)
• ✅ Responsive layout (mobile, tablet, desktop)

Server Management:

• ✅ Check servers before starting (PID/health)
• ✅ Restart when code changes
• ✅ Use project scripts (./scripts/start-dev.sh)