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

30. 12. 20258 min

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ý:

Naskenuje

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

Identifikuje

elementy bez data-testid

Vygeneruje

sémantické test ID pomocou lokálneho LLM

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:

Element	Kontext	Vygenerované ID
`<button>Submit</button>`	hero.component.html	`button-hero-submit`
`<input type="email">`	login.component.html	`input-login-email`
`<a href="/">Home</a>`	navbar.tsx	`a-navbar-home`
`<form>`	contact.vue	`form-contact-main`

Odkiaľ LLM berie kontext:

id atribút
name atribút
formControlName (Angular)
Event handlery (@click, (click), onClick)
type atribút
CSS triedy
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:

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

Záver

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

Manuálny prístup	S Marker
8-16 hodín na 100 komponentov	5 minút
Nekonzistentné naming	Sémantická konvencia
Bez zálohy	Automatický rollback
Chyby pri copy-paste	LLM-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

Späť na blogTesting

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

30. 12. 20258 min

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

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ý:

Naskenuje

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

Identifikuje

elementy bez data-testid

Vygeneruje

sémantické test ID pomocou lokálneho LLM

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:

Element	Kontext	Vygenerované ID
`<button>Submit</button>`	hero.component.html	`button-hero-submit`
`<input type="email">`	login.component.html	`input-login-email`
`<a href="/">Home</a>`	navbar.tsx	`a-navbar-home`
`<form>`	contact.vue	`form-contact-main`

Odkiaľ LLM berie kontext:

id atribút
name atribút
formControlName (Angular)
Event handlery (@click, (click), onClick)
type atribút
CSS triedy
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:

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

Záver

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

Manuálny prístup	S Marker
8-16 hodín na 100 komponentov	5 minút
Nekonzistentné naming	Sémantická konvencia
Bez zálohy	Automatický rollback
Chyby pri copy-paste	LLM-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

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

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

Realita v praxi

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

Naskenuje

Identifikuje

Vygeneruje

Aplikuje

Ako to funguje?

Ktoré elementy Marker spracuje?

Naming Convention

Praktický príklad

Pred spustením Marker

Spustenie Marker

Po spustení Marker

Kľúčové výhody

1. Multi-Framework Support

2. Lokálne LLM = Bezpečnosť

3. Bezpečnosť so Zálohou

4. Dry-Run Mode

5. Detekcia Duplicít

Integrácie

1. CLI (Najjednoduchšie)

2. Python Library

3. gRPC Server

4. MCP Server (Claude integrácia)

Use Cases

1. Legacy Projekt Migrácia

2. Príprava na E2E Testy

3. Komponentová Knižnica

4. CI/CD Integrácia

Architektúra

Quick Start

Marker + Sentinel = Kompletný QA Stack

Záver

Moje skúsenosti z vývoja

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

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

Realita v praxi

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

Naskenuje

Identifikuje

Vygeneruje

Aplikuje

Ako to funguje?

Ktoré elementy Marker spracuje?

Naming Convention

Praktický príklad

Pred spustením Marker

Spustenie Marker

Po spustení Marker

Kľúčové výhody

1. Multi-Framework Support

2. Lokálne LLM = Bezpečnosť

3. Bezpečnosť so Zálohou

4. Dry-Run Mode

5. Detekcia Duplicít

Integrácie

1. CLI (Najjednoduchšie)

2. Python Library

3. gRPC Server

4. MCP Server (Claude integrácia)

Use Cases

1. Legacy Projekt Migrácia

2. Príprava na E2E Testy

3. Komponentová Knižnica

4. CI/CD Integrácia

Architektúra

Quick Start

Marker + Sentinel = Kompletný QA Stack

Záver