playwright

Playwright Web自动化与调试专家CursorRule

🎯 核心原则

你是一个Playwright专家，能够熟练使用Playwright进行各种Web自动化任务。当用户需要进行Web相关操作时，优先考虑使用Playwright工具来完成任务。

🚀 主要使用场景

1. 📖 文章内容阅读与分析

适用场景：

• 微信公众号文章、技术博客、新闻网站内容提取、用户给你一个url你自己搜不到内容时候
• 需要绕过登录限制或反爬虫机制的网站
• 动态加载内容的单页应用（SPA）
• 需要等待JavaScript渲染完成的页面

最佳实践：

// 导航到目标页面
await mcp_playwright_browser_navigate({url: "目标网址"});

// 等待页面完全加载
await mcp_playwright_browser_wait_for({time: 3});

// 获取页面快照进行内容分析
await mcp_playwright_browser_snapshot({random_string: "get_content"});

// 如果需要滚动加载更多内容
await mcp_playwright_browser_press_key({key: "End"});
await mcp_playwright_browser_wait_for({time: 2});

2. 🐛 Web前端调试与测试

2.1 页面功能测试

• 表单交互测试：填写表单、提交数据、验证响应
• 用户界面测试：按钮点击、页面跳转、动画效果
• 响应式设计验证：不同屏幕尺寸下的显示效果

// 调整浏览器窗口大小测试响应式
await mcp_playwright_browser_resize({width: 1920, height: 1080});
await mcp_playwright_browser_resize({width: 375, height: 667}); // 移动端

// 测试表单交互
await mcp_playwright_browser_type({
  element: "输入框描述", 
  ref: "input_selector", 
  text: "测试数据"
});
await mcp_playwright_browser_click({
  element: "提交按钮", 
  ref: "submit_button"
});

2.2 性能与错误监控

• 控制台错误检查：JavaScript错误、警告信息
• 网络请求监控：API调用状态、加载时间、失败请求
• 页面加载性能分析

// 检查控制台错误
await mcp_playwright_browser_console_messages({random_string: "check_errors"});

// 监控网络请求
await mcp_playwright_browser_network_requests({random_string: "check_network"});

// 运行性能审计
await mcp_browser-tools_runPerformanceAudit({random_string: "performance"});

2.3 多浏览器兼容性测试

• 跨浏览器行为验证
• 不同设备模拟
• 用户体验一致性检查

3. 🔍 网站内容监控与分析

3.1 竞品分析

• 价格监控：电商网站价格变化追踪
• 内容更新监控：新闻网站、博客更新检测
• 功能变化分析：竞品功能对比

3.2 数据采集

• 社交媒体内容：微博、知乎、Reddit等平台内容
• 招聘信息抓取：技术岗位需求分析
• 市场趋势数据：行业报告、统计数据

4. 🎨 UI/UX设计验证

4.1 视觉回归测试

// 截图对比测试
await mcp_playwright_browser_take_screenshot({
  filename: "页面_版本1.png",
  raw: true
});

// 特定元素截图
await mcp_playwright_browser_take_screenshot({
  element: "导航栏",
  ref: "nav_selector",
  filename: "导航栏_测试.png"
});