Skip to main content Inicio Creadores amo-tech-ai event-studio testing-web-apps-with-playwright
testing-web-apps-with-playwright Test EventOS web application end-to-end using Playwright browser automation via MCP. Use PROACTIVELY for smoke tests after deployments, validating user flows (booking, event creation, dashboard), debugging production issues, and verifying RLS policies. Supports accessibility-based interactions, network monitoring, and multi-browser testing.
Ir a la instalación Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/amo-tech-ai/event-studio --skill testing-web-apps-with-playwrightEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... building-frontend-dashboards Build responsive React dashboards with TypeScript, shadcn/ui, TanStack Query, and Supabase for event-studio. Use when user mentions dashboard, metrics, KPI cards, data tables, charts, analytics, admin panel, Recharts, event management UI, booking interface, financial overview, or asks to create pages with data visualization.
Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
Explorador de archivos
12 archivos name Testing web apps with Playwright description Test EventOS web application end-to-end using Playwright browser automation via MCP. Use PROACTIVELY for smoke tests after deployments, validating user flows (booking, event creation, dashboard), debugging production issues, and verifying RLS policies. Supports accessibility-based interactions, network monitoring, and multi-browser testing.
Playwright E2E Testing Skill
What This Skill Does
Automates browser testing for EventOS using Playwright MCP (Model Context Protocol). Tests critical user journeys, validates Supabase RLS policies, captures screenshots of errors, and monitors network requests—all without pixel-based selectors.
Key Capabilities :
✅ Navigate and interact with pages using accessibility tree
✅ Fill forms, click buttons, validate flows
✅ Monitor network requests (Supabase queries, API calls)
✅ Capture console errors and screenshots
✅ Test responsive layouts and multi-browser compatibility
When to Use This Skill
Use PROACTIVELY when :
🚀 After Vercel deployments → Run smoke tests to verify critical paths
🔒 Testing auth flows → Validate RLS policies allow/block correctly
🐛 Debugging production issues → Capture network logs, console errors, screenshots
📊 Dashboard changes → Verify data loads, stats display correctly
🎫 Booking flow updates → Test end-to-end ticket purchase journey
🧪 Before merging PRs → Validate new features don't break existing flows
Don't use for :
❌ Unit tests (use Vitest/Jest instead)
❌ Component testing in isolation (use React Testing Library)
❌ Static analysis (use ESLint/TypeScript)
How to Invoke
command : "playwright-e2e-skill"
command : "playwright-e2e-skill/playbooks/SMOKE.txt"
Quick Start Examples
Example 1: Smoke Test Dashboard Scenario : Verify dashboard loads without authentication errors
await browser_navigate ({ url : "https://event-studio-rho.vercel.app/dashboard" })
await browser_snapshot ()
const requests = await browser_network_requests ()
await wait_for ({ text : "Total Events" })
await browser_take_screenshot ({ filename : "dashboard-loaded.png" })
Expected Result : Dashboard loads, stats show counts, no RLS errors
Example 2: Event Creation Flow Scenario : Create new event from wizard form
await browser_navigate ({ url : "/events/new" })
await browser_fill_form ({
fields : [
{ name : "Event Name" , ref : "input-name" , value : "Tech Conference 2025" },
{ name : "Date" , ref : "input-date" , value : "2025-12-01" },
{ name : "Venue" , ref : "select-venue" , value : "Convention Center" }
]
})
await browser_click ({ element : "Create Event button" , ref : "btn-submit" })
await wait_for ({ text : "Event created successfully" })
const logs = await browser_console_messages ({ onlyErrors : true })
Expected Result : Event created, success message shown, no console errors
Example 3: Booking Flow Validation Scenario : Complete ticket booking as anonymous user
await browser_navigate ({ url : "/events/123/book" })
const startRequests = await browser_network_requests ()
await browser_fill_form ({
fields : [
{ name : "Tickets" , ref : "input-quantity" , value : "2" },
{ name : "Email" , ref : "input-email" , value : "test@example.com" }
]
})
await browser_click ({ element : "Checkout button" , ref : "btn-checkout" })
await wait_for ({ text : "Booking confirmed" })
const allRequests = await browser_network_requests ()
const authErrors = allRequests.filter (r =>status === 401 || r.status === 403 )
Expected Result : Booking completes, no 401/403 errors, confirmation shown
Playbooks (Pre-Built Test Suites)
Available Playbooks
SMOKE.txt → Critical path validation (dashboard, navigation, auth bypass)AUTH.txt → Authentication flow testing (login, signup, protected routes)PITCH_DECK_WIZARD.txt → Multi-step wizard form (drag-drop, file upload)
Running Playbooks
Skill("playwright-e2e-skill/playbooks/SMOKE.txt" )
Skill("playwright-e2e-skill/playbooks/AUTH.txt" )
Skill("playwright-e2e-skill/playbooks/PITCH_DECK_WIZARD.txt" )
Key Playwright MCP Tools Tool Purpose Example browser_navigateLoad URL Navigate to /dashboard browser_snapshotGet page structure Capture accessibility tree browser_clickClick element Click "Create Event" browser_fillFill single input Enter event name browser_fill_formFill multiple inputs Complete entire form wait_forWait for text Wait for "Success" browser_network_requestsGet API calls Check Supabase queries browser_console_messagesGet logs Find React errors browser_take_screenshotCapture visual Screenshot error state
Full feature list : See resources/FEATURES.md
Workflow Pattern ┌─────────────────────────────────────────┐
│ 1. NAVIGATE to page │
│ browser_navigate({ url }) │
└─────────────────────────────────────────┘
↓
┌─────────────────────────────────────────┐
│ 2. SNAPSHOT to understand structure │
│ browser_snapshot() │
└─────────────────────────────────────────┘
↓
┌─────────────────────────────────────────┐
│ 3. INTERACT with elements │
│ browser_fill_form(), browser_click() │
└─────────────────────────────────────────┘
↓
┌─────────────────────────────────────────┐
│ 4. VALIDATE result │
│ wait_for(), browser_snapshot() │
└─────────────────────────────────────────┘
↓
┌─────────────────────────────────────────┐
│ 5. CAPTURE evidence │
│ browser_take_screenshot() │
│ browser_network_requests() │
│ browser_console_messages() │
└─────────────────────────────────────────┘
EventOS-Specific Patterns
Pattern 1: RLS Policy Validation Problem : Dashboard shows blank because RLS blocks anon users
Solution : Monitor network requests for 401/403 errors
await browser_navigate ({ url : "/dashboard" })
const requests = await browser_network_requests ()
const blockedRequests = requests.filter (r =>status === 401 || r.status === 403
)
Pattern 2: Auth Bypass Verification Problem : VITE_DISABLE_AUTH=true not working
Solution : Check if protected routes redirect to /auth
await browser_navigate ({ url : "/dashboard" })
await wait_for ({ time : 2 })
const snapshot = await browser_snapshot ()
Pattern 3: Form Validation Errors Problem : Forms submit but errors not displayed
Solution : Capture console errors and screenshot
await browser_fill_form ({ fields : [...] })
await browser_click ({ element : "Submit" , ref : "btn-submit" })
const errors = await browser_console_messages ({ onlyErrors : true })
await browser_take_screenshot ({ filename : "form-error.png" })
Configuration
Agent Config See resources/agent.config.json for full agent setup.
Browser : Chromium (default), Firefox, WebKitHeadless : true for CI, false for debuggingBase URL : https://event-studio-rho.vercel.appTimeout : 30s default
Environment Variables PLAYWRIGHT_BROWSER=chromium
PLAYWRIGHT_HEADLESS=true
PLAYWRIGHT_BASE_URL=https://event-studio-rho.vercel.app
Testing Strategy
P0: Critical Smoke Tests (Run on every deploy)
✅ Dashboard loads without auth
✅ Event list displays
✅ Navigation works (home → dashboard → events)
P1: Feature Validation (Run before merge)
✅ Event creation wizard
✅ Booking flow
✅ Form validation
P2: Edge Cases (Run weekly)
✅ Multi-browser testing
✅ Responsive layouts
✅ File uploads
Debugging Tips
Issue: Element not found Solution : Take snapshot first to see available elements
Issue: Network requests empty Solution : Navigate THEN check requests (cleared on navigation)
await browser_navigate ({ url : "/dashboard" })
const requests = await browser_network_requests ()
Issue: Timeout waiting for text Solution : Check console for errors that prevented render
await browser_console_messages ()
Issue: Screenshots all black Solution : Use headed mode locally for debugging
PLAYWRIGHT_HEADLESS=false npm test
Resources
Feature Comparison : resources/FEATURES.mdAgent Config : resources/agent.config.jsonExample Inputs : resources/examples/inputs.jsonRunbook : scripts/RUNBOOK.mdOfficial Docs : Playwright MCP GitHub
Common Commands
npm run test :smoke
npm run test :auth
npm run test :wizard
PLAYWRIGHT_HEADLESS=true npm test
PLAYWRIGHT_HEADLESS=false npm test
PLAYWRIGHT_BROWSER=firefox npm test
Integration with CI/CD
GitHub Actions Example - name: Run Playwright Smoke Tests
run: npm run test:smoke
env:
PLAYWRIGHT_HEADLESS: true
PLAYWRIGHT_BASE_URL: ${{ secrets.VERCEL_URL }}
Vercel Deploy Hook
vercel deploy --prod
npm run test :smoke -- --base-url=$VERCEL_URL
Best Practices
✅ Always take snapshot before interacting → Understand page structure
✅ Monitor network on auth-sensitive pages → Catch RLS issues early
✅ Capture screenshots on failures → Visual debugging evidence
✅ Use accessibility refs from snapshot → More reliable than CSS selectors
✅ Test critical paths first → Dashboard, booking, event creation
✅ Run headless in CI, headed locally → Fast automation, easy debugging
✅ Keep playbooks focused → One user journey per playbook
Troubleshooting npx @playwright/mcp install
MCP server not responding?
cat .mcp.json | grep playwright
Tests passing locally but failing in CI?
Verify PLAYWRIGHT_BASE_URL environment variable
Check Vercel deployment completed before tests run
Ensure headless mode enabled in CI
Next Steps
✅ Run smoke tests after next Vercel deploy
✅ Add auth flow tests when implementing login
✅ Expand wizard tests for multi-step forms
✅ Set up GitHub Actions for automated testing
Questions? See scripts/RUNBOOK.md for detailed local setup and CI integration instructions.
