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）
• 对于复杂的身份验证流程可能存在问题
• 某些现代框架可能需要特定配置