Menü
使用 Playwright 与本地 Web 应用交互和测试的工具集。支持验证前端功能、调试 UI 行为、捕获浏览器截图和查看浏览器日志。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | webapp-testing |
| description | 使用 Playwright 与本地 Web 应用交互和测试的工具集。支持验证前端功能、调试 UI 行为、捕获浏览器截图和查看浏览器日志。 |
| license | Complete terms in LICENSE.txt |
要测试本地 Web 应用，请编写原生的 Python Playwright 脚本。
可用的辅助脚本：
scripts/with_server.py - 管理服务器生命周期（支持多个服务器）始终先使用 --help 运行脚本以查看用法。在你首先尝试运行脚本并发现绝对需要自定义解决方案之前，请勿阅读源代码。这些脚本可能非常大，因此会污染你的上下文窗口。它们的存在是为了直接作为黑盒脚本调用，而不是被纳入你的上下文窗口。
用户任务 → 是静态 HTML 吗？
├─ 是 → 直接读取 HTML 文件以识别选择器
│ ├─ 成功 → 使用选择器编写 Playwright 脚本
│ └─ 失败/不完整 → 视为动态（见下文）
│
└─ 否（动态 Web 应用）→ 服务器已经在运行吗？
├─ 否 → 运行：python scripts/with_server.py --help
│ 然后使用辅助脚本 + 编写简化的 Playwright 脚本
│
└─ 是 → 侦察-然后-行动：
1. 导航并等待 networkidle
2. 截图或检查 DOM
3. 从渲染状态识别选择器
4. 使用发现的选择器执行操作
要启动服务器，首先运行 --help，然后使用辅助脚本：
单个服务器：
python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py
多个服务器（例如，后端 + 前端）：
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
要创建自动化脚本，只需包含 Playwright 逻辑（服务器会自动管理）：
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=True) # 始终以无头模式启动 chromium
page = browser.new_page()
page.goto('http://localhost:5173') # 服务器已经运行并就绪
page.wait_for_load_state('networkidle') # 关键：等待 JS 执行
# ... 你的自动化逻辑
browser.close()
检查渲染的 DOM：
page.screenshot(path='/tmp/inspect.png', full_page=True)
content = page.content()
page.locator('button').all()
识别选择器从检查结果中
执行操作使用发现的选择器
❌ 不要在动态应用上等待 networkidle 之前检查 DOM
✅ 务必在检查之前等待 page.wait_for_load_state('networkidle')
scripts/ 中可用的脚本之一是否有帮助。这些脚本可靠地处理常见的复杂工作流程，而不会使上下文窗口混乱。使用 --help 查看用法，然后直接调用。sync_playwright() 进行同步脚本text=、role=、CSS 选择器或 IDpage.wait_for_selector() 或 page.wait_for_timeout()element_discovery.py - 发现页面上的按钮、链接和输入static_html_automation.py - 对本地 HTML 使用 file:// URLconsole_logging.py - 在自动化过程中捕获控制台日志创建高质量 MCP (Model Context Protocol) 服务器的指南，使 LLM 能够通过精心设计的工具与外部服务交互。用于构建 MCP 服务器以集成外部 API 或服务，支持 Python (FastMCP) 或 Node/TypeScript (MCP SDK)。
使用 p5.js 创建算法艺术，具有种子随机性和交互式参数探索。当用户请求使用代码创建艺术、生成艺术、算法艺术、流场或粒子系统时使用此技能。创作原创算法艺术而非复制现有艺术家的作品以避免版权侵权。
将 Anthropic 官方品牌颜色和字体应用于任何可能受益于 Anthropic 外观和感觉的产物。当需要应用品牌颜色、样式指南、视觉格式或公司设计标准时使用。
使用设计哲学在 .png 和 .pdf 文档中创建精美的视觉艺术。当用户要求创建海报、艺术作品、设计或其他静态作品时应使用此技能。创作原创视觉设计，绝不复制现有艺术家的作品以避免侵犯版权。
引导用户通过结构化工作流程共同创作文档。当用户想要编写文档、提案、技术规范、决策文档或类似结构化内容时使用。此工作流程帮助用户高效传递上下文、通过迭代完善内容，并验证文档对读者是否有效。当用户提到编写文档、创建提案、起草规范或类似文档任务时触发。
当用户想要创建、读取、编辑或操作 Word 文档（.docx 文件）时使用此技能。触发条件包括：任何提及「Word 文档」、「word document」、「.docx」，或请求生成带有格式化内容（如目录、标题、页码或信头）的专业文档。当从 .docx 文件中提取或重组内容、在文档中插入或替换图片、在 Word 文件中执行查找替换、处理修订或批注，或将内容转换为精美的 Word 文档时也应使用。如果用户要求生成「报告」、「备忘录」、「信函」、「模板」或类似的 Word 或 .docx 文件交付物，请使用此技能。不要用于 PDF、电子表格、Google Docs 或与文档生成无关的通用编码任务。