Execute end-to-end testing of React micro frontends using Playwright MCP to validate functionality, responsiveness, and user workflows
Executes end-to-end tests using Playwright to validate React microfrontend functionality, responsiveness, and user workflows. Triggers after implementing UI features, fixing bugs, or before deployments to catch regressions and verify CRUD operations across mobile, tablet, and desktop breakpoints.
/plugin marketplace add usmanali4073/stylemate-plugins/plugin install stylemate-architecture@stylemate-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Use this skill to perform automated end-to-end testing of React microfrontends using Playwright MCP tools.
Executes comprehensive tests using Playwright MCP:
Tests multiple viewport sizes:
Identifies issues:
mcp__playwright__browser_navigate - Navigate to URLmcp__playwright__browser_snapshot - Get page accessibility treemcp__playwright__browser_click - Click elementsmcp__playwright__browser_type - Type into inputsmcp__playwright__browser_fill_form - Fill multiple form fieldsmcp__playwright__browser_resize - Change viewport sizemcp__playwright__browser_take_screenshot - Capture visual statemcp__playwright__browser_console_messages - Get console logsmcp__playwright__browser_evaluate - Run JavaScriptmcp__playwright__browser_wait_for - Wait for conditionsmcp__playwright__browser_close - Close browsermcp__playwright__browser_navigate("http://localhost:3003")
mcp__playwright__browser_snapshot()
Click buttons, fill forms, navigate pages
Check data appears, no errors in console
mcp__playwright__browser_resize(375, 667) # Mobile
mcp__playwright__browser_resize(1200, 800) # Desktop
mcp__playwright__browser_console_messages()
mcp__playwright__browser_close()
# Navigate
browser_navigate("http://localhost:3003/schedules")
# Create
browser_click("Create Schedule button")
browser_fill_form({
"employee": "John Doe",
"date": "2025-01-20",
"startTime": "09:00",
"endTime": "17:00"
})
browser_click("Save button")
# Verify Created
browser_wait_for("Schedule created successfully")
browser_snapshot() # Check schedule appears in list
# Update
browser_click("Edit button for first schedule")
browser_type("endTime input", "18:00")
browser_click("Save button")
browser_wait_for("Schedule updated")
# Delete
browser_click("Delete button")
browser_click("Confirm button")
browser_wait_for("Schedule deleted")
# Verify Deleted
browser_snapshot() # Check schedule removed
# Check Console
browser_console_messages() # Should have no errors
# Close
browser_close()
Master authentication and authorization patterns including JWT, OAuth2, session management, and RBAC to build secure, scalable access control systems. Use when implementing auth systems, securing APIs, or debugging security issues.