Appium 如何进行移动 Web 测试？

Appium 支持对移动浏览器中的 Web 应用进行自动化测试，核心思路是通过设置 browserName 能力让 Appium 驱动移动端 Chrome 或 Safari，然后用标准 WebDriver 协议操作页面元素。

Android Chrome 与 iOS Safari 配置

Android 端将 browserName 设为 Chrome，Appium 会自动调用 Chromedriver 驱动浏览器：

javascript
const caps = {
  platformName: 'Android',
  browserName: 'Chrome',
  deviceName: 'Pixel 5'
};

iOS 端将 browserName 设为 Safari，Appium 通过 XCUITest 驱动 Safari：

javascript
const caps = {
  platformName: 'iOS',
  browserName: 'Safari',
  deviceName: 'iPhone 14',
  automationName: 'XCUITest'
};

关键区别：Android 需要 Chromedriver 版本与设备 Chrome 版本匹配，版本不匹配时会报 SessionNotCreatedException，需通过 chromedriverExecutable 指定驱动路径或让 Appium 自动更新。

移动 Web 与原生 App 测试的差异

移动 Web 测试用 CSS 选择器和 XPath 定位 HTML 元素，而非 accessibility id 或 uiautomator。触摸交互需要用 W3C Actions API 模拟手势，比如滑动：

javascript
await driver.actions([{
  type: 'pointer', id: 'finger',
  parameters: { pointerType: 'touch' },
  actions: [
    { type: 'pointerMove', origin: 'viewport', x: 200, y: 800 },
    { type: 'pointerDown' },
    { type: 'pointerMove', origin: 'viewport', x: 200, y: 200 },
    { type: 'pointerUp' }
  ]
}]);

另一个常见陷阱：移动浏览器的地址栏会自动收起，导致元素坐标偏移，建议用元素相对定位而非绝对坐标。

响应式布局与横竖屏测试

用 driver.setRect() 改变窗口尺寸验证响应式断点，用 driver.rotate() 切换横竖屏：

javascript
await driver.setRect({ width: 375, height: 667 });
// 验证移动端布局
const menu = await driver.findElement(By.css('.mobile-menu'));
assert(await menu.isDisplayed());

await driver.rotate({ screen: 'LANDSCAPE' });
// 验证桌面端布局

常见问题与排查

元素定位失败：移动浏览器渲染的 DOM 可能与桌面不同，用 driver.getPageSource() 检查实际 DOM 结构，注意浏览器可能注入了 meta viewport 或自定义样式。

页面加载超时：移动网络延迟大，需要设置更长的隐式等待，或用显式等待：

javascript
await driver.wait(until.elementLocated(By.id('content')), 15000);

Chromedriver 版本冲突：Appium 2.0 默认不内置 Chromedriver，需安装 appium-chromedriver 扩展，或通过 --chromedriver-version 指定版本。

追问方向

• 混合应用中如何切换 WebView 上下文与原生上下文？用 driver.getContexts() 获取所有上下文后 driver.switchTo().context('WEBVIEW_xxx')。
• 如何在真机上抓取移动浏览器网络请求？通过 Chromedriver 的 CDP 支持（cdpPort 能力）或代理工具如 mitmproxy。