New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Webapp Testing

by LeastBit in LeastBit/Claude_skills_zh-CN

使用 Playwright 与本地 Web 应用程序交互及进行测试的工具包。支持验证前端功能、调试 UI 行为、捕获浏览器截图以及查看浏览器日志。

Apache-2.0Auto-check passedTesting & QA

Install Webapp Testing

skills CLI
$ npx skills add LeastBit/Claude_skills_zh-CN --skill webapp-testing -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install LeastBit/Claude_skills_zh-CN webapp-testing --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/LeastBit/Claude_skills_zh-CN.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/webapp-testing .claude/skills/webapp-testing && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
webapp-testing
GitHub stars
588
Token cost
~604 tokens
SKILL.md length
72 words
Files
6 (incl. scripts)
Skills in repo
16
Repo updated
First seen
Licence
Apache-2.0

At a glance

使用 Playwright 与本地 Web 应用程序交互及进行测试的工具包。支持验证前端功能、调试 UI 行为、捕获浏览器截图以及查看浏览器日志。

  • Works in 3 steps: 检查渲染后的 DOM → 从检查结果中识别选择器 (selectors) → 使用发现的选择器执行操作
  • Tasks that involve Browser testing
  • SKILL.md covers 决策树：选择您的方法, 示例：使用 with_server.py, 侦察并行动模式 and 常见陷阱, plus 2 more sections
  • Runs Python scripts from its folder; calls python and npm

What it does

Webapp Testing is an agent skill from LeastBit/Claude_skills_zh-CN. 使用 Playwright 与本地 Web 应用程序交互及进行测试的工具包。支持验证前端功能、调试 UI 行为、捕获浏览器截图以及查看浏览器日志。

Its SKILL.md is about 600 tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including scripts (for example `examples/console_logging.py`, `examples/element_discovery.py` and `examples/static_html_automation.py`).

It sits in Testing & QA, covering Browser testing and Frontend development. It works with Playwright. The repository describes itself as: Anthropics/skills中文学习版本 来自：https://github.com/anthropics/skills. The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Browser testing
  • Tasks that involve Frontend development

Example prompts

  • “/webapp-testing”

Requirements

  • Python 3

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. 检查渲染后的 DOM
  2. 从检查结果中识别选择器 (selectors)
  3. 使用发现的选择器执行操作

What it can do on your machine

Read from SKILL.md and the folder at commit 1ab2916. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • python
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Webapp Testing loads about 604 tokens when it runs. Until then it costs about 22 tokens; SKILL.md has 72 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~22
When it runs · the whole SKILL.md, loaded when a task matches
~604

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from LeastBit/Claude_skills_zh-CN at commit 1ab2916, republished under its Apache-2.0 licence (© LeastBit). 72 words, ~604 tokens.

Download SKILL.mdSave it as .claude/skills/webapp-testing/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
webapp-testing
description
使用 Playwright 与本地 Web 应用程序交互及进行测试的工具包。支持验证前端功能、调试 UI 行为、捕获浏览器截图以及查看浏览器日志。
license
完整条款见 LICENSE.txt

Web 应用程序测试

要测试本地 Web 应用程序，请编写原生的 Python Playwright 脚本。

可用的辅助脚本:

  • scripts/with_server.py - 管理服务器生命周期（支持多服务器）

务必先运行带有 --help 参数的脚本以查看用法。除非您在尝试运行脚本后发现绝对需要自定义解决方案，否则不要阅读源码。这些脚本可能非常庞大，从而污染您的上下文窗口。它们旨在作为黑盒脚本直接调用，而不是摄入到您的上下文窗口中。

决策树：选择您的方法

用户任务 → 是静态 HTML 吗？
    ├─ 是 → 直接读取 HTML 文件以识别选择器 (selectors)
    │         ├─ 成功 → 使用选择器编写 Playwright 脚本
    │         └─ 失败/不完整 → 视为动态（见下文）
    │
    └─ 否 (动态 Web 应用) → 服务器是否已在运行？
        ├─ 否 → 运行：python scripts/with_server.py --help
        │        然后使用辅助工具 + 编写简化的 Playwright 脚本
        │
        └─ 是 → 侦察并行动：
            1. 导航并等待 networkidle
            2. 截图或检查 DOM
            3. 从渲染状态中识别选择器 (selectors)
            4. 使用发现的选择器执行操作

示例：使用 with_server.py

要启动服务器，请先运行 --help，然后使用该辅助工具：

单个服务器：

bash
python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py

多个服务器（例如，后端 + 前端）：

bash
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 逻辑（服务器由程序自动管理）：

python
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()

侦察并行动模式

  1. 检查渲染后的 DOM：

    python
    page.screenshot(path='/tmp/inspect.png', full_page=True)
content = page.content()
page.locator('button').all()

  2. 从检查结果中识别选择器 (selectors)

  3. 使用发现的选择器执行操作

常见陷阱

❌ 不要在动态应用等待 networkidle 之前检查 DOM ✅ 务必在检查前等待 page.wait_for_load_state('networkidle')

最佳实践

  • 将捆绑脚本视为黑盒 - 要完成一项任务，请考虑 scripts/ 中可用的脚本之一是否有所帮助。这些脚本可以可靠地处理常见的复杂工作流，而不会弄乱上下文窗口。使用 --help 查看用法，然后直接调用。
  • 对同步脚本使用 sync_playwright()
  • 完成后务必关闭浏览器
  • 使用描述性的选择器：text=、role=、CSS 选择器或 ID
  • 添加适当的等待：page.wait_for_selector() 或 page.wait_for_timeout()

参考文件

  • examples/ - 显示常见模式的示例：
    • element_discovery.py - 发现页面上的按钮、链接和输入框
    • static_html_automation.py - 对本地 HTML 使用 file:// URL
    • console_logging.py - 在自动化过程中捕获控制台日志 (console logs)

© LeastBit, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (scripts) in skills/webapp-testing of LeastBit/Claude_skills_zh-CN.

  • SKILL.md
  • LICENSE.txt
  • examples/console_logging.py
  • examples/element_discovery.py
  • examples/static_html_automation.py
  • scripts/with_server.py

Open the folder on GitHubat commit 1ab2916

Compare with similar skills

Webapp Testing next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Webapp Testing compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Webapp Testing this skillLeastBit/Claude_skills_zh-CN588—~604Automated safety check: PassApache-2.0
Shogun Screenshotyohey-w/multi-agent-shogun1.4k—~901Automated safety check: NotesMIT
UI Visual DebuggingNangoHQ/nango13k—~1.3kAutomated safety check: PassCustom licence
Playwright CLIbitsocialnet/5chan135—~1.1kAutomated safety check: NotesGPL-3.0
Verify Debbie Codesdebs-obrien/debbie.codes142—~1.9kAutomated safety check: PassNone
Verifytloncorp/tlon-apps107—~1.4kAutomated safety check: PassMIT

Similar skills

  • Shogun Screenshot

    yohey-w/multi-agent-shogun

    スクリーンショットの取得・加工を行う。ローカルスクショから最新画像を取得、 PlaywrightでWebページをキャプチャ、画像のトリミング・リサイズ、機微情報を黒塗りマスキング。

    1.4k GitHub stars~901 tokensUpdated 2 mo ago
    Testing & QAAuto-check: notes

  • UI Visual Debugging

    NangoHQ/nango

    A skill your agent uses when modifying or visually debugging Nango frontend UI, including packages/webapp, packages/connect-ui, browser interactions, screenshots, and visual regressions.

    13k GitHub stars~1.3k tokensUpdated today
    Testing & QAAuto-check passed

  • Playwright CLI

    bitsocialnet/5chan

    Verify browser behavior or reproduce a web UI issue with the installed Playwright CLI.

    135 GitHub stars~1.1k tokensUpdated today
    Testing & QAAuto-check: notes

  • Verify Debbie Codes

    debs-obrien/debbie.codes

    Drive the live debbie.codes Nuxt site (web UI) the way a user does via Playwright — launch the dev server, doctor health, exercise mapped features, capture screenshots/ARIA evidence, and clean up.

    142 GitHub stars~1.9k tokensUpdated 7 days ago
    Testing & QAAuto-check passed

  • Verify

    tloncorp/tlon-apps

    Verify tlon-apps web UI changes end-to-end with a single local ship + vite dev server (lighter than the full playwright-dev rig)

    107 GitHub stars~1.4k tokensUpdated today
    Testing & QAAuto-check passed

  • Browser Bug Testing Workflow

    sandgardenhq/sgai

    You must use this skill when debugging web UI bugs or testing interactive components that require multi-step browser interactions.

    137 GitHub stars~3.7k tokensUpdated 17 days ago
    Testing & QAAuto-check passed

More from LeastBit/Claude_skills_zh-CN

All 16 skills in this repo

  • Skill Creator

    LeastBit/Claude_skills_zh-CN

    创建高效技能的指南。当用户想要创建新技能（或更新现有技能）以扩展 Claude 的能力，包括专业知识、工作流程或工具集成时，应使用此技能。

    588 GitHub stars~1.9k tokensUpdated 8 mo ago
    Auto-check passed

  • DOCX

    LeastBit/Claude_skills_zh-CN

    全面的文档创建、编辑和分析功能，支持修订追踪、批注、格式保留和文本提取。当 Claude 需要处理专业文档（.docx 文件）时使用：(1) 创建新文档，(2) 修改或编辑内容，(3) 处理修订追踪，(4) 添加批注，或其他任何文档任务

    588 GitHub stars~1.3k tokensUpdated 8 mo ago
    Auto-check: notes

  • MCP Builder

    LeastBit/Claude_skills_zh-CN

    构建高质量 MCP（模型上下文协议）服务器的指南，使 LLM 能够通过精心设计的工具与外部服务交互。在使用 Python (FastMCP) 或 Node/TypeScript (MCP SDK) 构建 MCP 服务器以集成外部 API 或服务时使用。

    588 GitHub stars~1.2k tokensUpdated 8 mo ago
    Auto-check passed

  • PDF

    LeastBit/Claude_skills_zh-CN

    全面的 PDF 操作工具包，用于提取文本和表格、创建新 PDF、合并/拆分文档以及处理表单。当 Claude 需要填写 PDF 表单或以编程方式大规模处理、生成或分析 PDF 文档时使用。

    588 GitHub stars~1.5k tokensUpdated 8 mo ago
    Auto-check passed

  • PPTX

    LeastBit/Claude_skills_zh-CN

    演示文稿创建、编辑和分析。当 Claude 需要处理演示文稿（.pptx 文件）时使用，包括：(1) 创建新演示文稿，(2) 修改或编辑内容，(3) 处理版式，(4) 添加批注或演讲者备注，或其他任何演示文稿任务

    588 GitHub stars~3.4k tokensUpdated 8 mo ago
    Auto-check: notes

  • Web Artifacts Builder

    LeastBit/Claude_skills_zh-CN

    用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的、多组件的 claude.ai HTML artifact 的工具套件。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifact - 不适用于简单的单文件 HTML/JSX artifact。

    588 GitHub stars~458 tokensUpdated 8 mo ago
    Auto-check passed

Works with

Categories

Questions about Webapp Testing

What does Webapp Testing do?

使用 Playwright 与本地 Web 应用程序交互及进行测试的工具包。支持验证前端功能、调试 UI 行为、捕获浏览器截图以及查看浏览器日志。. Webapp Testing is an agent skill from LeastBit/Claude_skills_zh-CN.

When should I use Webapp Testing?

Webapp Testing fits situations like: tasks that involve Browser testing; tasks that involve Frontend development.

How do I install Webapp Testing in Claude Code?

Run `npx skills add LeastBit/Claude_skills_zh-CN --skill webapp-testing -a claude-code`. Or copy the skill folder (skills/webapp-testing in LeastBit/Claude_skills_zh-CN) into .claude/skills/webapp-testing in your project. Claude Code loads it when a task matches its description.

How do I install Webapp Testing in Codex?

Run `npx skills add LeastBit/Claude_skills_zh-CN --skill webapp-testing -a codex`. Or copy the skill folder (skills/webapp-testing in LeastBit/Claude_skills_zh-CN) into .agents/skills/webapp-testing in your project. Codex loads it when a task matches its description.

Can I use Webapp Testing in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add LeastBit/Claude_skills_zh-CN --skill webapp-testing -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/webapp-testing, .gemini/skills/webapp-testing, .github/skills/webapp-testing and .opencode/skills/webapp-testing in your project.

What does Webapp Testing need to run?

Going by SKILL.md and its folder, Webapp Testing needs Python for the scripts in its folder and the command-line tools its instructions call (python and npm). Our summary lists: Python 3.

Does Webapp Testing access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Webapp Testing safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Webapp Testing use?

Webapp Testing is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Webapp Testing use?

About 604 tokens (SKILL.md is roughly 2.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Webapp Testing?

Skills that share tags, products or a category with Webapp Testing: Shogun Screenshot (yohey-w/multi-agent-shogun, 1.4k stars), UI Visual Debugging (NangoHQ/nango, 13k stars), Playwright CLI (bitsocialnet/5chan, 135 stars) and Verify Debbie Codes (debs-obrien/debbie.codes, 142 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Webapp Testing?

LeastBit (a GitHub user) maintains it in LeastBit/Claude_skills_zh-CN, which has 588 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on January 19, 2026.

Source: LeastBit/Claude_skills_zh-CN on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.