mcpField
W
webapp-testing

webapp-testing

github.com/aiskillstore测试与质量449235 次安装今天更新
代码仓库

关于 webapp-testing

webapp-testing 是使用 Playwright 自动化测试和调试本地 Web 应用的技能，面向前端开发与质量验证。它涵盖浏览器交互、页面断言、截图及控制台和网络信息检查。

主要功能

  1. 01自动执行浏览器导航与交互
  2. 02验证元素、文本和 URL
  3. 03测试响应式行为
  4. 04捕获截图并查看控制台日志
  5. 05检查网络请求并调试失败测试

适用场景

  1. 01验证页面功能和交互流程
  2. 02测试表单提交与页面跳转
  3. 03检查不同视口下的响应式布局
  4. 04通过截图和日志排查问题

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aiskillstore/marketplace --skill webapp-testing

安装后在 Claude Code 中输入/webapp-testing确认已加载。

附带文件skill-report.json

详细介绍

Web 应用测试

此技能可通过 Playwright 自动化，对本地 Web 应用进行全面测试和调试。

何时使用此技能

在以下情况下使用此技能：

  • 在真实浏览器中测试前端功能
  • 验证 UI 行为和交互
  • 调试 Web 应用问题
  • 为文档或调试捕获屏幕截图
  • 检查浏览器控制台日志
  • 验证表单提交和用户流程
  • 检查不同视口下的响应式设计

前置条件

  • 系统已安装 Node.js
  • 本地运行的 Web 应用（或可访问的 URL）
  • 如果尚未安装，Playwright 将自动安装

核心功能

1. 浏览器自动化
  • 访问 URL
  • 点击按钮和链接
  • 填写表单字段
  • 选择下拉菜单项
  • 处理对话框和警告框
2. 验证
  • 断言元素是否存在
  • 验证文本内容
  • 检查元素是否可见
  • 验证 URL
  • 测试响应式行为
3. 调试
  • 捕获屏幕截图
  • 查看控制台日志
  • 检查网络请求
  • 调试失败的测试

使用示例

示例 1：基本导航测试
// Navigate to a page and verify title
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('Page title:', title);
示例 2：表单交互
// Fill out and submit a form
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');
示例 3：捕获屏幕截图
// Capture a screenshot for debugging
await page.screenshot({ path: 'debug.png', fullPage: true });

指南

  1. 始终确认应用正在运行——运行测试前，检查本地服务器是否可访问
  2. 使用显式等待——等待元素出现或导航完成后再进行交互
  3. 失败时捕获屏幕截图——截取屏幕截图以帮助调试问题
  4. 清理资源——完成后务必关闭浏览器
  5. 妥善处理超时——为耗时操作设置合理的超时时间
  6. 逐步测试——先从简单交互开始，再测试复杂流程
  7. 合理使用选择器——优先使用 data-testid 或基于角色的选择器，而非 CSS 类

常见模式

模式：等待元素
await page.waitForSelector('#element-id', { state: 'visible' });
模式：检查元素是否存在
const exists = await page.locator('#element-id').count() > 0;
模式：获取控制台日志
page.on('console', msg => console.log('Browser log:', msg.text()));
模式：处理错误
try {
  await page.click('#button');
} catch (error) {
  await page.screenshot({ path: 'error.png' });
  throw error;
}

限制

  • 需要 Node.js 环境
  • 无法测试原生移动应用（请改用 React Native Testing Library）
  • 复杂的身份验证流程可能会遇到问题
  • 某些现代框架可能需要特定配置

评论

支持 Markdown