E2E browser testing with Playwright MCP. Use when asked to test frontend flows, verify UI behavior, navigate pages, fill forms, check visual state, or debug browser issues. Trigger words: "test E2E", "prueba de frontend", "navegar", "registrarse", "loguearse", "verificar en el navegador", "playwright", "browser test".
설치
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
E2E browser testing with Playwright MCP. Use when asked to test frontend flows, verify UI behavior, navigate pages, fill forms, check visual state, or debug browser issues. Trigger words: "test E2E", "prueba de frontend", "navegar", "registrarse", "loguearse", "verificar en el navegador", "playwright", "browser test".
Use ref value (e.g. "e45") in interaction tools. Refs are ephemeral — they change after every page update. Always re-snapshot.
Tool Reference
Navigation
Tool
Params
Description
browser_navigate
url
Go to URL
browser_navigate_back
—
Browser back
Page State
Tool
Params
Description
browser_snapshot
filename?
Accessibility tree (primary reading tool)
browser_take_screenshot
type?, filename?, ref?, fullPage?
PNG/JPEG screenshot
browser_console_messages
—
JS console output
browser_network_requests
—
Network requests since page load
Interaction
Tool
Params
Description
browser_click
ref, element?, doubleClick?, button?, modifiers?
Click
browser_type
ref, text, element?, submit?, slowly?
Type into input
browser_fill_form
fields[]
Fill multiple fields
browser_select_option
ref, values[], element?
Select dropdown
browser_hover
ref, element?
Hover
browser_drag
source ref, target ref
Drag and drop
browser_press_key
key
Keyboard key
browser_file_upload
paths[]
Upload files
Waiting
Tool
Params
Description
browser_wait_for
text?, textGone?, time?
Wait for condition
Browser Control
Tool
Params
Description
browser_tabs
action, index?
Tab management
browser_close
—
Close page
browser_resize
width, height
Resize viewport
browser_evaluate
function, ref?
Run JS in page
browser_handle_dialog
accept, promptText?
Handle alert/confirm/prompt
Assertions
Tool
Params
Description
browser_verify_text_visible
text
Assert text visible
browser_verify_element_visible
role, name
Assert element visible by role
browser_verify_value
ref, value
Assert input value
browser_generate_locator
ref
Generate Playwright locator
Standard Test Patterns
Auth Flow
1. browser_navigate("/en/auth/register") → snapshot
2. Fill name, email, password → click register
3. Wait for redirect/success → snapshot
4. browser_navigate("/en/auth/login") → snapshot
5. Fill email, password → click login
6. Wait for redirect → snapshot → verify authenticated content
Form Submission
1. Navigate → snapshot → get refs
2. Fill fields with browser_type or browser_fill_form
3. Click submit → browser_wait_for(text: "Success")
4. Snapshot → verify final state
E-commerce Flow
1. Navigate /shop → snapshot → click product
2. Select variant → "Add to Cart"
3. Navigate /cart → verify items
4. Proceed to checkout → fill shipping/payment → complete
CSRF Verification
1. Navigate any page → browser_evaluate("() => document.cookie")
2. Verify csrf-token cookie exists
3. POST request → verify no 403
Gotchas
ALWAYS snapshot after navigate — refs required for interaction
ALWAYS snapshot after actions — page may have changed, refs stale
Turnstile: Test keys (1x00000000000000000000AA) auto-pass. Production keys require challenge handling
Timeouts: Action 5s, navigation 60s. Use browser_wait_for for slow ops
Cookie auth: Supabase sb-* cookies persist across navigations after login
Locale prefix: URLs must include /en/, /es/, or /de/
i18n text: Labels change by locale — use snapshot refs, not hardcoded text
SPA navigation: Next.js client-side nav may not trigger full page load — use browser_wait_for
Dialog handling: Call browser_handle_dialog BEFORE the action that triggers it
Parallel calls: Snapshot + interact can't be parallel (refs depend on snapshot result)
