Web Application Testing Skill

---
name: web-application-testing-skill
description: A toolkit for interacting with and testing local web applications using Playwright.
---

# 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
```javascript
// 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
```javascript
// 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
```javascript
// Capture a screenshot for debugging
await page.screenshot({ path: 'debug.png', fullPage: true });
```

## Guidelines

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

## Common Patterns

### Pattern: Wait for Element
```javascript
await page.waitForSelector('#element-id', { state: 'visible' });
```

### Pattern: Check if Element Exists
```javascript
const exists = await page.locator('#element-id').count() > 0;
```

### Pattern: Get Console Logs
```javascript
page.on('console', msg => console.log('Browser log:', msg.text()));
```

### Pattern: Handle Errors
```javascript
try {
  await page.click('#button');
} catch (error) {
  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

---
name: web-application-testing-skill
description: 一个使用 Playwright 与本地 Web 应用程序交互并对其进行测试的工具包。
---

# Web 应用程序测试

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

## 何时使用本技能

当您需要执行以下操作时，请使用本技能：
- 在真实浏览器中测试前端功能
- 验证 UI 行为与用户交互
- 调试 Web 应用程序问题
- 截取屏幕截图以用于文档编写或调试
- 检查浏览器控制台日志
- 验证表单提交与用户操作流程
- 在不同视口下检查响应式设计

## 先决条件

- 系统已安装 Node.js
- 本地运行的 Web 应用程序（或可通过 URL 访问）
- 若尚未安装，Playwright 将自动安装

## 核心能力

### 1. 浏览器自动化
- 导航至指定 URL
- 点击按钮与链接
- 填写表单字段
- 选择下拉菜单项
- 处理对话框与警告框

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

### 3. 调试
- 截取屏幕截图
- 查看控制台日志
- 检查网络请求
- 调试失败的测试

## 使用示例

### 示例 1：基础导航测试
```javascript
// 导航至页面并验证标题
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('页面标题:', title);
```

### 示例 2：表单交互
```javascript
// 填写并提交表单
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');
```

### 示例 3：截屏捕获
```javascript
// 截取屏幕截图用于调试
await page.screenshot({ path: 'debug.png', fullPage: true });
```

## 使用指南

1. **始终验证应用是否正在运行** —— 在运行测试前，请确认本地服务器可访问
2. **使用显式等待** —— 在与元素交互前，等待元素出现或导航完成
3. **在测试失败时截取屏幕截图** —— 截图有助于问题调试
4. **清理资源** —— 完成后务必关闭浏览器
5. **优雅地处理超时** —— 为耗时较长的操作设置合理的超时时间
6. **增量式测试** —— 先从简单交互开始，再逐步覆盖复杂操作流程
7. **明智地选用选择器** —— 优先使用 `data-testid` 属性或基于角色（role-based）的选择器，而非 CSS 类名

## 常见模式

### 模式：等待元素出现
```javascript
await page.waitForSelector('#element-id', { state: 'visible' });
```

### 模式：检查元素是否存在
```javascript
const exists = await page.locator('#element-id').count() > 0;
```

### 模式：获取控制台日志
```javascript
page.on('console', msg => console.log('浏览器日志:', msg.text()));
```

### 模式：错误处理
```javascript
try {
  await page.click('#button');
} catch (error) {
  await page.screenshot({ path: 'error.png' });
  throw error;
}
```

## 局限性

- 需要 Node.js 运行环境
- 无法测试原生移动应用程序（请改用 React Native Testing Library）
- 在处理复杂的认证流程时可能存在困难
- 某些现代框架可能需要特定配置