AI Agent Skill HUB

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

155 stars
byboshi-xixixi
View on GitHubInstallation ↓

Best use case

webapp-testing is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

Teams using webapp-testing should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/04_Tester_WebAppTesting/SKILL.md --create-dirs "https://raw.githubusercontent.com/boshi-xixixi/TraeSkill/main/.trae/Skills/04_Tester_WebAppTesting/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/04_Tester_WebAppTesting/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How webapp-testing Compares

Feature / Agentwebapp-testingStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

Related Guides

AI Agents for Coding

Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.

SKILL.md Source

# WebApp Testing

使用 Playwright 进行本地 Web 应用测试的工具集。

## 核心能力

### 1. 浏览器交互
- 打开和导航页面
- 点击、填写表单
- 截图和快照
- 等待元素出现

### 2. 调试功能
- 查看控制台日志
- 检查网络请求
- 分析性能问题
- 内存快照

### 3. 测试验证
- 验证 UI 元素存在
- 检查文本内容
- 验证样式和布局
- 测试交互行为

## 使用场景

- **功能验证**: 验证前端功能是否正常工作
- **UI 调试**: 调试 UI 显示问题
- **自动化测试**: 编写自动化测试脚本
- **性能分析**: 分析页面加载和渲染性能

## 工作流程

1. **启动测试服务器**: 确保本地服务正在运行
2. **打开浏览器**: 使用 Playwright 打开目标页面
3. **执行测试**: 进行点击、输入、验证等操作
4. **收集结果**: 截图、日志、性能数据

## 与 Browser Automation 的区别

| 特性 | WebApp Testing | Browser Automation |
|------|---------------|-------------------|
| 主要用途 | 测试本地应用 | 自动化浏览器操作 |
| 侧重点 | 功能验证 | 任务自动化 |
| 典型场景 | 开发阶段测试 | 数据采集、自动化流程 |
| 工具链 | Playwright | Puppeteer/Playwright |

## 如何使用

- **验证功能**: "帮我测试一下登录功能是否正常"
- **调试 UI**: "检查这个按钮为什么点击没反应"
- **截图验证**: "帮我截个图看看页面效果"
- **性能分析**: "分析一下页面加载为什么这么慢"

Related Skills

trae-project-setup

155
from boshi-xixixi/TraeSkill

Trae 项目规范化配置专家。用于快速初始化 Trae 项目配置文件、生成项目规则、用户偏好设置和 Skill 模板。当用户需要：(1) 初始化新项目的 Trae 配置 (2) 生成 .trae 目录结构 (3) 创建 USER_PREFERENCES.md 用户偏好文件 (4) 创建 project_rules.md 项目规则文件 (5) 创建新的 Skill 模板 时使用此 Skill。

skill-creator

155
from boshi-xixixi/TraeSkill

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.

user-customization

155
from boshi-xixixi/TraeSkill

指导用户如何自定义 Trae Skills 的配置，包括覆盖角色设定、调整技术偏好和定义全局规则。

Operations & Growth Expert

155
from boshi-xixixi/TraeSkill

专注于内容创作（文案、运营稿件）、运营数据分析、以及营销活动策划与设置。帮助项目实现从“可用”到“好用”及“增长”的闭环。

AI Engineer

155
from boshi-xixixi/TraeSkill

专注于 LLM 应用开发，涵盖 RAG 和 LangChain 架构。

Security Specialist

155
from boshi-xixixi/TraeSkill

应用安全专家，专注于认证授权、数据保护和合规性审计。当用户需要：(1) 设计安全的登录认证系统 (2) 进行安全代码审查 (3) 检查 GDPR/隐私合规 (4) 防范常见安全漏洞 (OWASP Top 10) 时使用此 Skill。

seo-technical-expert

155
from boshi-xixixi/TraeSkill

技术 SEO 专家，擅长网站性能优化、结构化数据、移动端优化和技术问题诊断。适用于网站技术实现、性能调优和搜索引擎抓取优化时使用。

seo-linkbuilding

155
from boshi-xixixi/TraeSkill

链接建设与社交 SEO 专家，擅长外链获取策略、社交媒体优化和品牌建设。适用于提升网站权威度、获取高质量反向链接和社交信号增强时使用。

seo-content-strategy

155
from boshi-xixixi/TraeSkill

SEO 内容策略专家，擅长关键词研究、内容规划、长尾词布局和内容营销策略。适用于创建 SEO 友好的文章 landing page 和营销内容时使用。

seo-analytics

155
from boshi-xixixi/TraeSkill

SEO 数据分析专家，擅长 Google Search Console、Google Analytics 数据分析、排名追踪和 ROI 计算。适用于 SEO 效果评估、策略调整和数据驱动决策时使用。

pdf

155
from boshi-xixixi/TraeSkill

Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs to fill in a PDF form or programmatically process, generate, or analyze PDF documents at scale.

xlsx

155
from boshi-xixixi/TraeSkill

Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas