AgentSkillsCN

Playwright E2e Testing

使用Playwright MCP对React微前端执行端到端测试，以验证功能、响应速度与用户工作流程。

SKILL.md
--- frontmatter
description: Execute end-to-end testing of React micro frontends using Playwright MCP to validate functionality, responsiveness, and user workflows

Playwright E2E Testing Skill

Use this skill to perform automated end-to-end testing of React microfrontends using Playwright MCP tools.

When to Use

  • •After implementing UI features
  • •After fixing frontend bugs
  • •Before deploying frontend changes
  • •During QA validation
  • •For regression testing

What This Skill Does

1. Automated UI Testing

Executes comprehensive tests using Playwright MCP:

  • •Navigate to pages
  • •Interact with components
  • •Verify data displays correctly
  • •Test form submissions
  • •Validate navigation flows

2. Responsive Testing

Tests multiple viewport sizes:

  • •Mobile (375px × 667px)
  • •Tablet (768px × 1024px)
  • •Desktop (1200px × 800px)

3. Error Detection

Identifies issues:

  • •Console errors
  • •Network failures
  • •JavaScript exceptions
  • •Module Federation loading errors

Available Playwright MCP Tools

  • •mcp__playwright__browser_navigate - Navigate to URL
  • •mcp__playwright__browser_snapshot - Get page accessibility tree
  • •mcp__playwright__browser_click - Click elements
  • •mcp__playwright__browser_type - Type into inputs
  • •mcp__playwright__browser_fill_form - Fill multiple form fields
  • •mcp__playwright__browser_resize - Change viewport size
  • •mcp__playwright__browser_take_screenshot - Capture visual state
  • •mcp__playwright__browser_console_messages - Get console logs
  • •mcp__playwright__browser_evaluate - Run JavaScript
  • •mcp__playwright__browser_wait_for - Wait for conditions
  • •mcp__playwright__browser_close - Close browser

Expected Inputs

  • •URL to test (e.g., http://localhost:3003)
  • •Features to validate
  • •User workflows to test
  • •Breakpoints to test

Testing Workflow

1. Start Browser

code
mcp__playwright__browser_navigate("http://localhost:3003")

2. Capture Page State

code
mcp__playwright__browser_snapshot()

3. Test Functionality

code
Click buttons, fill forms, navigate pages

4. Verify Results

code
Check data appears, no errors in console

5. Test Responsive

code
mcp__playwright__browser_resize(375, 667)  # Mobile
mcp__playwright__browser_resize(1200, 800) # Desktop

6. Check Console

code
mcp__playwright__browser_console_messages()

7. Close Browser

code
mcp__playwright__browser_close()

Example Test: CRUD Operations

code
# 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()

Validation Checklist

  • • Page loads without errors
  • • All interactive elements work
  • • CRUD operations successful
  • • Data displays correctly
  • • Validation errors show properly
  • • Mobile responsive
  • • Desktop layout correct
  • • No console errors
  • • Navigation works
  • • Module Federation loads

Deliverables

  • •Test execution results
  • •Screenshots at different breakpoints
  • •Console error log (if any)
  • •List of passed/failed tests
  • •Recommendations for fixes