supabase-pinger/.opencode/agents/ui-tester/SKILL.md

name, description, allowed-tools

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

Testa le interfacce UI del progetto supabase-pinger usando Playwright.

<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>