名称: webapp-testing 描述: 使用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 });

指南

始终验证应用程序正在运行 - 在运行测试前检查本地服务器是否可访问
使用显式等待 - 在交互前等待元素或导航完成
在失败时捕获截图 - 截图以帮助调试问题
清理资源 - 完成后始终关闭浏览器
优雅处理超时 - 为慢速操作设置合理的超时时间
增量测试 - 从简单交互开始，再进行复杂流程
明智使用选择器 - 优先使用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）
可能在复杂身份验证流程方面存在问题
某些现代框架可能需要特定配置