内嵌网页自动化

• 理解 Hybrid APP 与内嵌网页的概念

• 掌握 WebView 上下文切换方法

• 能操作 APP 里的 H5 页面元素

核心讲解

很多 APP 不是纯原生，而是原生框架里嵌套网页（H5），也就是 Hybrid 混合 APP。比如微信公众号、小程序、很多 APP 的活动页都是 H5。

• 原生页面：用 APP 控件渲染，用 Appium 原生定位

• H5 页面：用 WebView 渲染，里面的元素和网页一样，要用 Selenium 的方式定位

原生和 H5 是两个不同的渲染引擎，元素树是隔离的。不切换的话，只能定位原生元素，找不到 H5 里的元素。

1. 开启 WebView 调试：APP 开发需要开启setWebContentsDebuggingEnabled(true)

2. 获取所有上下文：driver.contexts，返回列表

3. 切换到 WebView 上下文：driver.switch_to.context("WEBVIEW_包名")

4. 操作 H5 元素：和 Selenium 完全一样，用 CSS、XPath 定位

5. 切回原生：driver.switch_to.context("NATIVE_APP")

• 用 Inspector 看，能看到元素属性的是原生

• 看不到详细元素，只有一个大的 WebView，就是 H5

代码示例

from appium import webdriver
from appium.webdriver.common.appiumby import AppiumBy
from selenium.webdriver.common.by import By
import time

desired_caps = {
    "platformName": "Android",
    "deviceName": "127.0.0.1:62001",
    "appPackage": "com.example.hybrid",
    "appActivity": ".MainActivity",
    "noReset": True,
    # 开启webview调试
    "webviewDevtoolsPort": 9222
}

driver = webdriver.Remote("http://127.0.0.1:4723/wd/hub", desired_caps)
time.sleep(3)

# 查看所有上下文
contexts = driver.contexts
print("所有上下文：", contexts)
# 输出类似：['NATIVE_APP', 'WEBVIEW_com.example.hybrid']

# 切换到WebView
webview_context = contexts[-1]
driver.switch_to.context(webview_context)
print("已切换到：", driver.current_context)

# ===== 操作H5元素（和Selenium一样） =====
# 定位H5输入框
h5_input = driver.find_element(By.ID, "username")
h5_input.send_keys("testuser")

# 点击H5按钮
driver.find_element(By.CSS_SELECTOR, ".login-btn").click()

time.sleep(2)

# 获取H5页面标题
print("H5页面标题：", driver.title)

# ===== 切回原生 =====
driver.switch_to.context("NATIVE_APP")
print("切回原生：", driver.current_context)

# 操作原生元素
driver.find_element(AppiumBy.ID, "back_btn").click()

driver.quit()

常见误区

1. APP 没开 WebView 调试：开发没开启的话，获取不到 WebView 上下文，必须让开发打开

2. 上下文名称记错：WEBVIEW 后面跟的是 APP 包名，不是固定的

3. 切换后还用原生定位：H5 里要用 By.ID、By.CSS_SELECTOR，不能用 AppiumBy 的原生定位

4. 多 WebView 分不清：一个页面有多个 WebView 时，要逐个确认哪个是目标

课后练习

1. 找一个带 H5 页面的 APP，切换到 WebView 上下文

2. 操作 H5 页面的一个输入框和按钮

3. 切换回原生，验证原生元素能正常定位