# 移动端浏览器使用指南 📱

本指南说明如何使用移动设备模拟进行 H5 页面和移动端网页自动化测试。

## 快速开始

### 1. 使用辅助脚本（推荐）

```python
from scripts.mobile_browser import create_mobile_browser

# 创建 iPhone 12 Pro 浏览器
browser = create_mobile_browser(device="iPhone 12 Pro", headless=True)
browser.goto("https://m.example.com")

# 正常使用
browser.screenshot_base64()
browser.click(195, 750)
browser.close()
```

### 2. 手动配置

```python
from vision_browser.browser import Browser

# 创建移动端视口
browser = Browser(
    headless=True,
    window_width=390,   # iPhone 12 Pro
    window_height=844
)
browser.start()

# 设置 User-Agent
mobile_ua = "Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15"
browser.driver.execute_cdp_cmd('Network.setUserAgentOverride', {
    "userAgent": mobile_ua
})

browser.goto("https://m.example.com")
```

## 可用设备

运行以下命令查看所有可用设备：

```bash
cd ai-platform/skills/testing/data_testing/vision-web-automation/scripts
python mobile_browser.py --list
```

输出：
```
可用的移动设备配置:

设备名称                 分辨率
----------------------------------------
iPhone 12 Pro        390x844
iPhone SE            375x667
iPhone 14 Pro Max    430x932
Pixel 5              393x851
Galaxy S20           360x800
iPad Pro             1024x1366
```

## 测试示例

### 测试特定设备和 URL

```bash
python mobile_browser.py --device "iPhone 12 Pro" --url "https://m.baidu.com" --no-headless
```

参数说明：
- `--device`: 设备名称（默认: iPhone 12 Pro）
- `--url`: 要访问的 URL（默认: https://www.baidu.com）
- `--no-headless`: 显示浏览器窗口（用于调试）
- `--list`: 列出所有可用设备

## 移动端与桌面端的差异

### 坐标范围

| 模式 | 视口尺寸 | X 坐标范围 | Y 坐标范围 |
|------|---------|-----------|-----------|
| 桌面端 | 1280x800 | 0-1279 | 0-799 |
| 移动端 (iPhone 12 Pro) | 390x844 | 0-389 | 0-843 |

### 最佳实践

1. **触摸目标大小**
   - 移动端按钮应至少 44x44 像素
   - 点击区域更小，需要更精确的坐标

2. **滚动距离**
   ```python
   # 桌面端
   browser.scroll(direction="down", pixels=500)

   # 移动端（推荐更小的距离）
   browser.scroll(direction="down", pixels=300)
   ```

3. **网格密度**
   ```python
   # 桌面端
   browser.screenshot_with_grid(cols=16, rows=10)

   # 移动端（推荐更密集）
   browser.screenshot_with_grid(cols=8, rows=16)
   ```

4. **验证视口**
   ```python
   width, height = browser.get_viewport_size()
   print(f"当前视口: {width}x{height}")

   # 确保是移动端视口
   assert width < 500, "不是移动端视口！"
   ```

## 常见问题

### Q: 为什么页面显示桌面版而不是移动版？

A: 确保设置了正确的 User-Agent：

```python
browser.driver.execute_cdp_cmd('Network.setUserAgentOverride', {
    "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) ..."
})
```

### Q: 如何调试移动端页面？

A: 使用 `--no-headless` 参数显示浏览器窗口：

```bash
python mobile_browser.py --device "iPhone 12 Pro" --url "https://example.com" --no-headless
```

### Q: 点击没有响应怎么办？

A:
1. 使用 `screenshot_with_grid()` 验证坐标
2. 确保点击元素中心
3. 检查元素是否在视口内（可能需要滚动）

## 完整示例

```python
from scripts.mobile_browser import create_mobile_browser
import time

# 创建移动端浏览器
browser = create_mobile_browser(device="iPhone 12 Pro", headless=False)

try:
    # 访问移动端页面
    browser.goto("https://m.baidu.com")
    time.sleep(2)

    # 截图查看布局
    img = browser.screenshot_with_grid(cols=8, rows=16)

    # 点击搜索框（根据实际坐标调整）
    browser.click(195, 100)
    time.sleep(1)

    # 输入文本
    browser.type_text("Python 教程")
    time.sleep(1)

    # 按回车搜索
    browser.press_key("enter")
    time.sleep(2)

    # 验证结果
    title = browser.get_title()
    print(f"页面标题: {title}")

finally:
    browser.close()
```

## 参考资料

- [SKILL.md](SKILL.md) - 完整的 skill 文档
- [README.md](README.md) - 快速开始指南
- [examples.md](examples.md) - 更多示例

---

**准备好进行移动端测试了吗？** 使用 `create_mobile_browser()` 开始！