# 🤖 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**