Mia QA-Inĝeniero estas LLM
Claude povas alklaki butonojn.
Tio sonas banala, sed ĝi ŝanĝas kiel mi konstruas UI-ojn. Per Playwright MCP, Claude ne nur skribas kodon—ĝi malfermas foliumilon, navigas al localhost kaj konfirmas ke aferoj efektive funkcias. Ĝi kaptas erarojn kiujn mi maltrafus en kodo-revizio.
La Agordo
Playwright MCP donas al Claude foliumil-aŭtomatigon. Mi rulas ĝin kun senkapa Chromium:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@anthropic-ai/mcp-server-playwright", "--headless"]
}
}
}
Nun Claude povas navigi, alklaki, tajpi kaj ekrankopiojn fari. Ĝi vidas tion kion uzantoj vidas.
flowchart LR
Claude([Claude Code]) -->|browser_snapshot| PW[Playwright MCP]
PW --> Browser[Headless Chrome]
Browser --> App[localhost:1313]
Browser -.->|screenshot| Issue[(GitHub Issue)]
Issue -.->|visual history| PR[Pull Request]
flowchart TB
Claude([Claude Code]) -->|browser_snapshot| PW[Playwright MCP]
PW --> Browser[Headless Chrome]
Browser --> App[localhost:1313]
Browser -.->|screenshot| Issue[(GitHub Issue)]
Issue -.->|visual history| PR[Pull Request]
Fluo: Claude Code → Playwright MCP → Foliumilo → Ekrankopioj → GitHub Issues → PR
La Vidpunkta Matrico
Ĉiu UI-ŝanĝo estas testata ĉe tri romppunktoj:
| Vidpunkto | Grando | Kial |
|---|---|---|
| Desktop | 1440×900 | Norma tekokomputilo |
| Tablet | 1024×768 | iPad portreto |
| Mobile | 390×844 | iPhone 14 |
Claude regrandecas la foliumilon, faras ekrankopion, alŝutas ĝin al la GitHub-problemo. Tri ekrankopioj por stato-ŝanĝo. Se la movila navigado estas rompita, mi vidas ĝin tuj—ne post disponigo.
Tema Testado
Sama ŝablono por hela kaj malhela reĝimo:
// Claude ŝanĝas la temon
await page.click('[data-testid="theme-toggle"]');
// Ekrankopioj de ambaŭ statoj
La CSS-variabla kohereco gravas. Komponento kiu aspektas bona en hela reĝimo povus havi nevideblan tekston en malhela reĝimo. Claude kaptas tion per efektive rigardi ambaŭ.
Interaga Testado
Ĉi tie fariĝas interese. Claude ne nur ekrankopiojn—ĝi uzas la UI-on:
- Alklakas ĉiun navigadan ligilon, konfirmas celon
- Malfermas la movilan tirkeston, kontrolas ke ĝi animas
- Plenigas formularojn, sendas ilin
- Ŝvebas super interagaj elementoj
- Fermas modalojn per alklaki la fonon
Kiam ĝi trovas eraron—ekzemple, la tirkesto ne fermiĝas kiam vi frapetas ekstere—ĝi raportas ĝin, riparias la kodon kaj re-testas. La retrokomenta ciklo estas strikta.
La GitHub-Problemo kiel Test-Raporto
Ĉiu ekrankopio estas alŝutata al la GitHub-problemo. La problemo-korpo estas rekonstruita ĉe ĉiu mejloŝtono:
## Nuna Stato
### Desktop (1440×900)
### Tablet (1024×768)
### Mobile (390×844)
## Testa Kontrololisto
- [x] Navigadaj ligiloj funkcias
- [x] Movila tirkesto malfermas/fermas
- [x] Tema ŝanĝo persistos
- [ ] Formulara validigo montras erarojn
La problemo fariĝas viva test-raporto. Iu ajn revizianta la PR povas vidi precize kio estis testata.
La Kompleta Ciklo
Tipa funkcio trapasas ĉi tiun ciklon:
- Problemo kreita: “Aldoni flankan navigadon”
- Claude realigas: Skribas la komponenton
- Vida konfirmo: Ekrankopioj de ĉiuj vidpunktoj
- Interaga testado: Alklakas tra la UI
- Eraro trovita: Tirkesto ne fermiĝas ĉe fona alklako
- Riparo aplikita: Ĝisdatigas la alklak-traktanton
- Re-testo: Freŝaj ekrankopioj, ĉio pasanta
- PR kreita: Ligilas al problemo kun kompleta vida historio
Neniu mana QA-paŝo. Neniu “ŝajnas bona” sen efektive rigardi. Claude konfirmas sian propran laboron.
Kion Ĉi Tio Kaptas
Realaj eraroj kiujn mi vidis Claude trovi:
- Movila navigado kaŝita malantaŭ enhavo (z-index problemo)
- Butona teksto nevidebla en malhela reĝimo (malĝusta CSS-variablo)
- Formularo sendata dufoje per Enter-klavo
- Falmenuo tondita de overflow:hidden gepatro
- Ŝveba stato fiksiĝinta sur tuŝ-aparatoj
Ĉi tiuj estas la eraroj kiuj trapasas kodo-reviziojn ĉar ili nur aperas en la foliumilo. Claude vidas ilin ĉar ĝi efektive rulas la kodon.
Ĉiu PR nun venas kun pruvo ke ĝi funkcias.