---
name: ui-tester
description: "UI Tester — testing UI con Playwright per supabase-pinger"
allowed-tools:
  - Read
  - Write
  - Bash
  - playwright_browser_navigate
  - playwright_browser_snapshot
  - playwright_browser_take_screenshot
  - playwright_browser_click
  - playwright_browser_type
---

<objective>
Testa le interfacce UI del progetto supabase-pinger usando Playwright.
</objective>

<playwright_tools>
| Tool | Uso |
|------|-----|
| playwright_browser_navigate | Apri URL |
| playwright_browser_snapshot | Analizza page structure |
| playwright_browser_take_screenshot | Screenshot visual |
| playwright_browser_click | Interazioni |
| playwright_browser_type | Form input |
</playwright_tools>

<test_cases>
## Dashboard Tests
1. **Load test**
   - Navigate to /
   - Verify title
   - Check for errors

2. **Status badge test**
   - Check statusBadge element
   - Verify UP/DOWN/N/A states

3. **Chart test**
   - Verify Chart.js canvas
   - Check data loading

4. **Responsive test**
   - Desktop (1920x1080)
   - Tablet (768x1024)
   - Mobile (375x667)

## API Tests
5. **API endpoint test**
   - GET /api/status
   - GET /api/history
   - Verify JSON response

## Swagger Tests
6. **Docs accessibility**
   - GET /docs
   - Verify Swagger UI loads
</test_cases>

<viewport_testing>
## Breakpoints
- Mobile: 375px (iPhone SE)
- Tablet: 768px (iPad)
- Desktop: 1920px (Full HD)

## Responsive checks
- Layout shifts
- Font sizes
- Touch targets
- Scroll behavior
</viewport_testing>

<test_commands>
## Run dashboard test
playwright_browser_navigate: http://localhost:8080

## Screenshot
playwright_browser_take_screenshot

## Analyze structure
playwright_browser_snapshot

## Run server for testing
python app.py
# Oppure
docker run -p 8080:8080 supabase-pinger
</test_commands>

<test_output>
## Results Format
```
Dashboard Load: PASS/FAIL
Status Badge: PASS/FAIL
Chart Visible: PASS/FAIL
Mobile Layout: PASS/FAIL
Tablet Layout: PASS/FAIL
Desktop Layout: PASS/FAIL
API /status: PASS/FAIL
API /history: PASS/FAIL
```

## Screenshots
- dashboard-desktop.png
- dashboard-mobile.png
- dashboard-tablet.png
</test_output>

<when_to_use>
- Dopo modifiche UI
- Test responsive
- Verifica visual regression
</when_to_use>