appium ui自动化之：操作手机端H5

原创已于 2024-01-08 14:36:20 修改 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#appium #自动化 #chrome

于 2023-05-12 14:15:42 首次发布

app ui 自动化专栏收录该内容

5 篇文章

订阅专栏

文章介绍了如何配置环境进行手机端H5网页的自动化测试，包括下载对应版本的Chrome浏览器和webdriver，使用F12工具或Chrome的Inspect功能进行元素定位，以及通过selenium在原生App和H5间切换进行测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境配置

手机端下载chrome浏览器
查看浏览器版本
去电脑端下载手机上对应的chrome的版本的webdriver：点我下载chromedriver
将webdriver放在python的脚本目录中

H5网页定位工具

对于手机端H5网页来讲，不能使用之前的uiautomatorviewer，它主要针对android原生应用元素的信息定位。而Inspector定位工具也只能查看部分元素信息。一般常用如下两种方式进行元素识别：

方式1：使用浏览器F12工具

输入被测网站，将浏览器切换到手机模式，使用元素定位工具定位（和定位web网页的方式一样）

方式2：

1、手机上安装Chrome浏览器，开启USB调试模式

2、在手机上，使用安装的Chrome浏览器打开待测H5页面

3、在电脑端的Chrome浏览器输入chrome://inspect

4、打开链接后，选中DiscoverUSBdevices（一般默认选中状态），可以看到监测到的设备，然后点击inspect，弹出页面后，就可以审查页面上的元素了。

备注：在第一次使用该工具时，由于远程调试需向google的一个链接：https://chrome-devtools-frontend.appspot.com获取数据，不FQ打开后会是空白页面，需要VPN再次运行该工具即可正常使用。

5、此时可以和方式一类似，点击选择元素按钮进行识别

方式3：

selenium设置浏览器为手机模式

原生App和H5切换

# 获取原生app元素和chrome 的元素
print(driver.contexts)

# 焦点切换到原生app上
driver.switch_to.context('NATIVE_APP')


# 焦点切换到CHROMIUM的页面
driver.switch_to.context('CHROMIUM')

python代码准备

# 导入webdriver
from appium import webdriver


# 声明服务器地址
server = 'http://localhost:4723/wd/hub'

devices_system = {
        'automationName': 'appium',
        # 平台名
        'platformName': 'Android',
        # 设备名，可通过adb devices查询
        'driverName': '19111FDF600ADT',
        # 系统版本，可通过adb shell getprop ro.build.version.release，若是鸿蒙系统，写10.0
        'platformVersion': '13.0.0',
        # 浏览器名
        'browserName':'chrome',
        # 浏览器驱动所在路径
        'chromedriverExecutable':'D:/auto/app_auto/chromedriver.exe'
    }

# 连接手机和App
driver = webdriver.Remote(server, devices_system)

# 手机端H5页面，本质上还是一个网页，元素定位等操作和写法，和selenium-web端的写法一致，在此不过多赘述，如下：
driver.get('https://xxx.com')
driver.find_element(By.XPATH,'//input[@id="mobile"]').send_keys('xxx')
driver.find_element(By.XPATH, '//button[text()="获取验证码"]').click()