Web应用测试

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

应尽可能使用Playwright MCP服务器来执行工作。如果MCP服务器不可用，可以在本地已安装Playwright的Node.js环境中运行代码。

何时使用本技能

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

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

辅助函数

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

webapp-testing

相关 Skills