[AP_11] APP中内嵌H5页面-元素定位环境搭建

一、H5页面简介

1. H5页面元素定位引入

在混合开发的APP中常有内嵌的H5页面，对于H5页面元素定位，其前所用的方法（Android原生的uiautomator；Appium自带的Inspector）来进行定位是行不通的，因其前是基于Andriod原生控件进行元素定位，而Web网页是单独的B/S架构，两者的运行环境不同，因此需要进行上下文(context)切换，便于对H5页面元素定位操作

2. context 简介

Interface to global information about an application environment. This is an abstract class whose implementation is provided by the Android
system. It allows access to application-specific resources and classes, as well as up-calls for application-level operations such as launching
activities, broadcasting and receiving intents, etc.

教科书版：
作为应用程序环境的全局信息接口，是由Android系统提供的一个抽象类。它允许访问特定应用程序的资源和类，以及对应用程序级操作的调用，如：启动活动、广播和接收意图

通俗版本：
context类型相当于当前对象在程序中所处的一个环境。其前提及的APP中一个界面属于Activity类型，即Android界面环境；当访问内嵌网页，此时是属于另外一个环境（网页环境），两者处于不同的环境
如：dr.fone app内嵌网页地址==> https://drfone.wondershare.com/backup.html

3. WebView

WebView：是Android系统提供的能显示网页的系统控件，是一个特殊的View，同时也是一个ViewGroup，可以有很多子View

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

PS：相较基于Chromium WebView，基于Chromium WebView提供了更广HTML5、CSS3、Javascript3支持，以及支持远程调试

二、H5元素定位-环境搭建

1. 安装组件

【1】Chrome PC端浏览器，如：Chrome 75
【2】Chrome 手机端浏览器，如：Chrome 75（可通过Google play安装）
【3】ChromeDriver
ChromeDriver需要与Chrome的版本匹配对应
ChromeDriver镜像：https://npm.taobao.org/mirrors/chromedriver/
ChromeDriver与Chrome版本对应表：https://npm.taobao.org/mirrors/chromedriver/75.0.3770.8/notes.txt
ChromeDriver路径位于appium路径中：
C:\Users\Administrator\AppData\Roaming\npm\node_modules\appium\node_modules\appium-chromedriver\chromedriver\win
【4】dr.fone app 3.2.0
官网最新：https://drfone.wondershare.com/drfone-app-for-android.html
其他站点：http://www.itmop.com/downinfo/308478.html
【5】逍遥模拟器（满足可获取WebView context）
官网最新：http://www.xyaz.cn/
历史版本：http://bbs.xyaz.cn/thread-76-1-1.html
adb连接逍遥模拟器：adb connect 127.0.0.1:21503

2. 操作步骤

（1）手机与电脑连接，开启USB调试模式，通过adb devices可查看此设备
（2）电脑端、移动端需要安装chrome浏览器（建议PC端和移动端的Chrome版本保持一致），根据对应的Chrome浏览器版本来选择对应的ChromeDriver
（3）App WebView开启debug模式（调试模式，参看以下第3点调试检查）
（4）在电脑端 Chrome浏览器地址栏输入chrome://inspect/devices，进入调试模式
（5）执行测试脚本

3. WebView调试模式的检查与开启

1）WebView调试模式检查

（1）打开app对应的H5页面，在chrome://inspect/devices地址中，检查是否显示对应的WebView，若无则表示当前未开启调试模式

H5页面操作：
进入dr.fone --> 点击【Backup】 --> 点击【Next】 --> 进入Deep Recovery页面 --> 切换到dr.fone对应的WebView，定位email输入框，输入并提交 --> 切换回到Android原生的WebView，点击返回键

PC端Chrome浏览器中输入：chrome://inspect/devices

（2）在自动化脚本中，进入对应的H5页面，打印输出当前context，若只显示为Native App，则WebView未开启

2）WebView调试模式开启

app中配置代码（在WebView类中调用静态方法setWebContentsDebuggingEnabled）：

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

PS：以上配置，一般由APP开发人员设置

4. 需求分析

（1）首先进入到H5页面，切换到context环境，进行相关元素的定位操作（输入邮箱并提交）
（2）context切换：通过contexts()方法来获取页面中的所有context，然后切换到H5页面的context

在H5页面进行元素定位操作，获取contexs的方法为：

cont=driver.contexts
print(cont)

5. 获取必要信息

（1）Android版本：4.4.4

（2）Android设备：127.0.0.1:21503

（3）appPackage为：com.wondershare.drfone
（4）appActivity为：com.wondershare.drfone.ui.activity.WelcomeActivity
获取appPackage方式：aapt dump badging xxxx.apk | find "package: name="
获取appActivity方式：aapt dump badging xxxx.apk | find "launchable-activity"

6. 代码实现

drfone_h5.py

from appium import webdriver
from selenium.webdriver.support.ui import WebDriverWait

# 定义字典，存储capabilities配置信息
desired_caps={}
# 移动设备信息（Android模拟器）
desired_caps['platformName']='Android'
desired_caps['platformVersion']='4.4.4'
desired_caps['deviceName']='127.0.0.1:21503'
# 移动APP应用信息
desired_caps['app']=r'C:\Users\Administrator\Desktop\drfone_v3.2.0.170.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(20)

# 同意协议【Agree】
driver.find_element_by_id('android:id/button2').click()

# 点击【Backup】
driver.find_element_by_id('com.wondershare.drfone:id/btnBackup').click()

# 点击【Next】
WebDriverWait(driver,30).until(lambda x:x.find_element_by_id('com.wondershare.drfone:id/btnRecoverData'))
driver.find_element_by_id('com.wondershare.drfone:id/btnRecoverData').click()

# 等待WebView页面加载
WebDriverWait(driver,20).until(lambda x:x.find_element_by_class_name('android.webkit.WebView'))
# 获取所有WebView并打印显示
contexts=driver.contexts
print(contexts)

# 转换到此apk关联的WebView；根据Chrome浏览器定位到邮箱输入框，输入并提交
driver.switch_to.context('WEBVIEW_com.wondershare.drfone')
driver.find_element_by_id('email').send_keys('[email protected]')
driver.find_element_by_class_name('btn_send').click()

# 转换回到Android原生的WebView；点击左上角返回键
driver.switch_to.context('NATIVE_APP')
driver.find_element_by_class_name('android.widget.ImageButton').click()

备注：
H5页面内的元素定位，通过在PC的Chrome浏览器访问H5页面，采用Selenium自动化中元素定位即可

<关联> [SP_03] Selenium WebDriver定位元素的9种方式及操作