# /designfast:test-responsive Command

## Description
专门测试原型的响应式设计，确保在不同设备和屏幕尺寸下正确显示和功能正常。

## Syntax
```
/designfast:test-responsive --prototype=<path> [options]
```

## Parameters

### Required
- `--prototype=<path>`: 原型HTML文件路径或项目ID

### Optional
- `--project-id=<id>`: 项目ID（如果未从原型路径提取）
- `--viewports=<sizes>`: 自定义视口尺寸（格式：widthxheight,多个用逗号分隔）
- `--devices=<devices>`: 设备预设（mobile,tablet,desktop,laptop，默认：all）
- `--browsers=<browsers>`: 浏览器列表（默认：chromium）
- `--output=<path>`: 测试报告输出目录
- `--screenshots=<boolean>`: 是否保存截图（默认：true）
- `--threshold=<percent>`: 布局差异阈值（默认：5%）

## Workflow

### Stage 1: Input Validation
1. 检查原型文件和配置
2. 验证响应式断点设置
3. 准备测试环境

### Stage 2: Viewport Configuration
1. 定义标准设备视口
2. 添加自定义视口尺寸
3. 配置浏览器设置

```powershell
# 标准设备配置
$devices = @(
    @{ name = "iPhone SE"; width = 375; height = 667 },
    @{ name = "iPhone 12"; width = 390; height = 844 },
    @{ name = "iPad"; width = 768; height = 1024 },
    @{ name = "iPad Pro"; width = 1024; height = 1366 },
    @{ name = "Desktop HD"; width = 1920; height = 1080 }
)
```

### Stage 3: Responsive Test Generation
1. 创建响应式测试场景
2. 生成视口切换测试
3. 配置布局验证断言

```powershell
# 创建响应式测试
$responsiveTest = & "$PSScriptRoot\..\scripts\test-manager.ps1" `
    -Action create `
    -ProjectId $ProjectId `
    -PrototypeId $PrototypeId `
    -Name "Responsive Design Test" `
    -Type "responsive"
```

### Stage 4: Layout Testing
1. 在每个视口加载原型
2. 捕获布局截图
3. 验证关键元素位置和尺寸

### Stage 5: Interaction Testing
1. 测试移动端交互（触摸事件）
2. 验证导航菜单响应式行为
3. 检查表单元素在小屏幕上的可用性

### Stage 6: Visual Regression
1. 比较不同视口的视觉差异
2. 检测布局断点问题
3. 生成差异报告

## Success Criteria

✅ 响应式覆盖完整：
- 移动设备（320px - 767px）
- 平板设备（768px - 1023px）
- 桌面设备（1024px+）

✅ 布局一致性：
- 内容在所有断点正确流动
- 导航元素适应屏幕尺寸
- 图像和媒体响应式缩放

✅ 功能完整性：
- 交互元素在触摸设备上工作
- 表单在移动端可用
- 性能在低端设备上可接受

✅ 视觉质量：
- 无水平滚动条
- 文本可读性良好
- 视觉层次保持一致

## Example Usage

### Standard Responsive Testing
```bash
/designfast:test-responsive --prototype=workspace/prototypes/project-123/index.html
```

### Custom Viewports
```bash
/designfast:test-responsive --prototype=project-123 --viewports=320x568,768x1024,1920x1080
```

### Mobile Only Testing
```bash
/designfast:test-responsive --prototype=project-123 --devices=mobile,tablet
```

## Error Handling

### Layout Breakpoints Missing
```
警告：未检测到响应式断点
建议：检查CSS媒体查询设置
```

### Visual Regression Failed
```
错误：检测到布局差异超过阈值
位置：第5个断点，差异：12%
建议：调整CSS规则或增加阈值
```

### Touch Events Not Working
```
错误：移动端交互测试失败
元素：#mobile-menu-toggle
建议：添加触摸事件处理器
```

## Dependencies
- 原型包含响应式CSS
- Playwright MCP服务器可用
- 图像比较库配置正确

## Output Files
- `workspace/reports/tests/{project-id}/responsive-report.html`
- `workspace/reports/tests/{project-id}/screenshots/viewports/`
- `workspace/reports/tests/{project-id}/diff-report.json`