Android H5元素定位

2021-08-09 10:51:19 浏览数 (1)

问题思考

在混合开发的App中，经常会有内嵌的H5页面。那么这些H5页面元素该如何进行定位操作呢？

解决思路

针对这种场景直接使用前面所讲的方法来进行定位是行不通的，因为前面的都是基于Andriod原生控件进行元素定位，而Web网页是单独的B/S架构，两者的运行环境不同因此需要进行上下文（context）切换，然后对H5页面元素进行定位操作。

context

简介

Context的中文翻译为：语境; 上下文; 背景; 环境，在开发中我们经常说“上下文”，那么这个“上下文”到底是指什么意思呢？

Android源码中的注释是这么来解释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

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的底层内核支持。

这里简单介绍下基于Chromium的Webview和基于Webkit webview的差异，基于Chromium Webview提供更广的HTML5,CSS3,Javascript支持，在目前最新Android 系统版本5.0上基于chromium 37，Webview提供绝大多数的HTML5特性支持。Webkit JavaScript起采用WebCore Javascript 在Android 4.4上换成了V8能直接提升JavaScript性能。另外Chromium 支持远程调试(Chrome DevTools)。

WebView版本查看

  • 方法一：手机上设置中查看:设置-->应用程序管理-->全部-->Android System WebView
  • 方式二：直接在浏览器中打开地址:https://liulanmi.com/labs/core.html

H5元素定位环境搭建

资源下载

  • Chrome PC浏览器：
  1. 官网下载地址
  2. 国内站点下载
  • 手机版 Chrome

手机上安装Chrome必须Google play去安装，手机上没有Google play可以先安装一个“GO谷歌安装器” 安装后注册Google play账号（由于众所周知的网络原因，Googleplay大陆地区无法使用）

  • Chrome driver 下载地址
  • 注意：chrome driver要与设备Android System WebView版本对应,否则不支持。

Appium Chromedriver 官方说明文档 chromediver路径 一般位于appium路径中的...node_modulesappium-chromedriverchromedriverwin里面，如下所示：运行chromedriver.exe可以查看到当前的版本信息。

代码语言：javascript复制
C:UsersShuqingAppDataRoamingnpmnode_modulesappiumnode_modulesappium-chromedriverchromedriverwin
  • 逍遥模拟器（夜神模拟器由于操作系统兼容问题，无法获取Webview context）
  • dr.fone app 3.2.0
操作步骤
  1. 手机与电脑连接，开启USB调试模式，通过adb devices可查看到此设备。（设备系统Android 5.0以上）
  2. 电脑端、移动端必须安装chrome浏览器。（尽量保证移动端chrome版本与PC端一致,手机端必须通过google play安装Chrome）根据对应的Chrome浏览器版本安装对应的Chrome driver。PC端需要拨VPN
  3. App Webview开启debug模式
  4. 在电脑端Chrome浏览器地址栏输入chrome://inspect/#devices，进入调试模式,点击 inspect可以打开H5调试页面。如下图所示
  5. 执行测试脚本

Webview 调试模式检查与开启

基础检查方式
  1. 打开app对应的h5页面，在 chrome://inspect/#devices 地址中，检查是否显示对应的webview，如没有，则当前未开启调试模式。
  2. 在自动化脚本中，进入到对应的H5页面，打印输出当前context,如果一直显示为Natvie App，则webview未开启。
开启方式

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

代码语言：javascript复制
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
 WebView.setWebContentsDebuggingEnabled(true);

注：此步骤，一般需要App开发人员开启。

H5定位实践案例

测试场景

启动dr.fone app 进入backup H5页面中的输入邮箱并点击提交，然后返回

测试环境

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

需求分析

  1. 先进入到H5页面，然后切换到context,再进行相关元素定位操作。
  2. conetext切换：可以通过contexts()方法来获取到页面的所有context,然后切换到H5页面的context
  3. 在H5页面进行元素定位操作

获取方法实践

代码语言：javascript复制
contexts=driver.contexts
print(contexts)   

#打印结果
['NATIVE_APP', 'WEBVIEW_com.android.launcher', 'WEBVIEW_com.wondershare.drfone', 'WEBVIEW_com.psiphon3']

代码实现

by_h5.py

代码语言：javascript复制
from  appium import webdriver
from selenium.webdriver.support.ui import WebDriverWait

desired_caps={}
desired_caps['platformName']='Android'
desired_caps['platformVersion']='5.1.1'
desired_caps['deviceName']='127.0.0.1:21503'

desired_caps['app']=r'C:UsersShuqingDesktopdr.fone3.2.0.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)

#点击Backup菜单
print('click BackupBtn')
driver.find_element_by_id('com.wondershare.drfone:id/btnBackup').click()

#等待next菜单，然后点击
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()

#等待webview页面加载
WebDriverWait(driver,8).until(lambda x:x.find_element_by_class_name('android.webkit.WebView'))
contexts=driver.contexts
print(contexts)


#需android4.4及以上版本的系统中才会输出更多的webview
print('switch conetext')
driver.switch_to.context('WEBVIEW_com.wondershare.drfone')
print('edit email')
driver.find_element_by_id('email').send_keys('shuqing@wondershare.cn')
print('click sendBtn')
driver.find_element_by_class_name('btn_send').click()

#切换context 点击返回
driver.switch_to.context('NATIVE_APP')
driver.find_element_by_class_name('android.widget.ImageButton').click()

报错&解决方案

Chromedriver版本和设备Android System Webview版本不一致

报错1

代码语言：javascript复制
raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.WebDriverException:Message: An unknown server-side error occurred while processing the command.
Original error: Failed to start Chromedriver session: A new session could not be created.
(Original error: session not created exception: Chrome version must be >= 60.0.3112.0

报错2

代码语言：javascript复制
error: Chromedriver: Chromedriver exited unexpectedly with code null, signal SIGTERM

【解决方案】

  1. 手机查看Android System WebView版本 设置>应用程序管理>全部，查找到Android System WebView应用
  2. 下载对应版本的chromedriver驱动，放置在如下位置 替换即可。
代码语言：javascript复制
{Appium path}node_modulesappiumnode_modulesappium-chromedriverchromedriverwin

Mac路径

代码语言：javascript复制
/Applications/Appium.app/Contents/Resources/app/node_modules/appium/node_modules/appium-chromedriver/chromedriver/mac

效果演示

更多干货

  • Windows环境Appium自动化测试环境搭建
  • Mac 环境Appium自动化测试环境搭建
  • 众里寻他千百度—Appium Android 元素定位方式
  • UIAutomator定位简介
android html 网站 html5 webview

0 人点赞