Spustím aplikáciu → Prehľadám UI → Extrahujem elementy → Generujem testy

Prečítam zdrojový kód → Analyzujem komponenty → Generujem testy

1. ANALYZE  → Skenuje projekt, extrahuje formuláre, tlačidlá, linky
2. MARK     → Zavolá Marker service na pridanie data-testid
3. GENERATE → LLM vygeneruje testovacie scenáre

# 1. Analyzuj projekt
python main.py analyze /path/to/frontend

# Výstup:
# Found 47 components
# - 12 forms with 38 input fields
# - 45 buttons (23 with click handlers)
# - 67 data-testid attributes
# - 15 navigation links

# 2. Vygeneruj scenáre
python main.py generate /path/to/frontend

# Výstup:
# Generated 156 test scenarios
# - 47 happy path scenarios
# - 62 validation scenarios
# - 31 navigation scenarios
# - 16 edge case scenarios

<!-- Scout rozpozná -->
<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
  <input formControlName="email" [required]="true">
  <button type="submit" data-testid="btn-submit">Send</button>
</form>

<a routerLink="/about">About</a>

// Scout rozpozná
<form onSubmit={handleSubmit}>
  <input 
    type="email" 
    required 
    data-testid="input-email"
    onChange={(e) => setEmail(e.target.value)}
  />
  <button type="submit">Submit</button>
</form>

<Link to="/dashboard">Dashboard</Link>

<!-- Scout rozpozná -->
<template>
  <form @submit.prevent="submitForm">
    <input v-model="email" required data-testid="input-email">
    <button type="submit">Odoslať</button>
  </form>
  
  <router-link :to="{ name: 'home' }">Home</router-link>
</template>

# Angular pattern
src/app/pages/contact/contact.component.html
→ URL: /contact

# Vue/Nuxt pattern
pages/about/index.vue
→ URL: /about

# React pattern
src/pages/Dashboard.tsx
→ URL: /dashboard

{
  "id": "contact-ecbaee-successful-form-submission-00",
  "name": "Successful form submission with valid data",
  "description": "Tests that the contact form can be submitted successfully",
  "page_url": "/contact",
  "steps": [
    {
      "action": "fill",
      "selector": "[data-testid=\"input-name\"]",
      "value": "John Doe",
      "description": "Fill name field"
    },
    {
      "action": "fill",
      "selector": "[data-testid=\"input-email\"]",
      "value": "john.doe@example.com",
      "description": "Fill email field with valid format"
    },
    {
      "action": "click",
      "selector": "[data-testid=\"btn-submit\"]",
      "value": "",
      "description": "Click submit button"
    },
    {
      "action": "verify_visible",
      "selector": ".success-message",
      "value": "",
      "description": "Verify success message appears"
    }
  ]
}

import pytest
from playwright.sync_api import Page

def test_successful_form_submission_with_valid_data(page: Page, base_url: str):
    """Tests that the contact form can be submitted successfully"""
    page.goto(f"{base_url}/contact")
    
    # Fill name field
    page.locator("[data-testid=\"input-name\"]").fill("John Doe")
    
    # Fill email field with valid format
    page.locator("[data-testid=\"input-email\"]").fill("john.doe@example.com")
    
    # Click submit button
    page.locator("[data-testid=\"btn-submit\"]").click()
    
    # Verify success message appears
    expect(page.locator(".success-message")).to_be_visible()


def test_form_validation_required_fields(page: Page, base_url: str):
    """Tests that required field validation works correctly"""
    page.goto(f"{base_url}/contact")
    
    # Try to submit empty form
    page.locator("[data-testid=\"btn-submit\"]").click()
    
    # Verify validation errors appear
    expect(page.locator(".error-message")).to_be_visible()

def test_successful_login():
    # Vyplň správne údaje → očakávaj úspech

def test_email_format_validation():
    # Vyplň neplatný email → očakávaj error

def test_required_field_validation():
    # Nechaj povinné pole prázdne → očakávaj error

def test_navigation_to_about_page():
    # Klikni na link → over že si na správnej stránke

def test_form_with_special_characters():
    # Vyplň špeciálne znaky → over správanie

// Angular Reactive Forms
this.form = this.fb.group({
  email: ['', [Validators.required, Validators.email]],
  phone: ['', [Validators.pattern(/^\d{10}$/)]],
  age: ['', [Validators.min(18), Validators.max(100)]]
});

<!-- HTML5 validácia -->
<input type="email" required minlength="5" maxlength="100">

┌─────────────────────────────────────────────────────┐
│                  User Interface                      │
│        CLI │ gRPC Server │ MCP Server               │
└──────────────────────┬──────────────────────────────┘
                       ↓
┌─────────────────────────────────────────────────────┐
│                  CodeAnalyzer                        │
│   - Skenuje .html, .jsx, .tsx, .vue                 │
│   - Regex extrakcia formulárov, tlačidiel, linkov   │
│   - Detekcia validačných pravidiel                  │
│   - URL inference z cesty súboru                    │
└──────────────────────┬──────────────────────────────┘
                       ↓
┌─────────────────────────────────────────────────────┐
│               ScenarioGenerator                      │
│   - Ollama + Qwen3-Coder LLM                        │
│   - Prompt building z analýzy                       │
│   - JSON parsing s error recovery                   │
│   - Generovanie unikátnych ID                       │
└──────────────────────┬──────────────────────────────┘
                       ↓
┌──────────────────┬──────────────────────────────────┐
│  Sentinel JSON   │      Playwright Tests            │
│  (scenáre)       │      (pytest)                    │
└──────────────────┴──────────────────────────────────┘

# Spustite Marker gRPC server
cd ../marker && python grpc_server.py

# Scout pridá testid + vygeneruje scenáre
python main.py full /path/to/frontend

1. Scout analyzuje komponenty
2. Scout zavolá Marker → pridá data-testid
3. Scout znovu analyzuje (teraz s testid)
4. Scout vygeneruje scenáre

# Len analýza
python main.py analyze /path/to/frontend

# Len generovanie scenárov
python main.py generate /path/to/frontend --output ./tests

# Kompletný workflow
python main.py full /path/to/frontend

# S custom užívateľom pre multi-role testing
python main.py generate /path --user admin --role administrator

# Spustite server
python main.py grpc-server --port 50052

# Volajte z akéhokoľvek jazyka
# Service: ScoutService
# Methods: Analyze, Generate, FullWorkflow

// claude_desktop_config.json
{
  "mcpServers": {
    "scout": {
      "command": "python",
      "args": ["main.py", "mcp-server"]
    }
  }
}

"Analyzuj môj Angular projekt a vygeneruj testy pre contact form"
→ Claude zavolá scout_analyze + scout_generate

# 1. Scout pre development (rýchle, z kódu)
scout generate ./frontend

# 2. Sentinel pre QA (presné, z UI)
sentinel analyze https://staging.app.com

┌─────────────────────────────────────────────────────┐
│                     MARKER                           │
│   Pridá data-testid do komponentov                  │
│   (Automatické označenie elementov)                 │
└──────────────────────┬──────────────────────────────┘
                       ↓
┌─────────────────────────────────────────────────────┐
│                     SCOUT                            │
│   Analyzuje kód → Generuje scenáre                  │
│   (Statická analýza + LLM)                          │
└──────────────────────┬──────────────────────────────┘
                       ↓
┌─────────────────────────────────────────────────────┐
│                    SENTINEL                          │
│   Prehľadá bežiacu app → Validuje scenáre           │
│   (Dynamická analýza + LLM)                         │
└──────────────────────┬──────────────────────────────┘
                       ↓
┌─────────────────────────────────────────────────────┐
│              PLAYWRIGHT / PYTEST                     │
│   Spustí automatizované testy                       │
└─────────────────────────────────────────────────────┘

# 1. Marker: Pridaj data-testid
python marker/main.py add --project ./frontend

# 2. Scout: Vygeneruj testy z kódu
python scout/main.py generate ./frontend --output ./tests

# 3. (Voliteľne) Sentinel: Validuj na staging
python sentinel/main.py --url https://staging.app.com

# 4. Spusti testy
pytest ./tests --base-url https://staging.app.com

<!-- contact.component.html -->
<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="name">Name</label>
    <input 
      id="name"
      formControlName="name"
      data-testid="input-contact-name"
      required>
  </div>
  
  <div class="form-group">
    <label for="email">Email</label>
    <input 
      id="email"
      type="email"
      formControlName="email"
      data-testid="input-contact-email"
      required>
  </div>
  
  <div class="form-group">
    <label for="message">Message</label>
    <textarea
      id="message"
      formControlName="message"
      data-testid="textarea-contact-message"
      minlength="10">
    </textarea>
  </div>
  
  <button type="submit" data-testid="btn-contact-submit">
    Send Message
  </button>
</form>

# test_contact.py - vygenerované Scoutom

def test_successful_contact_form_submission(page: Page, base_url: str):
    """Test successful form submission with valid data"""
    page.goto(f"{base_url}/contact")
    
    page.locator("[data-testid=\"input-contact-name\"]").fill("John Doe")
    page.locator("[data-testid=\"input-contact-email\"]").fill("john@example.com")
    page.locator("[data-testid=\"textarea-contact-message\"]").fill("Hello, this is a test message.")
    page.locator("[data-testid=\"btn-contact-submit\"]").click()


def test_contact_form_required_name(page: Page, base_url: str):
    """Test that name field is required"""
    page.goto(f"{base_url}/contact")
    
    # Leave name empty, fill other fields
    page.locator("[data-testid=\"input-contact-email\"]").fill("john@example.com")
    page.locator("[data-testid=\"textarea-contact-message\"]").fill("Test message here.")
    page.locator("[data-testid=\"btn-contact-submit\"]").click()
    
    # Verify form was not submitted
    expect(page.locator("[data-testid=\"input-contact-name\"]")).to_have_attribute("aria-invalid", "true")


def test_contact_form_email_validation(page: Page, base_url: str):
    """Test that email format is validated"""
    page.goto(f"{base_url}/contact")
    
    page.locator("[data-testid=\"input-contact-name\"]").fill("John")
    page.locator("[data-testid=\"input-contact-email\"]").fill("invalid-email")
    page.locator("[data-testid=\"btn-contact-submit\"]").click()
    
    # Verify email validation error


def test_contact_form_message_minlength(page: Page, base_url: str):
    """Test that message has minimum length requirement"""
    page.goto(f"{base_url}/contact")
    
    page.locator("[data-testid=\"input-contact-name\"]").fill("John")
    page.locator("[data-testid=\"input-contact-email\"]").fill("john@example.com")
    page.locator("[data-testid=\"textarea-contact-message\"]").fill("Short")  # < 10 chars
    page.locator("[data-testid=\"btn-contact-submit\"]").click()
    
    # Verify minlength validation

# 1. Nainštalujte Ollama a model
ollama pull qwen3-coder:30b

# 2. Nakonfigurujte .env
cat > .env << EOF
PROJECT_PATH=/path/to/frontend
OLLAMA_HOST=http://localhost:11434
LLM_MODEL=qwen3-coder:30b
OUTPUT_DIR=./result
EOF

# 3. Analyzujte projekt
python main.py analyze /path/to/frontend

# 4. Vygenerujte testy
python main.py generate /path/to/frontend

# 5. Spustite testy
pytest result/tests/ --base-url http://localhost:4200