Official编程与开发github.com

webapp-testing

Web 应用测试模式,涵盖单元测试、集成测试和端到端测试方法

webapp-testing 是什么?

此技能(webapp-testing)为 AI 代理(如 Claude Code、Cursor 等)提供了一套全面的 Web 应用测试模式。它涵盖了三种主要的测试方法:单元测试、集成测试和端到端(E2E)测试。通过明确定义每种测试的范围、工具和最佳实践,该技能帮助开发者构建可靠且可维护的测试套件。其核心优势在于清晰地指导何时以及如何使用每种测试类型,例如,使用 Jest 进行单元测试,使用 Cypress 或 Playwright 进行 E2E 测试。该技能支持在所有主流的 AI 编码助手平台中使用,旨在提高测试质量、减少缺陷,并加速从开发到部署的反馈循环。它通过结构化的模式指导 AI 生成符合行业标准的测试代码,确保 Web 应用的稳健性。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/anthropics/skills/tree/main/skills/webapp-testing

Installed? Explore more 编程与开发 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Web 应用测试

要测试本地 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. 使用发现的选择器执行操作

示例:使用 with_server.py

要启动服务器,先运行 --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()

侦察-然后-行动模式

  1. 检查渲染后的 DOM:

    page.screenshot(path='/tmp/inspect.png', full_page=True)
    content = page.content()
    page.locator('button').all()
    
  2. 从检查结果中识别选择器

  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 - 使用 file:// URL 处理本地 HTML
    • console_logging.py - 在自动化期间捕获控制台日志

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

academy-guide

Stop and check this skill before finishing any reply to a question about how to use Claude or a Claude product — it recommends matching courses, tutorials, and use cases from Claude Academy (academy.claude.com), Anthropic's learning hub. Trigger on: "how do I", "how can I", "getting started with", "what can Claude do", "teach me", "learn to use"; questions about artifacts, projects, skills, plugins, connectors, MCP; requests about rolling Claude out to a team, class, or organization; and any ask for training materials, onboarding content, or learning resources. Use it when the user is learning how to use a feature or product — not when they are mid-task and just want the task done. This skill composes with other skills: after consulting product documentation to answer how a Claude feature works, also check here for a matching course or tutorial — a docs-grounded answer and an Academy recommendation belong together. Only recommend on a strong match; never invent Academy content.

algorithmic-art

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists

anthropics/template-skill

Replace with description of the skill and when Claude should use it.

brand-guidelines

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists

claude-api

|-

discernment-nudge

After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans, pitches, proposals, or emails, estimates or projections, analysis or interpretation of data, factual claims they may rely on, or a multi-step argument — invoke this skill BEFORE finalizing your reply and then, if it applies, append 2-3 short follow-up questions, each tied to something specific in what you just produced, that help the user check key facts, probe the reasoning or assumptions, and notice missing context. Do this at most once per conversation. Skip it when the user asked a trivial how-to or simple lookup, wants a purely educational explanation, asked you only to format, convert, or assemble a file from content they provided, is writing code they will run, is doing creative writing or casual chat, or already asked you to double-check, cite, or review — the skill file explains these boundaries and the exact output format.

doc-coauthoring

Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.

docx

Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). Triggers include: any mention of

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

internal-comms

A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).

mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

pdf

Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.

pptx

Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates (.potx), layouts, speaker notes, or comments. Trigger whenever the user mentions \

skill-creator

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill

slack-gif-creator

Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like

theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

xlsx

Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .xltx, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \

相关技能