webapp-testing

Web Application Testing

该技能用于借助 Playwright 自动化对本地 Web 应用进行较全面的测试与调试。

何时使用

在需要完成以下任务时使用该技能：

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

前置条件

系统已安装 Node.js
有一个本地运行的 Web 应用（或可访问的 URL）
若未安装 Playwright，会自动安装

核心能力

浏览器自动化

导航到 URL
点击按钮和链接
填写表单字段
选择下拉项
处理对话框和弹窗

验证

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

调试

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

使用示例

示例 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 });

使用准则

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

技能介绍