webapp-testing

Web 应用测试

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

如有可能，你应使用 Playwright MCP 服务来完成这项工作。如果 MCP 服务不可用，你可以在安装了 Playwright 的本地 Node.js 环境中运行代码。

何时使用本技能

当你需要执行以下操作时，可使用本技能：

• 在真实浏览器中测试前端功能
• 验证 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）
• 可能在复杂的身份验证流程中遇到问题
• 某些现代框架可能需要特定配置

辅助函数

test-helper.js 中提供了一些辅助函数，用于简化等待元素、捕获截图和处理错误等常见任务。你可以在测试中导入并使用这些函数，以提高可读性和可维护性。