⚡

Web应用测试工具包Skill webapp-testing

这是一个用于自动化测试和调试本地Web应用程序的技能工具包。它基于Playwright框架，提供浏览器自动化、UI功能验证、截图捕获和日志查看等核心功能，帮助开发者和测试人员高效地进行前端功能测试、交互验证和问题诊断。关键词：Web应用测试，Playwright自动化，前端调试，UI测试，浏览器自动化，功能验证，截图捕获，控制台日志。

测试 0 次安装 0 次浏览 更新于 2/28/2026

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

Web 应用程序测试

此技能支持使用 Playwright 自动化对本地 Web 应用程序进行全面测试和调试。

何时使用此技能

当您需要时使用此技能：

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

前提条件

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

核心能力

1. 浏览器自动化

  • 导航到 URL
  • 点击按钮和链接
  • 填写表单字段
  • 选择下拉菜单
  • 处理对话框和警报

2. 验证

  • 断言元素存在
  • 验证文本内容
  • 检查元素可见性
  • 验证 URL
  • 测试响应式行为

3. 调试

  • 捕获截图
  • 查看控制台日志
  • 检查网络请求
  • 调试失败的测试

使用示例

示例 1：基本导航测试

// 导航到页面并验证标题
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('页面标题:', title);

示例 2：表单交互

// 填写并提交表单
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');

示例 3：截图捕获

// 捕获截图用于调试
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('浏览器日志:', msg.text()));

模式：处理错误

try {
  await page.click('#button');
} catch (error) {
  await page.screenshot({ path: 'error.png' });
  throw error;
}

限制

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