h5页面元素定位_appium在H5界面元素定位

在平常的一些测试工作中我们不免会遇到H5界面，那么遇到H5界面元素该如何进行定位操作呢？

针对这种H5场景我们使用平时原生定位方法是行不通的，只针对Android原生空间进行元素定位，而对于web网页的事单独的B/S架构，两者运行环境不同因此需要我们切换，在针对H5界面元素进行定位操作。

Context

在程序中context我们可以理解为当前对象在程序中所处的一个环境。比如前面提到的App一个界面是属于Activity类型，也就是Android界面环境，但是当访问内嵌的网页是属于另外一个环境（网页环境），两者处于不同的一个环境。

webview

webview是Android系统提供能显示网页的系统空间，它是一个特殊的View，同时特也是一个ViewGroup，可以有很多其他的子view。

在Android 4.4以下(不包含4.4)系统WebView底层实现是采用 WebKit(http://www.webkit.org/)内核，而在Android 4.4及其以上Google 采用了chromium(http://www.chromium.org/)作为系统WebView的底层内核支持。

H5 元素定位的环境准备

1.Chrome PC浏览器 下载地址： https://www.chromedownloads.net/

2.手机版本Chrome （关于手机版本的Chrome下载可以去Google paly去安装，手机中没有Google paly 可以先下载一个go 谷歌安装器）

3.Chrome driver 下载地址：ChromeDriver Mirror

注意：chrome driver要与Chrome的版本对应：

Chromedriver路径一般唯一appium路径C盘中的...node_modulesappium-chromedriverchromedriver 里面，运行Chromedriver.exe可以查看当前版本信息

4.雷电模拟器（我这里用的是雷电模拟器）

5.dr.fone app 3.2.0

操作步骤：

1. 手机与电脑连接，开启USB调试模式，通过adb devices可查看到此设备。（设备系统Android 5.0以上）
2. 电脑端、移动端必须安装chrome浏览器。（尽量保证移动端chrome版本与PC端一致）根据对应的Chrome浏览器版本安装对应的Chrome driver。
3. App Webview开启debug模式
4. 在电脑端Chrome浏览器地址栏输入chrome://inspect/#devices，进入调试模式
5. 执行测试脚本

Webview 调试模式检查与开启

打开APP对应的H5界面，使用PC端谷歌进入chrome://inspect/#devices界面，检查是否显示webview，如果没有显示，则当前为开启调试模式。

开启方式：

在app中配置如下代码（在WebView类中调用静态方法 setWebContentDebuggingEnabled):

if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {  
 WebView.setWebContentsDebuggingEnabled(true);

此段代码需要APP开发人员开启。

测试环境

• 测试设备：雷电模拟器 Android 7.1.2 /Chrome 70
• PC系统环境: Win10 64bit /Chrome 80.0
• 测试app: dr.fone3.2.0.apk
• H5页面地址：https://drfone.wondershare.com/backup.html

实际操作：

我们进入APP的H5界面然后打开调试调试模式地址

可以看出该界面已经显示出来地址，复制当前H5界面地址，进入可以查看到APP中界面一致。

PC端网页界面显示如下：

手机APP端H5界面显示如下：

相关代码实现：

app_H5.py

# -*- coding: utf-8 -*-
from  appium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from time import sleep
desired_caps={}
desired_caps['platformName']='Android'
desired_caps['platformVersion']='7.1.2'
desired_caps['deviceName']='emulator-5554'
desired_caps['app']=r"C:UsersPCDesktoph5.apk"
desired_caps['appPackage']='com.wondershare.drfone'
desired_caps['appActivity']='com.wondershare.drfone.ui.activity.WelcomeActivity'

driver = webdriver.Remote('http://localhost:4723/wd/hub', desired_caps)
driver.implicitly_wait(5)

print('click BackupBtn')
driver.find_element_by_id('com.wondershare.drfone:id/btnBackup').click()
WebDriverWait(driver,8).until(lambda x:x.find_element_by_id('com.wondershare.drfone:id/btnRecoverData'))
print('click NextBtn')
driver.find_element_by_id('com.wondershare.drfone:id/btnRecoverData').click()

driver.implicitly_wait(5)
contexts=driver.contexts
print(contexts)
driver.switch_to.context('WEBVIEW_com.wondershare.drfone')
WebDriverWait(driver,8).until(lambda x:x.find_element_by_id('email'))
driver.find_element_by_id('email').send_keys('shuqing@wondershare.cn')
print('click send')
driver.find_element_by_class_name('btn_send').click()
driver.switch_to.context('NATIVE_APP')
#切换context
driver.find_element_by_class_name('android.widget.ImageButton').click()

注意：仔细检查APP中webview的Chrome版本与Chromedriver版本的匹配，还有system webview的版本也要注意匹配。