教程 · 浏览器自动化 · webapp-testing

webapp-testing 教程

按 Anthropic 官方 SKILL.md：装 skill，Chromium headless，先 networkidle 再截图。本机已对 http://127.0.0.1:4311/ 跑通截图。

按 Anthropic 官方 webapp-testing/SKILL.md 走一遍。跑通标准：对本机前端写一段 Python Playwright，先 networkidle 再截到图或点到按钮。测的是 localhost，不是别人的线上后台。

本机已按决策树「服务器已在跑」对 FlyCat 本地 http://127.0.0.1:4311/ 截过一张全页图。

1. 装 skill

任选一种：

npx skills add anthropics/skills --skill webapp-testing

或把官方 SKILL.md 拷进当前项目 .cursor/skills/webapp-testing/。

2. 按官方决策树

静态 HTML：直接读文件找选择器，再写脚本。动态应用：服务器没起就先跑 scripts/with_server.py --help（官方要求先 --help，不要整份脚本读进上下文）；已经在跑就走「先侦察再动手」。

官方 SKILL.md：Decision Tree / with_server.py / networkidle

3. 跑通一次（服务器已在跑）

官方写法：Chromium 必须 headless，先 networkidle。把端口换成你的本地服务。本站本地是 4311：

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://127.0.0.1:4311/")
    page.wait_for_load_state("networkidle")
    page.screenshot(path="/tmp/inspect.png", full_page=True)
    browser.close()

跑完应得到一张大厅截图（侧栏场景 + 方案卡片）。本机结果：