247 lines
6.4 KiB
Markdown
247 lines
6.4 KiB
Markdown
# 🤖 AI-Powered Visual Testing Suite
|
|
|
|
Automatisk UI/UX kvalitetsvurdering ved hjælp af Selenium og OpenAI Vision API.
|
|
|
|
## 📋 Oversigt
|
|
|
|
Denne test suite kombinerer:
|
|
- **Selenium WebDriver** - Automatisk browser navigation og screenshots
|
|
- **OpenAI GPT-4 Vision** - AI-baseret analyse af UI/UX kvalitet
|
|
|
|
## 🎯 Formål
|
|
|
|
Evaluer visuelt design og brugervenlighed automatisk gennem:
|
|
|
|
1. **Visuelt Design** - Farver, typografi, spacing, modernitet
|
|
2. **Layout & Struktur** - Information hierarchy, placering, alignment
|
|
3. **Brugervenlighed (UX)** - Navigation, CTAs, forms, feedback
|
|
4. **Professionelt Udtryk** - Credibility, polish, brand konsistens
|
|
|
|
## 🚀 Kom i gang
|
|
|
|
### Prerequisites
|
|
|
|
```bash
|
|
# Python pakker (allerede installeret hvis Selenium virker)
|
|
pip install selenium openai python-dotenv
|
|
|
|
# Chrome/ChromeDriver (allerede installeret)
|
|
# OpenAI API key i .env fil
|
|
```
|
|
|
|
### Tilføj API Key
|
|
|
|
Tilføj din OpenAI API key til `.env` filen:
|
|
|
|
```bash
|
|
OPENAI_API_KEY=sk-your-api-key-here
|
|
```
|
|
|
|
### Kør Test Suite
|
|
|
|
```bash
|
|
# Direkte Python kommando
|
|
python3 selenium_visual_ai_test.py
|
|
|
|
# Via npm script
|
|
npm run test-visual-ai
|
|
|
|
# Alias
|
|
npm run visual-qa
|
|
```
|
|
|
|
## 📊 Output
|
|
|
|
Test suiten genererer:
|
|
|
|
1. **Screenshots** - Højkvalitets billeder af alle sider
|
|
2. **AI Analyse** - Detaljeret feedback for hver side
|
|
3. **HTML Rapport** - Interaktiv rapport med scores og anbefalinger
|
|
|
|
### Rapport Placering
|
|
|
|
```
|
|
test-results/visual-ai/
|
|
├── visual_ai_report_YYYYMMDD_HHMMSS.html # Hoved rapport
|
|
├── YYYYMMDD_HHMMSS_homepage.png # Screenshots
|
|
├── YYYYMMDD_HHMMSS_projekt_flow.png
|
|
├── YYYYMMDD_HHMMSS_geometry_form.png
|
|
├── YYYYMMDD_HHMMSS_smart_packages.png
|
|
└── YYYYMMDD_HHMMSS_materials_manager.png
|
|
```
|
|
|
|
## 📈 Test Struktur
|
|
|
|
### Test Cases
|
|
|
|
| Test | Beskrivelse | Fokus |
|
|
|------|-------------|-------|
|
|
| Homepage | Dashboard view | Overall første indtryk |
|
|
| Projekt Flow | Step interface | Workflow navigation |
|
|
| Geometri Form | Input fields + preview | Form design, input handling |
|
|
| Smart Pakker | Package selection | Card design, information density |
|
|
| Materialestyring | Material manager | Table design, data presentation |
|
|
|
|
### Evaluerings Metrikker
|
|
|
|
Hver test evalueres på en skala fra 1-10 for:
|
|
|
|
- **Visuelt Design** (farver, typografi, spacing)
|
|
- **Layout & Struktur** (hierarchy, placering, alignment)
|
|
- **Brugervenlighed** (navigation, CTAs, feedback)
|
|
- **Professionelt Udtryk** (credibility, polish, konsistens)
|
|
|
|
## 🎨 Rapport Features
|
|
|
|
Den genererede HTML rapport indeholder:
|
|
|
|
- ✅ **Overall Score** - Gennemsnitsscore for alle tests
|
|
- 📸 **Screenshots** - Højopløselige billeder
|
|
- 🔍 **Detaljeret Feedback** - AI-genereret analyse
|
|
- ⚠️ **Identificerede Problemer** - Konkrete issues
|
|
- 💡 **Anbefalinger** - Forbedringsforslag
|
|
- 📊 **Score Breakdown** - Per metrik scores
|
|
|
|
## 💻 Eksempel Output
|
|
|
|
```
|
|
🤖 AI-POWERED VISUAL TESTING SUITE
|
|
================================================================================
|
|
|
|
🔧 Starter Chrome for visuelt AI test...
|
|
✅ Chrome klar
|
|
|
|
🔐 Logger ind...
|
|
✅ Login gennemført
|
|
|
|
================================================================================
|
|
🏠 TEST: Homepage / Dashboard
|
|
================================================================================
|
|
📸 Screenshot: 20251114_143052_homepage.png
|
|
🤖 AI analyserer: Hovedside/Dashboard...
|
|
✅ AI Analyse gennemført - Overall Score: 8.2/10
|
|
|
|
================================================================================
|
|
🏗️ TEST: Projekt Flow
|
|
================================================================================
|
|
📸 Screenshot: 20251114_143055_projekt_flow.png
|
|
🤖 AI analyserer: Projekt Flow - Step interface...
|
|
✅ AI Analyse gennemført - Overall Score: 7.8/10
|
|
|
|
[... flere tests ...]
|
|
|
|
================================================================================
|
|
📊 GENERERER RAPPORT
|
|
================================================================================
|
|
|
|
✅ Rapport gemt: test-results/visual-ai/visual_ai_report_20251114_143052.html
|
|
📊 Gennemsnitsscore: 8.1/10
|
|
🎯 Status: Excellent ✅
|
|
```
|
|
|
|
## 🔧 Tilpasning
|
|
|
|
### Tilføj Nye Tests
|
|
|
|
Tilføj metoder til `VisualAITester` klassen:
|
|
|
|
```python
|
|
def test_new_page(self):
|
|
"""Test new page visual quality"""
|
|
print("=" * 80)
|
|
print("🎯 TEST: New Page")
|
|
print("=" * 80)
|
|
|
|
# Navigate to page
|
|
self.driver.get(f"{BASE_URL}/new-page")
|
|
time.sleep(3)
|
|
|
|
# Take screenshot
|
|
screenshot = self.take_screenshot("new_page", "New page description")
|
|
|
|
# Analyze
|
|
analysis = self.analyze_visual_quality(screenshot, "Context for AI")
|
|
|
|
# Store result
|
|
self.test_results.append({
|
|
"test": "New Page",
|
|
"screenshot": screenshot,
|
|
"analysis": analysis
|
|
})
|
|
```
|
|
|
|
Tilføj til `run_all_tests()`:
|
|
|
|
```python
|
|
self.test_new_page()
|
|
```
|
|
|
|
### Justér AI Prompt
|
|
|
|
Rediger `analyze_visual_quality()` metoden for at ændre evalueringskriterier.
|
|
|
|
## 🎯 Best Practices
|
|
|
|
1. **Kør efter deployment** - Test efter hver release
|
|
2. **Sammenlign over tid** - Gem rapporter for historik
|
|
3. **Følg anbefalinger** - Implementer AI's forslag
|
|
4. **Kombiner med manuel QA** - AI finder ikke alt
|
|
5. **Iterér** - Gentag test efter fixes
|
|
|
|
## ⚡ Performance
|
|
|
|
- Typisk køretid: **2-3 minutter**
|
|
- Cost per test run: **~$0.10-0.20** (OpenAI API)
|
|
- Screenshots: **~5MB total**
|
|
- Rapport: **~500KB HTML**
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### "OPENAI_API_KEY ikke fundet"
|
|
|
|
Tilføj til `.env`:
|
|
```bash
|
|
OPENAI_API_KEY=sk-your-key-here
|
|
```
|
|
|
|
### "Chrome binary not found"
|
|
|
|
Scriptet bruger allerede den korrekte Chrome sti (`/usr/bin/google-chrome`)
|
|
|
|
### AI analyse fejler
|
|
|
|
Check API key og internet forbindelse. OpenAI API skal være tilgængelig.
|
|
|
|
### Lav score men siden ser fin ud
|
|
|
|
AI'en er konservativ. Læs feedback for konkrete forbedringsforslag.
|
|
|
|
## 📚 Resources
|
|
|
|
- [Selenium Docs](https://www.selenium.dev/documentation/)
|
|
- [OpenAI Vision API](https://platform.openai.com/docs/guides/vision)
|
|
- [GPT-4 Vision Best Practices](https://platform.openai.com/docs/guides/vision/best-practices)
|
|
|
|
## 🤝 Bidrag
|
|
|
|
Forbedringsforslag til test suite:
|
|
|
|
1. Tilføj flere test cases
|
|
2. Forbedre AI prompt for bedre feedback
|
|
3. Tilføj responsive testing (forskellige skærmstørrelser)
|
|
4. Integrer med CI/CD pipeline
|
|
5. Tilføj accessibility checks
|
|
|
|
## 📝 Changelog
|
|
|
|
### v1.0.0 (2025-11-14)
|
|
- Initial release
|
|
- 5 test cases
|
|
- OpenAI GPT-4 Vision integration
|
|
- HTML rapport generation
|
|
- Screenshot capture med high detail
|
|
|
|
---
|
|
|
|
**Lavet med ❤️ for Tilbudgivern projektet**
|