混合元素app的H5元素定位
问题思考
在混合开发的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)。
H5元素定位环境搭建
资源下载
- Chrome PC浏览器:
- 手机版 Chrome
手机上安装Chrome最好到Google play去安装,手机上没有Google play可以先安装一个“GO谷歌安装器” 安装后注册Google play账号(由于众所周知的网络原因,Googleplay大陆地区无法使用)
- Chrome driver 下载地址
chrome driver要与Chrome的版本对应:
chromediver路径 一般位于appium路径中的...\node_modules\appium-chromedriver\chromedriver\win里面,如下所示:运行chromedriver.exe可以查看到当前的版本信息。
C:\Users\Shuqing\AppData\Roaming\npm\node_modules\appium\node_modules\appium-chromedriver\chromedriver\win
- 逍遥模拟器(夜神模拟器由于操作系统兼容问题,无法获取Webview context)
- dr.fone app 3.2.0
Tips:
以上所需资源可以在视频下方【获取素材】中第四章软件素材——《H5元素定位软件全家桶》文件夹中获取!
操作步骤
- 手机与电脑连接,开启USB调试模式,通过adb devices可查看到此设备。(设备系统Android 5.0以上)
- 电脑端、移动端必须安装chrome浏览器。(尽量保证移动端chrome版本与PC端一致)根据对应的Chrome浏览器版本安装对应的Chrome driver。
- App Webview开启debug模式
- 在电脑端Chrome浏览器地址栏输入chrome://inspect/#devices,进入调试模式
- 执行测试脚本
- 打开app对应的h5页面,在 chrome://inspect/#devices 地址中,检查是否显示对应的webview,如没有,则当前未开启调试模式。
- 在自动化脚本中,进入到对应的H5页面,打印输出当前context,如果一直显示为Natvie App,则webview未开启。
Webview 调试模式检查与开启
基础检查方式
开启方式
在app中配置如下代码(在WebView类中调用静态方法setWebContentsDebuggingEnabled):
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
需求分析
- 先进入到H5页面,然后切换到context,再进行相关元素定位操作。
- conetext切换:可以通过contexts()方法来获取到页面的所有context,然后切换到H5页面的context
- 在H5页面进行元素定位操作
获取方法实践
contexts=driver.contexts
print(contexts)
#打印结果
['NATIVE_APP', 'WEBVIEW_com.android.launcher', 'WEBVIEW_com.wondershare.drfone', 'WEBVIEW_com.psiphon3']
代码实现
by_h5.py
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:\Users\Shuqing\Desktop\dr.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)
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()
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()
报错&解决方案
报错1
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
error: Chromedriver: Chromedriver exited unexpectedly with code null, signal SIGTERM
【解决方案】
下载对应版本的chromedriver驱动,放置在: {Appium path}\node_modules\appium\node_modules\appium-chromedriver\chromedriver\win 替换即可
参考资料
- https://www.jianshu.com/p/94e0f9ab3f1d
- https://testerhome.com/topics/7866
- https://blog.csdn.net/typename/article/details/40425275
- https://www.cnblogs.com/niansi/p/6754766.html
混合元素app的H5元素定位的更多相关文章
- App自动化《元素定位方式、元素操作、混合应用、分层设计、代码方式执行Pytest 命令》
坚持原创输出,点击蓝字关注我吧 作者:清菡 博客:oschina.云+社区.知乎等各大平台都有. 目录 一.App 元素定位方式 二.元素操作 三.测试混合应用 四.以代码的方式执行 Pytest 命 ...
- python+Appium自动化:H5元素定位
问题思考 在混合开发的App中,经常会有内嵌的H5页面.那么这些H5页面元素该如何进行定位操作呢? 解决思路 针对这种场景直接使用前面所讲的方法来进行定位是行不通的,因为前面的都是基于Andriod原 ...
- appium使用H5怎么定位元素
允许是一个class,如果遇到有多个class,只能填写一个. 对于移动端H5元素定位采用Chromedriver的解决方案,具体操作如下: 1.手机安装Chrome浏览器 2.开启USB调试模式,并 ...
- Appium自动化测试之微信h5元素识别和代码实战
总会有人问微信的自动化测试怎么做.其实我不太明白,为啥你要对ta做自动化测试啊,除非你们公司产品是基于微信做的开发否则没必要.即使一个公众号我也觉得没必要做自动化测试,基本功能点下没问题就可以了,毕竟 ...
- H5元素
下面整理下我用到的H5元素 placeholder 显示input输出口的默认提示文本 <input type="search" name="user_search ...
- html css样式子元素相对父级元素定位
废话不多说. 父级元素 样式设置: position:relative; 子元素样式: position: absolute; 这样就可以达到子元素相对父级元素定位了.
- 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖
今天上午学习了内联元素于与块元素的转换 个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline; 转换成块元素displ ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- 【Python】xpath中为什么粘贴进去代码后老报错?如何在定位元素的时候准确找到定位切入点?
1. xpath后()中双引号("")里面不能套用双引号(""),把里面的双引号改成单引号('')报错就没有了. 2.如何在定位元素的时候准确找到定位切入点? ...
随机推荐
- [转]使用代码去描述WCF配置文件
转自:使用代码去描述WCF配置文件 在应用程序部署的时候,WCF客户端因为服务器地址的变化,需要修改程序配置文件的地址URL,手动修改很不方便,还会造成错误,所以尽量把描述WCF配置文件的配置使用代码 ...
- MongoDB学习笔记一:MongoDB的下载和安装
MongoDB学习笔记一:MongoDB的下载和安装 趁着这几天比較空暇,准备学习一下MongoDB数据库.今天就简单的学习了一些MongoDB的下载和安装.并创建了存储MongoDB的数据仓库. 将 ...
- 迭代器和iter()函数
1.先来个样例,有个初步的印象: myTuple=(123,'xyz',45.67) i=iter(myTuple) i.next() 123 i.next() 'xyz' i.next() 45.6 ...
- 开源 免费 java CMS - FreeCMS1.8 留言管理
项目地址:http://code.google.com/p/freecms/ 留言管理 管理当前管理网站的留言数据. 1. 回复留言 选择须要回复的留言.然后点击"回复". 注意: ...
- Windows移动开发(五)——初始XAML
关于详细的基本功就先说这么多.后面遇到再补充说明,前面说的都是一些代码和原理方面的东西.接下来说的会有界面和代码结合,会有成就感,由于能真正的做出东西来了. Windows移动开发包含Windows ...
- 弹出框中选项卡的运用(easyUI)
先看一下页面效果: 此处有两个知识点:一个是弹出框的运用,一个是选项卡的运用 分析一下该HTML代码,最外面一个div是弹出框的,默认是关闭状态,可通过ID来控制弹出框的开关,该div的样式是easy ...
- Android shape自定义形状,设置渐变色
<?xml version="1.0" encoding="utf-8"?> <!-- android:shape=["rect ...
- EOJ 1641/UVa The SetStack Computer
Background from Wikipedia: “Set theory is a branch of mathematics created principally by the German ...
- Bootstrap 只读输入框
只读输入框 为输入框设置 readonly 属性可以禁止用户输入,并且输入框的样式也是禁用状态. <input class="form-control" type=&qu ...
- AMD 与 CMD 区别
作者:玉伯链接:https://www.zhihu.com/question/20351507/answer/14859415来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...