Web 应用测试

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

何时使用本技能

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

在真实浏览器中测试前端功能
验证 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 });

指南

始终验证应用正在运行 - 在运行测试前检查本地服务器是否可访问
使用显式等待 - 在交互前等待元素或导航完成
失败时截图 - 截图以帮助调试问题
清理资源 - 完成后始终关闭浏览器
优雅地处理超时 - 为慢速操作设置合理的超时时间
增量测试 - 从简单交互开始，再进行复杂流程
明智地使用选择器 - 优先使用 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) {\n  await page.screenshot({ path: 'error.png' });
  throw error;
}

局限性

需要 Node.js 环境
无法测试原生移动应用（请改用 React Native Testing Library）
在复杂的身份验证流程中可能存在问题
某些现代框架可能需要特定配置

Web Application Testing

This skill enables comprehensive testing and debugging of local web applications using Playwright automation.

When to Use This Skill

Use this skill when you need to:

Test frontend functionality in a real browser
Verify UI behavior and interactions
Debug web application issues
Capture screenshots for documentation or debugging
Inspect browser console logs
Validate form submissions and user flows
Check responsive design across viewports

Prerequisites

Node.js installed on the system
A locally running web application (or accessible URL)
Playwright will be installed automatically if not present

Core Capabilities

1. Browser Automation

Navigate to URLs
Click buttons and links
Fill form fields
Select dropdowns
Handle dialogs and alerts

2. Verification

Assert element presence
Verify text content
Check element visibility
Validate URLs
Test responsive behavior

3. Debugging

Capture screenshots
View console logs
Inspect network requests
Debug failed tests

Usage Examples

Example 1: Basic Navigation Test

// Navigate to a page and verify title
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('Page title:', title);

Example 2: Form Interaction

// 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');

Example 3: Screenshot Capture

// Capture a screenshot for debugging
await page.screenshot({ path: 'debug.png', fullPage: true });

Guidelines

Always verify the app is running - Check that the local server is accessible before running tests
Use explicit waits - Wait for elements or navigation to complete before interacting
Capture screenshots on failure - Take screenshots to help debug issues
Clean up resources - Always close the browser when done
Handle timeouts gracefully - Set reasonable timeouts for slow operations
Test incrementally - Start with simple interactions before complex flows
Use selectors wisely - Prefer data-testid or role-based selectors over CSS classes

Common Patterns

Pattern: Wait for Element

await page.waitForSelector('#element-id', { state: 'visible' });

Pattern: Check if Element Exists

const exists = await page.locator('#element-id').count() > 0;

Pattern: Get Console Logs

page.on('console', msg => console.log('Browser log:', msg.text()));

Pattern: Handle Errors

try {
  await page.click('#button');
} catch (error) {\n  await page.screenshot({ path: 'error.png' });
  throw error;
}

Limitations

Requires Node.js environment
Cannot test native mobile apps (use React Native Testing Library instead)
May have issues with complex authentication flows
Some modern frameworks may require specific configuration