Appium: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:UsersAdministratorAppDataRoamingnpmnode_modulesappiumnode_modulesappium-chromedriverchromedriverwin
【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,点击返回键

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

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

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

(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

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

(2)Android设备:127.0.0.1:21503

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

(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"

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

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:UsersAdministratorDesktopdrfone_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('xxxxx@yyy.com')
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()
[AP_11] APP中内嵌H5页面-元素定位环境搭建

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

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

One Pingback

留言

本站文章如未特殊注明,均为原创,转载请注明出处: 未必平凡  本文链接地址: https://vv2014.com/882.html