name: Frontend Verification & Testing
description: Verify and test Angular 18 frontend changes using Chrome DevTools MCP. Automatically check console errors, network requests, and visual rendering after implementing tasks or when fixing UI bugs. Use when creating components, debugging visual issues, validating API integration, or ensuring UI requirements are met. File types: .ts, .html, .css, .scss
allowed-tools: Read, Bash, mcp__chrome-devtools__*
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:
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:
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
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
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
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 pagesnavigate_page(url: "http://localhost:4200/path") → go to routetake_snapshot() → accessibility tree (structural check)take_screenshot() → visual representation
Step 2: Check Console Errors
list_console_messages(types: ["error", "warn"]) → filter errorsget_console_message(msgid: N) → detailed stack trace
Step 3: Check Network Requests
list_network_requests(resourceTypes: ["xhr", "fetch"]) → API callsget_network_request(reqid: N) → headers, payload, response
Step 4: Visual Verification
take_screenshot(fullPage: true) → full page visualresize_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 tabsnavigate_page(url, timeout) - go to URLwait_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 logsget_console_message(msgid) - detailed error infolist_network_requests(resourceTypes, pageIdx) - list HTTP requestsget_network_request(reqid) - detailed request/response
Interaction:
click(uid, dblClick) - click element by UIDfill(uid, value) - fill input/textareafill_form(elements) - fill multiple fieldshover(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
Always check console first - even if UI looks correct
list_console_messages(types: ["error", "warn"])
Check network for API calls - verify status codes, headers, payloads
list_network_requests(resourceTypes: ["xhr", "fetch"])
Test responsive layouts - mobile (375), tablet (768), desktop (1920)
resize_page(width: 375, height: 667)
Use snapshots for structure, screenshots for visual
- Snapshot (fast, text) → "Are elements present?"
- Screenshot (slow, image) → "Does it look right?"
Iterative verification for bug fixes
- Verify bug → Fix code → Re-verify → Repeat until ✅
Report actionable issues
- ❌ BAD: "Login doesn't work"
- ✅ GOOD: "Login failed: POST /api/auth/login → 401. Request missing Authorization header. Check AuthInterceptor."
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)
1---2name: frontend-verification3description: Verify and test Angular 18 frontend changes using Chrome DevTools MCP. Automatically check console errors, network requests, and visual rendering after implementing tasks or when fixing UI bugs. Use w4---5
6---
7name: Frontend Verification & Testing
8description: Verify and test Angular 18 frontend changes using Chrome DevTools MCP. Automatically check console errors, network requests, and visual rendering after implementing tasks or when fixing UI bugs. Use when creating components, debugging visual issues, validating API integration, or ensuring UI requirements are met. File types: .ts, .html, .css, .scss
9allowed-tools: Read, Bash, mcp__chrome-devtools__*
10---
11
12# Frontend Verification & Testing
13
14Verify Angular 18 frontend using Chrome DevTools MCP - check console, network, and visual rendering.
15
16## Project Context
17
18**Photo Map MVP** - Angular 18 SPA with geolocation photo management.
19
20**Stack:**
21- Angular 18.2.0+ (standalone components)
22- Dev Server: http://localhost:4200
23- Backend API: http://localhost:8080 (Spring Boot 3)
24- Build: Angular CLI + esbuild
25
26**Constraints:**
27- Both frontend and backend must be running
28- JWT authentication for protected routes
29- All API calls include `Authorization: Bearer <token>`
30
31---
32
33## When to Use This Skill
34
35**Automatic Triggers:**
36
371. **After implementing task logic** - po ukończeniu implementacji feature
38 - Example: Po dodaniu Gallery Component → verify photos load
39 - Example: Po implementacji Login → check form + API call
40
412. **When uncertain about code behavior** - gdy wątpliwości czy działa
42 - Example: Complex RxJS pipeline → verify console
43 - Example: Leaflet map init → check visual rendering
44
453. **When fixing UI bugs (iterative)** - przy naprawie błędów (sprawdź → napraw → sprawdź)
46 - Example: Layout issue → screenshot → fix CSS → verify
47 - Example: API 401 → check network → fix auth → verify
48
494. **On explicit request** - na żądanie użytkownika
50 - Example: "zweryfikuj frontend", "sprawdź czy login działa"
51
52**DO NOT use for:**
53- ❌ Simple code reading (use Read tool)
54- ❌ Unit test execution (use Bash with `ng test`)
55- ❌ Backend-only changes (use spring-boot-backend skill)
56
57---
58
59## Server Management
60
61**Check if servers running:**
62```bash
63# Check PID files
64[ -f scripts/.pid/backend.pid ] && kill -0 $(cat scripts/.pid/backend.pid)
65[ -f scripts/.pid/frontend.pid ] && kill -0 $(cat scripts/.pid/frontend.pid)
66
67# Health checks
68curl http://localhost:8080/actuator/health # Backend
69curl -I http://localhost:4200 # Frontend
70```
71
72**Start servers:**
73```bash
74./scripts/start-dev.sh # Backend + Frontend
75./scripts/start-dev.sh --with-db # Include PostgreSQL
76```
77
78**When to restart:**
79- ✅ Code changes (Java/TypeScript modified)
80- ✅ Servers not responding (PID dead, ports free)
81- ✅ Health checks failing
82
83**Rebuild & Restart:**
84```bash
85./scripts/stop-dev.sh
86cd backend && ./mvnw clean package # If backend changes
87cd frontend && npm run build # If frontend changes
88./scripts/start-dev.sh
89```
90
91→ Full docs: `references/server-management.md`
92
93---
94
95## Verification Workflow
96
97### 5-Step Process
98
99```
100Step 0: Verify Servers Running
101 ↓
102Step 1: Navigate & Capture State
103 ↓
104Step 2: Check Console Errors
105 ↓
106Step 3: Check Network Requests
107 ↓
108Step 4: Visual Verification
109 ↓
110Step 5: Report Results
111```
112
113### Detailed Steps
114
115**Step 0: Verify Servers Running**
116```bash
117# Check if servers running (PID + health)
118[ -f scripts/.pid/backend.pid ] && kill -0 $(cat scripts/.pid/backend.pid)
119[ -f scripts/.pid/frontend.pid ] && kill -0 $(cat scripts/.pid/frontend.pid)
120
121# If NOT running OR code changes → restart
122./scripts/stop-dev.sh
123./scripts/start-dev.sh
124```
125
126**Step 1: Navigate & Capture State**
127- `list_pages()` → check open pages
128- `navigate_page(url: "http://localhost:4200/path")` → go to route
129- `take_snapshot()` → accessibility tree (structural check)
130- `take_screenshot()` → visual representation
131
132**Step 2: Check Console Errors**
133- `list_console_messages(types: ["error", "warn"])` → filter errors
134- `get_console_message(msgid: N)` → detailed stack trace
135
136**Step 3: Check Network Requests**
137- `list_network_requests(resourceTypes: ["xhr", "fetch"])` → API calls
138- `get_network_request(reqid: N)` → headers, payload, response
139
140**Step 4: Visual Verification**
141- `take_screenshot(fullPage: true)` → full page visual
142- `resize_page(width, height)` → test responsive (375, 768, 1920)
143- `hover(uid)`, `click(uid)` → test interactions
144
145**Step 5: Report Results**
146- ✅ **PASS:** "All verifications passed. No console errors, API calls 200 OK, UI renders correctly."
147- ❌ **FAIL:** "Issues found: Console error at component.ts:42, Network POST /api/login → 401, Visual: missing padding"
148
149---
150
151## Key MCP Tools
152
153**Navigation:**
154- `list_pages()` - list open tabs
155- `navigate_page(url, timeout)` - go to URL
156- `wait_for(text, timeout)` - wait for text to appear
157
158**State Capture:**
159- `take_snapshot(verbose)` - accessibility tree (fast, text)
160- `take_screenshot(uid, fullPage, format)` - visual capture (PNG/JPEG/WebP)
161- `evaluate_script(function, args)` - execute JS in page
162
163**Console & Network:**
164- `list_console_messages(types, pageIdx, pageSize)` - get console logs
165- `get_console_message(msgid)` - detailed error info
166- `list_network_requests(resourceTypes, pageIdx)` - list HTTP requests
167- `get_network_request(reqid)` - detailed request/response
168
169**Interaction:**
170- `click(uid, dblClick)` - click element by UID
171- `fill(uid, value)` - fill input/textarea
172- `fill_form(elements)` - fill multiple fields
173- `hover(uid)` - hover over element
174
175**Emulation:**
176- `resize_page(width, height)` - change viewport (mobile: 375x667, tablet: 768x1024, desktop: 1920x1080)
177- `emulate_network(throttlingOption)` - simulate network (Offline, Slow 3G, Fast 3G, etc.)
178- `performance_start_trace(reload, autoStop)` - measure Core Web Vitals
179
180→ Full docs: `references/mcp-tools-reference.md`
181
182---
183
184## Quick Start
185
186### Example 1: Verify Console After Component Implementation
187```typescript
188navigate_page(url: "http://localhost:4200/gallery")
189list_console_messages(types: ["error", "warn"])
190// ✅ No errors → Component works
191// ❌ Errors found → get_console_message(msgid) → Fix
192```
193
194### Example 2: Verify Network After API Integration
195```typescript
196navigate_page(url: "http://localhost:4200/login")
197fill_form([{ uid: "input-email", value: "test@example.com" }, { uid: "input-password", value: "test123456" }])
198click(uid: "btn-login")
199wait_for(text: "Photo Gallery", timeout: 5000)
200list_network_requests(resourceTypes: ["fetch"])
201get_network_request(reqid: 1)
202// → POST /api/auth/login → 200 OK → JWT token ✅
203```
204
205### Example 3: Verify Visual Layout
206```typescript
207navigate_page(url: "http://localhost:4200/gallery")
208take_screenshot(fullPage: true)
209resize_page(width: 375, height: 667) // Mobile
210take_screenshot()
211// → Check: Single column layout on mobile ✅
212```
213
214→ Detailed scenarios: `examples/*.md`
215→ Detailed patterns: `references/verification-patterns.md`
216
217---
218
219## Best Practices
220
2211. **Always check console first** - even if UI looks correct
222 ```typescript
223 list_console_messages(types: ["error", "warn"])
224 ```
225
2262. **Check network for API calls** - verify status codes, headers, payloads
227 ```typescript
228 list_network_requests(resourceTypes: ["xhr", "fetch"])
229 ```
230
2313. **Test responsive layouts** - mobile (375), tablet (768), desktop (1920)
232 ```typescript
233 resize_page(width: 375, height: 667)
234 ```
235
2364. **Use snapshots for structure, screenshots for visual**
237 - Snapshot (fast, text) → "Are elements present?"
238 - Screenshot (slow, image) → "Does it look right?"
239
2405. **Iterative verification for bug fixes**
241 - Verify bug → Fix code → Re-verify → Repeat until ✅
242
2436. **Report actionable issues**
244 - ❌ BAD: "Login doesn't work"
245 - ✅ GOOD: "Login failed: POST /api/auth/login → 401. Request missing Authorization header. Check AuthInterceptor."
246
2477. **Restart servers when code changes**
248 ```bash
249 ./scripts/stop-dev.sh && ./scripts/start-dev.sh
250 ```
251
252---
253
254## Related Skills
255
256- **angular-frontend** - for implementing Angular components
257- **spring-boot-backend** - for backend API development
258- **code-review** - for code quality checks
259
260---
261
262## Key Reminders
263
264**Proactive Verification:**
265- ✅ Use after implementing tasks
266- ✅ Verify BEFORE marking complete
267- ✅ Catch issues early
268
269**Comprehensive Checks:**
270- ✅ Console errors (ALWAYS)
271- ✅ Network requests (for API features)
272- ✅ Visual rendering (for UI features)
273- ✅ Responsive layout (mobile, tablet, desktop)
274
275**Server Management:**
276- ✅ Check servers before starting (PID/health)
277- ✅ Restart when code changes
278- ✅ Use project scripts (`./scripts/start-dev.sh`)
majiayu000