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)
