🎉 Refactor: Renamed and reorganized documentation files for improved clarity and structure. ('📚')
This commit is contained in:
393
backend/DOCS/README_FORM_TESTER.md
Normal file
393
backend/DOCS/README_FORM_TESTER.md
Normal file
@ -0,0 +1,393 @@
|
||||
# Flask HTML-Formular Test Automator 🧪
|
||||
|
||||
Ein umfassender Frontend-fokussierter Test-Automator für HTML-Formulare in Flask-Anwendungen. Simuliert echte Browser-Interaktionen und testet die tatsächliche Benutzeroberfläche mit JavaScript-Validierungen, dynamischen Elementen und realistischen User-Interaktionen.
|
||||
|
||||
## 🎯 Hauptmerkmale
|
||||
|
||||
### ✅ **Browser-basiertes Testing**
|
||||
- Echte Browser-Interaktionen (Playwright)
|
||||
- Realistische Mausbewegungen und Tipp-Geschwindigkeiten
|
||||
- JavaScript-Validierungen werden mitgetestet
|
||||
- Dynamische Inhalte und AJAX-Requests
|
||||
|
||||
### ✅ **Intelligente Formular-Erkennung**
|
||||
- Automatisches Scannen aller Formulare auf einer Seite
|
||||
- Erkennung von Feld-Typen und Validierungsregeln
|
||||
- Multi-Step-Formular-Unterstützung
|
||||
- CSRF-Token-Behandlung
|
||||
|
||||
### ✅ **Realistische Test-Daten**
|
||||
- Intelligente Daten-Generierung basierend auf Feld-Attributen
|
||||
- Pattern-basierte Generierung (RegEx-Support)
|
||||
- Edge-Case-Generierung für robuste Tests
|
||||
- Locale-spezifische Daten (Deutsch, Englisch, etc.)
|
||||
|
||||
### ✅ **Umfassende Validierung**
|
||||
- HTML5-Validierungen
|
||||
- Client-Side JavaScript-Validierungen
|
||||
- Visual Feedback (Fehlermeldungen, Icons)
|
||||
- Server-Side Validierung-Tests
|
||||
|
||||
### ✅ **Accessibility-Testing**
|
||||
- ARIA-Attribute-Validierung
|
||||
- Label-Zuordnungs-Tests
|
||||
- Keyboard-Navigation
|
||||
- Farbkontrast-Prüfung
|
||||
- Screen-Reader-Kompatibilität
|
||||
|
||||
### ✅ **Responsive Design Tests**
|
||||
- Multi-Device-Testing (iPhone, iPad, Desktop)
|
||||
- Touch-Interaktions-Tests
|
||||
- Viewport-spezifische Validierung
|
||||
- Layout-Stabilitäts-Tests
|
||||
|
||||
### ✅ **Visual Documentation**
|
||||
- Screenshots aller Test-Phasen
|
||||
- Video-Aufzeichnung (optional)
|
||||
- HTML-Reports mit visuellen Beweisen
|
||||
- JSON-Export für Automation
|
||||
|
||||
## 🚀 Installation
|
||||
|
||||
### Schnell-Setup
|
||||
```bash
|
||||
# Setup-Skript ausführen
|
||||
./form_tester_setup.sh
|
||||
|
||||
# Oder mit Virtual Environment
|
||||
./form_tester_setup.sh --venv
|
||||
```
|
||||
|
||||
### Manuelle Installation
|
||||
```bash
|
||||
# Dependencies installieren
|
||||
pip install playwright faker beautifulsoup4 rich
|
||||
|
||||
# Browser installieren
|
||||
playwright install chromium firefox webkit
|
||||
```
|
||||
|
||||
## 📋 Verwendung
|
||||
|
||||
### CLI-Interface
|
||||
|
||||
#### Alle Formulare auf einer Seite testen
|
||||
```bash
|
||||
python form_test_automator.py --url http://localhost:5000/register --test-all
|
||||
```
|
||||
|
||||
#### Spezifisches Formular testen
|
||||
```bash
|
||||
python form_test_automator.py --url http://localhost:5000/contact --form "#contact-form"
|
||||
```
|
||||
|
||||
#### Multi-Step Formular testen
|
||||
```bash
|
||||
python form_test_automator.py --url http://localhost:5000/signup --multi-step --steps "step1,step2,step3"
|
||||
```
|
||||
|
||||
#### Responsive Testing
|
||||
```bash
|
||||
python form_test_automator.py --url http://localhost:5000/order --responsive --devices "iPhone 12,iPad,Desktop"
|
||||
```
|
||||
|
||||
#### Umfassende Tests mit allen Szenarien
|
||||
```bash
|
||||
python form_test_automator.py --url http://localhost:5000/application --comprehensive
|
||||
```
|
||||
|
||||
#### Mit sichtbarem Browser (für Debugging)
|
||||
```bash
|
||||
python form_test_automator.py --url http://localhost:5000/login --test-all --headed
|
||||
```
|
||||
|
||||
### Python-API
|
||||
|
||||
```python
|
||||
import asyncio
|
||||
from form_test_automator import HTMLFormTestAutomator
|
||||
|
||||
async def test_my_forms():
|
||||
async with HTMLFormTestAutomator(
|
||||
base_url="http://localhost:5000",
|
||||
browser="chromium",
|
||||
headless=True
|
||||
) as automator:
|
||||
|
||||
# Einfacher Formular-Test
|
||||
results = await automator.test_form(
|
||||
url="/login",
|
||||
form_selector="#login-form",
|
||||
test_data={
|
||||
"username": "admin",
|
||||
"password": "admin123"
|
||||
},
|
||||
test_scenarios=["valid", "invalid", "accessibility"]
|
||||
)
|
||||
|
||||
# Report generieren
|
||||
report_path = automator.generate_report("my_test_report")
|
||||
print(f"Report: {report_path}")
|
||||
|
||||
# Test ausführen
|
||||
asyncio.run(test_my_forms())
|
||||
```
|
||||
|
||||
## 🧪 Test-Szenarien
|
||||
|
||||
### Standard-Szenarien
|
||||
- **`valid`**: Gültige Daten, erwartete erfolgreiche Submission
|
||||
- **`invalid`**: Ungültige Daten, Validierung sollte greifen
|
||||
- **`edge_cases`**: XSS, SQL-Injection, Unicode, extreme Längen
|
||||
- **`accessibility`**: ARIA, Labels, Keyboard-Navigation
|
||||
- **`validations`**: Client-Side Validierungs-Tests
|
||||
- **`responsive`**: Multi-Device-Tests
|
||||
- **`dynamic`**: Conditional Fields, JavaScript-Verhalten
|
||||
- **`error_display`**: Fehlermeldungs-Anzeige-Tests
|
||||
|
||||
### Erweiterte Tests
|
||||
```bash
|
||||
# Alle Szenarien
|
||||
python form_test_automator.py --url http://localhost:5000 --comprehensive
|
||||
|
||||
# Spezifische Szenarien
|
||||
python form_test_automator.py --url http://localhost:5000 --scenarios "valid,accessibility,responsive"
|
||||
```
|
||||
|
||||
## 📊 Reports
|
||||
|
||||
### HTML-Report
|
||||
- Visuelle Übersicht aller Tests
|
||||
- Screenshots der Formular-Zustände
|
||||
- Interaktive Statistiken
|
||||
- Filtermöglichkeiten nach Status
|
||||
|
||||
### JSON-Report
|
||||
- Maschinell lesbare Ergebnisse
|
||||
- Integration in CI/CD-Pipelines
|
||||
- Datenanalyse und Metriken
|
||||
- API-kompatibles Format
|
||||
|
||||
### Screenshot-Dokumentation
|
||||
- Vor/Nach-Vergleiche
|
||||
- Fehler-Zustände
|
||||
- Responsive-Ansichten
|
||||
- Validierungs-Meldungen
|
||||
|
||||
## 🎪 MYP-spezifische Tests
|
||||
|
||||
Für das MYP (Manage Your Printers) System sind spezielle Test-Beispiele verfügbar:
|
||||
|
||||
```bash
|
||||
# MYP-Beispiele ausführen
|
||||
python test_forms_example.py
|
||||
|
||||
# Oder interaktiv wählen:
|
||||
# 1. Umfassende Tests (alle Formulare)
|
||||
# 2. Demo Einzeltest (mit sichtbarem Browser)
|
||||
# 3. Nur Login-Test
|
||||
# 4. Nur Responsive-Test
|
||||
```
|
||||
|
||||
### Getestete MYP-Formulare
|
||||
- **Login & Authentifizierung**
|
||||
- **Drucker-Registrierung & -Verwaltung**
|
||||
- **Druckauftrags-Erstellung**
|
||||
- **Gast-Zugangs-System (OTP)**
|
||||
- **Einstellungen & Konfiguration**
|
||||
- **Tapo-Controller-Integration**
|
||||
|
||||
## ⚙️ Konfiguration
|
||||
|
||||
### form_tester_config.json
|
||||
```json
|
||||
{
|
||||
"base_url": "http://localhost:5000",
|
||||
"browser": "chromium",
|
||||
"headless": true,
|
||||
"viewport": {
|
||||
"width": 1280,
|
||||
"height": 720
|
||||
},
|
||||
"default_scenarios": [
|
||||
"valid",
|
||||
"invalid",
|
||||
"accessibility"
|
||||
],
|
||||
"test_devices": [
|
||||
"iPhone SE",
|
||||
"iPhone 12",
|
||||
"iPad",
|
||||
"Desktop 1280x720"
|
||||
],
|
||||
"output_directory": "form_test_reports",
|
||||
"screenshot_on_failure": true,
|
||||
"video_recording": false
|
||||
}
|
||||
```
|
||||
|
||||
## 🔧 Erweiterte Features
|
||||
|
||||
### 1. Multi-Step-Form-Testing
|
||||
```python
|
||||
# Mehrstufige Formulare
|
||||
results = await automator.test_multi_step_form(
|
||||
start_url="/registration",
|
||||
steps=["personal-info", "address", "payment", "confirmation"]
|
||||
)
|
||||
```
|
||||
|
||||
### 2. File-Upload-Testing
|
||||
```python
|
||||
# Datei-Upload-Tests
|
||||
test_data = {
|
||||
"file": "/path/to/test-file.pdf",
|
||||
"description": "Test-Upload"
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Cross-Browser-Testing
|
||||
```python
|
||||
browsers = ["chromium", "firefox", "webkit"]
|
||||
for browser in browsers:
|
||||
async with HTMLFormTestAutomator(browser=browser) as automator:
|
||||
# Tests für jeden Browser
|
||||
```
|
||||
|
||||
### 4. Performance-Monitoring
|
||||
```python
|
||||
# Execution-Time wird automatisch gemessen
|
||||
for result in results:
|
||||
print(f"Test: {result.test_type}, Zeit: {result.execution_time:.2f}s")
|
||||
```
|
||||
|
||||
### 5. Custom Test Data Generators
|
||||
```python
|
||||
# Eigene Daten-Generatoren
|
||||
class CustomDataGenerator(FrontendTestDataGenerator):
|
||||
def _generate_company_id(self, field):
|
||||
return f"MB-{random.randint(1000, 9999)}"
|
||||
```
|
||||
|
||||
## 🐛 Debugging & Troubleshooting
|
||||
|
||||
### Häufige Probleme
|
||||
|
||||
#### Playwright Installation
|
||||
```bash
|
||||
# Browser neu installieren
|
||||
playwright install chromium
|
||||
|
||||
# System-Dependencies (Linux)
|
||||
sudo apt-get install libnss3 libatk-bridge2.0-0 libx11-xcb1
|
||||
```
|
||||
|
||||
#### Formular nicht gefunden
|
||||
```python
|
||||
# Erweiterte Selektoren verwenden
|
||||
form_selector = "form[action*='login'], #login-form, .login-form"
|
||||
```
|
||||
|
||||
#### JavaScript-Timing-Probleme
|
||||
```python
|
||||
# Längere Wartezeiten
|
||||
await page.wait_for_timeout(2000)
|
||||
await page.wait_for_load_state("networkidle")
|
||||
```
|
||||
|
||||
### Debug-Modus
|
||||
```bash
|
||||
# Mit sichtbarem Browser
|
||||
python form_test_automator.py --url http://localhost:5000 --headed
|
||||
|
||||
# Mit Console-Output
|
||||
python form_test_automator.py --url http://localhost:5000 --verbose
|
||||
```
|
||||
|
||||
## 📈 Integration in CI/CD
|
||||
|
||||
### GitHub Actions
|
||||
```yaml
|
||||
name: Form Tests
|
||||
on: [push, pull_request]
|
||||
jobs:
|
||||
test-forms:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- name: Setup Python
|
||||
uses: actions/setup-python@v4
|
||||
with:
|
||||
python-version: '3.9'
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
pip install -r requirements_form_tester.txt
|
||||
playwright install chromium
|
||||
- name: Run form tests
|
||||
run: |
|
||||
python form_test_automator.py --url http://localhost:5000 --comprehensive
|
||||
- name: Upload reports
|
||||
uses: actions/upload-artifact@v3
|
||||
with:
|
||||
name: form-test-reports
|
||||
path: form_test_reports/
|
||||
```
|
||||
|
||||
### Jenkins Pipeline
|
||||
```groovy
|
||||
pipeline {
|
||||
agent any
|
||||
stages {
|
||||
stage('Form Tests') {
|
||||
steps {
|
||||
sh 'python form_test_automator.py --url $TEST_URL --comprehensive'
|
||||
publishHTML([
|
||||
allowMissing: false,
|
||||
alwaysLinkToLastBuild: true,
|
||||
keepAll: true,
|
||||
reportDir: 'form_test_reports/reports',
|
||||
reportFiles: '*.html',
|
||||
reportName: 'Form Test Report'
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
### Neue Test-Szenarien hinzufügen
|
||||
```python
|
||||
# In FormInteractionEngine
|
||||
async def test_custom_scenario(self, form: FormStructure) -> List[TestResult]:
|
||||
# Custom Test-Logik
|
||||
pass
|
||||
```
|
||||
|
||||
### Custom Validators
|
||||
```python
|
||||
# In VisualFormValidator
|
||||
async def validate_custom_aspect(self, form: FormStructure) -> List[TestResult]:
|
||||
# Custom Validierung
|
||||
pass
|
||||
```
|
||||
|
||||
## 📝 Lizenz
|
||||
|
||||
Dieses Tool wurde als Teil der Mercedes-Benz Projektarbeit MYP entwickelt.
|
||||
|
||||
**Autor**: Till Tomczak
|
||||
**Projekt**: MYP (Manage Your Printers)
|
||||
**Version**: 1.0
|
||||
|
||||
## 🔗 Links
|
||||
|
||||
- [Playwright Documentation](https://playwright.dev/python/)
|
||||
- [Faker Documentation](https://faker.readthedocs.io/)
|
||||
- [BeautifulSoup Documentation](https://www.crummy.com/software/BeautifulSoup/bs4/doc/)
|
||||
- [Rich Documentation](https://rich.readthedocs.io/)
|
||||
|
||||
---
|
||||
|
||||
**🎯 Frontend-fokussiertes Testing für Flask-Anwendungen - Teste wie deine Benutzer es sehen!**
|
||||
Reference in New Issue
Block a user