Obsah článku / Contents
Marker: AI ktorá pridá data-testid do celého projektu za 5 minút

Marker: AI ktorá pridá data-testid do celého projektu za 5 minút

Poznáte ten pocit, keď automation engineer príde s požiadavkou: "Potrebujem data-testid na všetkých tlačidlách a inputoch"? A vy si uvedomíte, že máte 200 komponentov a v každom treba manuálne pridať atribúty?

Marker tento problém rieši jedným príkazom.

Problém: Prečo potrebujeme data-testid?

Moderné testing frameworky (Cypress, Playwright, Testing Library) odporúčajú používať data-testid namiesto CSS selektorov:

typescript
// ❌ Krehké - zlomí sa pri zmene štýlov
await page.click('.btn-primary.submit-form');

// ❌ Krehké - zlomí sa pri zmene textu
await page.click('text=Odoslať');

// ✅ Stabilné - prežije refactoring
await page.click('[data-testid="button-contact-submit"]');

Prečo je data-testid lepšie:

  • ✅ Nezávisí od CSS tried (môžete meniť štýly)
  • ✅ Nezávisí od textu (môžete lokalizovať)
  • ✅ Explicitne označuje testovateľné elementy
  • ✅ Prežije refactoring komponentov

Realita v praxi

Pridávanie data-testid je nudná, opakujúca sa práca:

html
<!-- Pred -->
<button class="btn-primary">Submit</button>
<input type="email" placeholder="Email">
<a href="/home">Home</a>

<!-- Po - manuálne pridané -->
<button class="btn-primary" data-testid="button-contact-submit">Submit</button>
<input type="email" placeholder="Email" data-testid="input-contact-email">
<a href="/home" data-testid="a-navbar-home">Home</a>

Časová náročnosť:

1 komponent = 5-10 minút (nájsť elementy, vymyslieť názvy, pridať)
100 komponentov = 8-16 hodín práce
+ potreba konzistentného naming convention
+ code review
= frustrácia pre celý tím

Riešenie: Marker - AI-Powered Test ID Generator

Marker je Python nástroj, ktorý:

1

Naskenuje

váš frontend projekt (Angular, React, Vue)
2

Identifikuje

elementy bez data-testid
3

Vygeneruje

sémantické test ID pomocou lokálneho LLM
4

Aplikuje

zmeny do súborov (s možnosťou rollback)
bash
# Jedno spustenie = celý projekt
python main.py add --project /path/to/frontend

# Výsledok: Všetky interaktívne elementy majú data-testid

Ako to funguje?

Pipeline:

Frontend Projekt
      ↓
FileAnalyzerAgent
├── Skenuje .html, .jsx, .tsx, .vue
├── Ignoruje node_modules, dist, .git
└── Extrahuje kontext z cesty súboru
      ↓
TestIdGeneratorAgent
├── Regex detekcia elementov bez testid
├── Batch spracovanie pre LLM
├── Ollama + Qwen3-Coder model
└── Fallback ID ak LLM zlyhá
      ↓
BackupManager
├── Záloha pred zmenami
├── Manifest s timestampom
└── Rollback podpora
      ↓
Modifikované súbory s data-testid

Ktoré elementy Marker spracuje?

python
TARGET_ELEMENTS = [
    "button",    # Tlačidlá
    "input",     # Input polia
    "select",    # Selectboxy
    "a",         # Linky
    "form",      # Formuláre
    "textarea",  # Textové polia
    "table"      # Tabuľky
]

Marker ignoruje elementy, ktoré už majú data-testid - nič neprepíše.

Naming Convention

Marker generuje ID v sémantickej štruktúre:

{element-type}-{component-name}-{description}

Príklady:

ElementKontextVygenerované ID
<button>Submit</button>hero.component.htmlbutton-hero-submit
<input type="email">login.component.htmlinput-login-email
<a href="/">Home</a>navbar.tsxa-navbar-home
<form>contact.vueform-contact-main

Odkiaľ LLM berie kontext:

  1. id atribút
  2. name atribút
  3. formControlName (Angular)
  4. Event handlery (@click, (click), onClick)
  5. type atribút
  6. CSS triedy
  7. Obsah elementu

Praktický príklad

Pred spustením Marker

html
<!-- hero.component.html -->
<section class="hero">
  <h1>Welcome to Our App</h1>
  <form class="signup-form">
    <input type="email" placeholder="Enter your email" formControlName="email">
    <input type="password" placeholder="Password" formControlName="password">
    <button type="submit" class="btn-primary">
      Get Started
    </button>
  </form>
  <a href="/login" class="link-secondary">Already have an account?</a>
</section>

Spustenie Marker

bash
# Preview zmien (nič sa nezmení)
python main.py add --project ./frontend --dry-run

# Výstup:
# [DRY-RUN] hero.component.html:
#   <input ... > → data-testid="input-hero-email"
#   <input ... > → data-testid="input-hero-password"  
#   <button ...> → data-testid="button-hero-submit"
#   <a ...> → data-testid="a-hero-login"

# Aplikovať zmeny
python main.py add --project ./frontend

Po spustení Marker

html
<!-- hero.component.html -->
<section class="hero">
  <h1>Welcome to Our App</h1>
  <form class="signup-form">
    <input type="email" placeholder="Enter your email" formControlName="email" data-testid="input-hero-email">
    <input type="password" placeholder="Password" formControlName="password" data-testid="input-hero-password">
    <button type="submit" class="btn-primary" data-testid="button-hero-submit">
      Get Started
    </button>
  </form>
  <a href="/login" class="link-secondary" data-testid="a-hero-login">Already have an account?</a>
</section>

Výsledok: 4 elementy, 4 sémantické data-testid, 0 manuálnej práce.

Kľúčové výhody

1. Multi-Framework Support

Marker funguje s akýmkoľvek moderným frontendom:

bash
# Angular
src/app/components/*.html
src/app/components/*.component.ts  # inline templates

# React
src/components/*.jsx
src/components/*.tsx

# Vue
src/components/*.vue  # SFC - extrahuje <template> sekciu

2. Lokálne LLM = Bezpečnosť

env
OLLAMA_MODEL=qwen3-coder:30b
OLLAMA_HOST=http://localhost:11434

Výhody lokálneho LLM:

  • ✅ Kód neopustí vašu sieť
  • ✅ Žiadne API poplatky
  • ✅ Funguje offline
  • ✅ GDPR/compliance friendly
  • ✅ Qwen3-Coder je špecializovaný na kód

3. Bezpečnosť so Zálohou

bash
# Marker automaticky vytvorí zálohu pred zmenami
.marker_backup/
├── manifest.json           # Timestamp, zoznam súborov
├── hero.component.html     # Originál
├── login.component.html    # Originál
└── ...

# Ak niečo pokazíte - rollback
python main.py rollback --project ./frontend
# Všetky zmeny sa vrátia do pôvodného stavu

4. Dry-Run Mode

bash
# Vždy najprv preview
python main.py add --project ./frontend --dry-run

# Vidíte presne čo sa zmení:
# [DRY-RUN] Would modify 47 files
# [DRY-RUN] Would add 156 test IDs
# [DRY-RUN] Duplicates found: 0

5. Detekcia Duplicít

bash
# Marker upozorní na konfliktné ID
⚠️  Duplicate test IDs detected:
  - button-submit: hero.component.html, contact.component.html
  - input-email: login.component.html, register.component.html

Integrácie

Marker ponúka 4 spôsoby použitia:

1. CLI (Najjednoduchšie)

bash
# Pridať test ID
python main.py add --project /path/to/frontend

# S filtrom na konkrétne súbory
python main.py add --project /path --filter "login"

# Rollback
python main.py rollback --project /path

2. Python Library

python
from ai_marker import AIMarker

marker = AIMarker()

# Spracovať projekt
result = marker.add_test_ids("/path/to/project")
print(f"Processed: {result.files_count} files")
print(f"Added: {result.ids_added} test IDs")

# Rollback
marker.rollback("/path/to/project")

3. gRPC Server

bash
# Spustite server
python grpc_server.py

# Volajte z akéhokoľvek jazyka
# Port: 50051
# Methods: RunMarker, PreviewChanges, Rollback, AnalyzeProject

4. MCP Server (Claude integrácia)

json
// claude_desktop_config.json
{
  "mcpServers": {
    "marker": {
      "command": "python",
      "args": ["mcp_server.py"]
    }
  }
}

Potom v Claude:

"Pridaj data-testid do môjho Angular projektu na /home/user/frontend"
→ Claude zavolá marker_run tool

Use Cases

1. Legacy Projekt Migrácia

bash
# Projekt bez testov potrebuje test infrastructure
python main.py add --project ./legacy-app

# Výsledok: 500 elementov má data-testid
# Automation engineer môže začať písať testy

2. Príprava na E2E Testy

bash
# Pred integráciou Cypress/Playwright
python main.py add --project ./frontend --dry-run
# Review vygenerované ID
python main.py add --project ./frontend

# Teraz v Cypress:
cy.get('[data-testid="button-hero-submit"]').click();

3. Komponentová Knižnica

bash
# Shared components pre celú organizáciu
python main.py add --project ./ui-library

# Všetky komponenty sú testovateľné
# Konzistentný naming convention

4. CI/CD Integrácia

yaml
# .github/workflows/marker.yml
- name: Check for missing test IDs
  run: |
    python main.py add --project ./frontend --dry-run
    # Fail ak chýbajú test ID

Architektúra

┌─────────────────────────────────────────────────────┐
│                  User Interface                      │
│         CLI │ gRPC Server │ MCP Server              │
└──────────────────────┬──────────────────────────────┘
                       ↓
┌─────────────────────────────────────────────────────┐
│              MarkerOrchestrator                      │
│   - Koordinuje workflow                             │
│   - Sleduje štatistiky                              │
│   - Agreguje výsledky                               │
└──────────────────────┬──────────────────────────────┘
                       ↓
┌───────────────┬──────────────────┬──────────────────┐
│FileAnalyzer   │TestIdGenerator   │  BackupManager   │
│               │                  │                  │
│ Skenuje       │ Regex detekcia   │ Zálohy           │
│ projekt       │ LLM generovanie  │ Rollback         │
│ Filtruje      │ Aplikuje ID      │ Manifest         │
└───────────────┴──────────────────┴──────────────────┘
                       ↓
┌─────────────────────────────────────────────────────┐
│                 Ollama + Qwen3-Coder                 │
│   - Lokálne LLM inference                           │
│   - Sémantické generovanie ID                       │
│   - Temperature: 0.1 (konzistentné výsledky)        │
└─────────────────────────────────────────────────────┘

Quick Start

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

# 2. Nakonfigurujte .env
cat > .env << EOF
PROJECT_PATH=/path/to/frontend
OLLAMA_MODEL=qwen3-coder:30b
OLLAMA_HOST=http://localhost:11434
TARGET_ELEMENTS=button,input,select,a,form,textarea,table
SKIP_DIRECTORIES=node_modules,.git,dist,.angular,.nuxt
EOF

# 3. Preview zmien
python main.py add --project /path/to/frontend --dry-run

# 4. Aplikujte zmeny
python main.py add --project /path/to/frontend

# 5. (Ak potrebujete) Rollback
python main.py rollback --project /path/to/frontend

Marker + Sentinel = Kompletný QA Stack

Marker a Sentinel tvoria dokonalú kombináciu:

┌─────────────────────────────────────────────────────┐
│                    Marker                            │
│   Pridá data-testid do všetkých komponentov         │
└──────────────────────┬──────────────────────────────┘
                       ↓
┌─────────────────────────────────────────────────────┐
│                   Sentinel                           │
│   Vygeneruje testovacie scenáre (JSON)              │
│   Používa data-testid ako selektory                 │
└──────────────────────┬──────────────────────────────┘
                       ↓
┌─────────────────────────────────────────────────────┐
│              Playwright / Cypress                    │
│   Spustí automatizované testy                       │
└─────────────────────────────────────────────────────┘

Workflow:

  1. marker add → Všetky elementy majú stabilné selektory
  2. sentinel analyze → JSON scenáre s data-testid selektormi
  3. Test runner → Automatizované E2E testy

Záver

Marker transformuje nudnú prácu na jednorazový príkaz:

Manuálny prístupS Marker
8-16 hodín na 100 komponentov5 minút
Nekonzistentné namingSémantická konvencia
Bez zálohyAutomatický rollback
Chyby pri copy-pasteLLM-powered presnosť

Kedy použiť Marker:

  • ✅ Projekt potrebuje test infrastructure
  • ✅ Prechod na E2E testing (Cypress, Playwright)
  • ✅ Migrácia legacy projektu
  • ✅ Štandardizácia komponentovej knižnice

Test ID nie sú voliteľné - sú základ kvalitného testovania. A Marker ich pridá za vás.

Marker je súčasť QA automation toolchain spolu so Sentinel. Oba nástroje používajú lokálne LLM modely pre bezpečné spracovanie firemného kódu.

Všetky články