让 AI 自动生成 Playwright 浏览器自动化测试脚本

本技能介绍如何使用 Python Playwright 脚本验证本地 Web 应用的前端功能。适用于静态 HTML 文件审查及动态 Web 应用的网络空闲检测、DOM 检查、截图和日志捕获等场景，支持自动管理本地服务器生命周期。

为什么需要这个技能

在开发本地 Web 应用时，手动手动操作浏览器效率低下。AI 可以通过编写 Playwright 脚本来模拟用户行为，快速验证页面交互、查找异常元素并截取运行时的屏幕快照，显著缩短调试和回归测试周期。

适用场景

• 验证本地静态 HTML 文件的表单提交和链接跳转逻辑。
• 监控动态 Web 应用（如 React/Vue 项目）的 JS 执行状态和网络空闲情况。
• 自动化截图浏览器界面以记录 Bug 或生成测试报告。
• 捕获浏览器控制台日志以定位 JS 错误或警告。

核心工作流

1. 判断页面类型： 如果任务是静态 HTML，直接读取文件定位选择器；如果是动态应用，则进入服务器管理流程。

2. 管理服务器生命周期： 若本地服务器未运行，先启动服务。使用辅助脚本统一处理多服务器（如后端 + 前端）的启动与端口分配。

   # 单服务器模式
   python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py
   
   # 多服务器模式（后端 3000 + 前端 5173）
   python scripts/with_server.py \
     --server "cd backend && python server.py" --port 3000 \
     --server "cd frontend && npm run dev" --port 5173 \
     -- python your_automation.py

3. 侦察与行动（Reconnaissance-then-action）： 对于动态应用，必须先等待 networkidle 状态，再执行截图和 DOM 检查。盲目抓取静态 DOM 会导致脚本失效。

   from playwright.sync_api import sync_playwright
   
   with sync_playwright() as p:
       browser = p.chromium.launch(headless=True)
       page = browser.new_page()
       page.goto('http://localhost:5173')
       page.wait_for_load_state('networkidle')
       # 页面加载完成后执行自动化逻辑
       # ... your automation logic
       browser.close()

4. 利用辅助脚本： 直接使用 scripts/ 目录下的工具脚本作为黑盒调用，避免将庞大的辅助逻辑塞入 AI 上下文窗口，保持思维链清晰。

避坑指南

❌ 不要在动态应用加载前检查 DOM，必须等待 networkidle。 ✅ 要始终使用 headless=True 模式启动 Chromium 进行自动化测试。 ✅ 要优先使用描述性的选择器（如 role= 或 text=）而非不稳定的索引。

下载和安装

下载 webapp-testing 中文版 Skill ZIP

你可能还需要

暂无推荐