webapp-testing by composiohq/awesome-claude-skills
npx skills add https://github.com/composiohq/awesome-claude-skills --skill webapp-testing要测试本地 Web 应用,请编写原生的 Python Playwright 脚本。
可用的辅助脚本:
scripts/with_server.py - 管理服务器生命周期(支持多个服务器)务必先使用 --help 参数运行脚本 以查看用法。在尝试运行脚本并发现绝对需要定制化解决方案之前,请勿阅读源代码。这些脚本可能非常庞大,从而污染您的上下文窗口。它们的存在是为了作为黑盒脚本直接调用,而不是被摄入您的上下文窗口。
User task → Is it static HTML?
├─ Yes → Read HTML file directly to identify selectors
│ ├─ Success → Write Playwright script using selectors
│ └─ Fails/Incomplete → Treat as dynamic (below)
│
└─ No (dynamic webapp) → Is the server already running?
├─ No → Run: python scripts/with_server.py --help
│ Then use the helper + write simplified Playwright script
│
└─ Yes → Reconnaissance-then-action:
1. Navigate and wait for networkidle
2. Take screenshot or inspect DOM
3. Identify selectors from rendered state
4. Execute actions with discovered selectors
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
要启动服务器,请先运行 --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) # Always launch chromium in headless mode
page = browser.new_page()
page.goto('http://localhost:5173') # Server already running and ready
page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute
# ... your automation logic
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 - 在自动化过程中捕获控制台日志每周安装量
729
仓库
GitHub 星标
43.1K
首次出现
Jan 20, 2026
安全审计
安装于
opencode631
gemini-cli587
codex564
cursor550
claude-code540
github-copilot505
To test local web applications, write native Python Playwright scripts.
Helper Scripts Available :
scripts/with_server.py - Manages server lifecycle (supports multiple servers)Always run scripts with--help first to see usage. DO NOT read the source until you try running the script first and find that a customized solution is abslutely necessary. These scripts can be very large and thus pollute your context window. They exist to be called directly as black-box scripts rather than ingested into your context window.
User task → Is it static HTML?
├─ Yes → Read HTML file directly to identify selectors
│ ├─ Success → Write Playwright script using selectors
│ └─ Fails/Incomplete → Treat as dynamic (below)
│
└─ No (dynamic webapp) → Is the server already running?
├─ No → Run: python scripts/with_server.py --help
│ Then use the helper + write simplified Playwright script
│
└─ Yes → Reconnaissance-then-action:
1. Navigate and wait for networkidle
2. Take screenshot or inspect DOM
3. Identify selectors from rendered state
4. Execute actions with discovered selectors
To start a server, run --help first, then use the helper:
Single server:
python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py
Multiple servers (e.g., backend + frontend):
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
To create an automation script, include only Playwright logic (servers are managed automatically):
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode
page = browser.new_page()
page.goto('http://localhost:5173') # Server already running and ready
page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute
# ... your automation logic
browser.close()
Inspect rendered DOM :
page.screenshot(path='/tmp/inspect.png', full_page=True)
content = page.content()
page.locator('button').all()
Identify selectors from inspection results
Execute actions using discovered selectors
❌ Don't inspect the DOM before waiting for networkidle on dynamic apps ✅ Do wait for page.wait_for_load_state('networkidle') before inspection
scripts/ can help. These scripts handle common, complex workflows reliably without cluttering the context window. Use --help to see usage, then invoke directly.sync_playwright() for synchronous scriptstext=, role=, CSS selectors, or IDspage.wait_for_selector() or page.wait_for_timeout()element_discovery.py - Discovering buttons, links, and inputs on a pagestatic_html_automation.py - Using file:// URLs for local HTMLconsole_logging.py - Capturing console logs during automationWeekly Installs
729
Repository
GitHub Stars
43.1K
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykPass
Installed on
opencode631
gemini-cli587
codex564
cursor550
claude-code540
github-copilot505
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
arXiv论文阅读助手 - 自动下载解析LaTeX源码,生成技术摘要与nanochat应用建议
849 周安装
AI项目经理助手:精通敏捷与瀑布方法,提供项目管理全流程解决方案
851 周安装
Python最佳实践指南:类型优先开发与模块化设计,提升代码质量与可维护性
851 周安装
Nuxt Better Auth:Nuxt 4+ 身份验证模块,集成组合式函数与路由保护
851 周安装
Railway项目管理技能:列出、切换、重命名、配置项目和工作区
851 周安装
App Store Connect 自动化创建应用指南:asc-app-create-ui 技能详解
854 周安装