05-对混合app应用中的元素进行定位

2024-06-19 22:36
文章标签 05 app 定位 元素 混合 应用 进行

本文主要是介绍05-对混合app应用中的元素进行定位，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

        本文介绍对于混合app应用中的元素如何进行定位。

一、app的类型

1）Native App（原生应用）

        原生应用是指利用Android、IOS平台官方的开发语言、开发类库、工具等进行开发的app应用，在应用性能和交互体验上应该是最好的。

        通俗点来讲，原生开发就像盖房子一样，先打地基然后浇地梁、房屋结构、一砖一瓦、钢筋水泥、电路走向等，都是经过精心的设计。原生app也一样：将每个页面、每个功能、每个效果、每个逻辑、每个步骤全部用代码一层层、一段段的写出来。

优点：

  • 可访问手机所有功能、可实现功能最齐全。
  • 运行速度快、性能高，绝佳的用户体验。
  • 支持大量图形和动画。不卡，反应快。
  • 比较快捷地使用设备端提供的接口，处理速度上有优势。

缺点：

  • 在过去主要是成本高、周期长，Android和iOS都需要单独开发。
  • 更新版本需要重新下载安装包。        
2）Web App（Web版应用）

        Web版应用是利用Web技术进行开发的，通过浏览器进行访问。Web版应用需要浏览器的支持才能进行展示和用户交互，因此主要用到的技术是HTML5、Javascript、CSS等。HTML5支持一些新标签和脚本，可以做出类似原生应用的效果和动画。

优势：

  • 支持范围广。
  • 开发成本低、周期短。

缺点：

  • 对联网要求高，离线不能做任何操作。
  • 功能有限。
  • 运行速度慢，页面不能承载太多东西。
  • 图片和动画支持性不高。
  • 如果用户使用更多的新型浏览器，那么运行过程中容易出现问题。
3）Hybrid App（混合应用）

        混合应用是利用了原生app的开发技术和HTML5技术进行开发的app应用，是原生和HTML5技术的混合应用，混合比例不限。

        混合开发是一种取长补短的开发模式，原生代码中利用Web View插件或者其它框架为H5提供容器，程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。比如京东、淘宝、今日头条等app都是利用混合开发模式而成的。

优点：

  • 开发周期短。
  • 功能更新发布快。

缺点：

  • 用户体验不如原生应用。
  • 性能稍慢（需要连接网络）。

二、webview的概述

        现在大部分app都是混合式的native+webview，对于native上的元素通过uiautomatorviewer很容易定位到，而对于webview上的元素就无法识别了。

1）什么是webview？

        WebView直译是网页视图，是一个基于webkit内核的，用于显示网页的控件，具备渲染Web页面的功能。Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4后直接使用了Chrome浏览器的内核。

        WebView可以将Web网页内嵌在移动端，实现前端的混合式开发，大多数混合式开发框架都是基于WebView模式进行二次开发的，比如：uni-app、Hybrid app等。

2）webview的作用
  • 显示和渲染Web页面。
  • 直接使用html文件（网络上或本地assets中）作布局。
  • 可以和JavaScript交互调用。

        WebView控件功能强大，除了具有一般View的属性和设置外，还可以对url请求、页面加载、渲染、页面交互进行强大的处理。

3）webview的优点
  • 一次开发，多系统适配，节省人力成本和时间成本。

        用H5开发的页面内容可以跨平台使用。无论你用的安卓还是苹果，你的淘宝app里都是H5页面。也就是一次开发，多系统适配，是不是节省了人力成本和时间成本？

        如果不用混合开发这种方式，就得找安卓工程师开发安卓端的、苹果IOS工程师开发苹果的，需要开发两次，是不是很麻烦？

  • Web更新方式为线上即时更新，不用下载安装补丁包。

        你想想，你玩王者或吃鸡吗？这些游戏里的游戏内容都是原生开发的，每次更新你都得先下载安装包吧？当然，打开游戏经常会有一些类似活动公告、说明公告等一些窗口，这些可能也是由WebView嵌入的Web页面。也就是说，原生app里嵌入的Web内容所占比例可大可小，根据需求，对于适合WebView的模块，我们就可以选择用WebView实现它。

        而WebView中嵌入的网页更新需要下载安装包吗？更新后的内容即时上线，根本不需要下载安装包，这样对于用户来讲就很舒服。

  • H5性能不断提高。

　　实际上，H5页面的交互、渲染性能肯定是比不上原生的。但随着H5技术的加快发展，加上5G网络的普及化，性能这一块就逐渐不再成问题了。典型的案例就是电商类app应用，性能差距基本看不出来，用户体验还是很舒服的。

        当然，像游戏这类应用，牵扯到渲染引擎性能的问题，对于这点，Web渲染引擎还是不太够用的，对比安卓原生或IOS原生应用，效果太差。

三、识别webview

        用uiautomatorviewer定位工具查看页面，发现页面上有些区域是无法定位到的，如下图左边红色区域，只能定位到这个大红框，红框里面的元素是无法识别的。

        查看该红色框的属性，它的class属性值为WebView，那毫无疑问这种页面就是webview了。

四、获取contexts

        contexts是上下文环境，类似于selenium中的句柄（handle），用于区分不同的环境。

        获取应用当前显示页面的contexts上下文，如下图红框内容所示，获取到的是一个list列表：

  • NATIVE_APP：这个就是native。
  • WEBVIEW_com.xxxx：这个就是webview。

        当看到这样的打印结果，就说明获取到了webview的上下文了（当然有的app有坑，明明有webview，却通过contexts获取不到， 那是开发没打开webview调试）。

from appium import webdriver
import time# 设置启动参数
desired_cap = {}
desired_cap['platformName'] = 'Android'
desired_cap['platformVersion'] = '6.0.1'
desired_cap['deviceName'] = '127.0.0.1:7555'
# 必须参数，指定被测软件的包名
desired_cap['appPackage'] = 'com.android.browser'
# 必须参数，指定要打开app的哪个页面
desired_cap['appActivity'] = '.BrowserActivity'
desired_cap['automationName']='Uiautomator2'
desired_cap['noReset'] = True
desired_cap['newCommandTimeout'] = 6000
desired_cap['unicodeKeyboard'] = True
desired_cap['resetKeyboard'] = Truedriver = webdriver.Remote('http://localhost:4723/wd/hub', desired_cap)
time.sleep(5)# 获取当前页面所有的上下文环境
print(driver.contexts)

五、从native切换到webview

        要想操作webview上的元素，第一步需要切换环境（与selenium中切换iframe、切换handle思路是一样的）。

        切换方法是：switch_to.context（参数是webview的上下文）。

        根据上述打印结果可知，获取到contexts是一个list列表对象，所以这里取这个列表中的第二个参数即可，也就是contexts[1]。

from appium import webdriver
import time# 设置启动参数
desired_cap = {}
desired_cap['platformName'] = 'Android'
desired_cap['platformVersion'] = '6.0.1'
desired_cap['deviceName'] = '127.0.0.1:7555'
# 必须参数，指定被测软件的包名
desired_cap['appPackage'] = 'com.android.browser'
# 必须参数，指定要打开app的哪个页面
desired_cap['appActivity'] = '.BrowserActivity'
desired_cap['automationName']='Uiautomator2'
desired_cap['noReset'] = True
desired_cap['newCommandTimeout'] = 6000
desired_cap['unicodeKeyboard'] = True
desired_cap['resetKeyboard'] = Truedriver = webdriver.Remote('http://localhost:4723/wd/hub', desired_cap)
time.sleep(5)# 1.获取当前页面所有的上下文环境
all_context = driver.contexts
print(all_context)# 2.从native切换到webview
driver.switch_to.context(all_context[1])# 3.打印当前的上下文环境，查看是否切换成功
print(driver.current_context)
1）报错分析

        执行上面程序，报错：Unable to automate Chrome version because it is too old for this version of Chromedriver.

        Android的webview使用的是chrome浏览器的内核，这里的报错是说webview的chrome版本号和chromedriver驱动的版本号不匹配。

2）解决办法
  • 首先，查看webview的chrome版本号是多少？

        在电脑chrome浏览器中输入：chrome://inspect/#devices，点开手机设备的浏览器，随便打开一个网页，点击电脑chrome浏览器的刷新按钮，就会出现webview的chrome版本号信息。

  • 然后，下载chrome版本号相对应的chromedriver驱动。

        找到webview的chrome版本号之后，下载对应的chromedriver驱动就可以了。下载地址：chromedriver.storage.googleapis.com/index.html。

  • 最后，将不匹配的chromedriver驱动进行替换。

3）执行结果

        解决报错之后，重新执行代码，执行结果如下：

六、从webview切换到native

        在webview上操作完之后，想返回到native上操作，这时候需要先切回来，切回native有两个方法：

  • driver.switch_to.context("NATIVE_APP") # 这个NATIVE_APP是固定的参数
  • driver.switch_to.context(contexts[0])        # 从contexts列表中取第一个参数
from appium import webdriver
import time# 设置启动参数
desired_cap = {}
desired_cap['platformName'] = 'Android'
desired_cap['platformVersion'] = '6.0.1'
desired_cap['deviceName'] = '127.0.0.1:7555'
# 必须参数，指定被测软件的包名
desired_cap['appPackage'] = 'com.android.browser'
# 必须参数，指定要打开app的哪个页面
desired_cap['appActivity'] = '.BrowserActivity'
desired_cap['automationName']='Uiautomator2'
desired_cap['noReset'] = True
desired_cap['newCommandTimeout'] = 6000
desired_cap['unicodeKeyboard'] = True
desired_cap['resetKeyboard'] = Truedriver = webdriver.Remote('http://localhost:4723/wd/hub', desired_cap)
time.sleep(5)# 1.获取当前页面所有的上下文环境
all_context = driver.contexts
print(all_context)# 2.从native切换到webview
driver.switch_to.context(all_context[1])# 3.打印当前的上下文环境，查看是否已切换到webview
print(driver.current_context)# 4.从webview切换到native
driver.switch_to.context(all_context[0])# 5.打印当前的上下文环境，查看是否已切换回native
print(driver.current_context)

七、使用DevTools工具对webview上的元素进行定位

        app应用中webview内嵌的页面是基于chrome浏览器的内核加载的，在电脑上的chrome浏览器中有个开发者调试工具DevTools，可以很方便的对webview上的元素进行定位。

1）启动DevTools工具
  1. 电脑上打开chrome浏览器，输入：chrome://inspect/#devices。
  2. Discover USB devices 这个要勾选的，可以检测到手机设备。
  3. Discover network targets 这个要勾选的，可以检测到网络。
  4. 下图箭头指向的，是手机的设备名称。
  5. WebView in com.android.browser (91.0.4472.114) 这个是手机浏览器中的chrome内核版本号。

2）定位元素

        上图红框中的地址就是电脑chrome浏览器加载到的手机设备中webview的网页地址，点击地址下的inspect按钮，进入调试界面。

        接下来的元素定位就跟selenium的定位是一回事了。

3）示例代码

        这里首先定位webview中的百度搜索输入框，然后输入内容，最后点击 “百度一下” 按钮。

from appium import webdriver
import time# 设置启动参数
desired_cap = {}
desired_cap['platformName'] = 'Android'
desired_cap['platformVersion'] = '6.0.1'
desired_cap['deviceName'] = '127.0.0.1:7555'
# 必须参数，指定被测软件的包名
desired_cap['appPackage'] = 'com.android.browser'
# 必须参数，指定要打开app的哪个页面
desired_cap['appActivity'] = '.BrowserActivity'
desired_cap['automationName']='Uiautomator2'
desired_cap['noReset'] = True
desired_cap['newCommandTimeout'] = 6000
desired_cap['unicodeKeyboard'] = True
desired_cap['resetKeyboard'] = Truedriver = webdriver.Remote('http://localhost:4723/wd/hub', desired_cap)
time.sleep(5)# 1.获取当前页面所有的上下文环境
all_context = driver.contexts
print(all_context)# 2.从native切换到webview
driver.switch_to.context(all_context[1])# 3.打印当前的上下文环境，查看是否已切换到webview
print(driver.current_context)# 4.定位输入框后，输入内容，并进行搜索
driver.find_element('id', 'index-kw').clear()
driver.find_element('id', 'index-kw').send_keys('python')
driver.find_element('id', 'index-bn').click()

这篇关于05-对混合app应用中的元素进行定位的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1076340。

相关文章

大语言模型（LLMs）能够进行推理和规划吗？

大语言模型（LLMs）能够进行推理和规划吗？

大语言模型（LLMs），基本上是经过强化训练的 n-gram 模型，它们在网络规模的语言语料库（实际上，可以说是我们文明的知识库）上进行了训练，展现出了一种超乎预期的语言行为，引发了我们的广泛关注。从训练和操作的角度来看，LLMs 可以被认为是一种巨大的、非真实的记忆库，相当于为我们所有人提供了一个外部的系统 1（见图 1）。然而，它们表面上的多功能性让许多研究者好奇，这些模型是否也能在通常需要系
阅读更多...
亮相WOT全球技术创新大会，揭秘火山引擎边缘容器技术在泛CDN场景的应用与实践

亮相WOT全球技术创新大会，揭秘火山引擎边缘容器技术在泛CDN场景的应用与实践

2024年6月21日-22日，51CTO“WOT全球技术创新大会2024”在北京举办。火山引擎边缘计算架构师李志明受邀参与，以“边缘容器技术在泛CDN场景的应用和实践”为主题，与多位行业资深专家，共同探讨泛CDN行业技术架构以及云原生与边缘计算的发展和展望。 火山引擎边缘计算架构师李志明表示：为更好地解决传统泛CDN类业务运行中的问题，火山引擎边缘容器团队参考行业做法，结合实践经验，打造火山
阅读更多...
自制的浏览器主页，可以是最简单的桌面应用，可以把它当成备忘录桌面应用

自制的浏览器主页，可以是最简单的桌面应用，可以把它当成备忘录桌面应用

自制的浏览器主页，可以是最简单的桌面应用，可以把它当成备忘录桌面应用。如果你看不懂，请留言。 完整代码： <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><ti
阅读更多...
Python应用开发——30天学习Streamlit Python包进行APP的构建（9）

Python应用开发——30天学习Streamlit Python包进行APP的构建（9）

st.area_chart 显示区域图。 这是围绕 st.altair_chart 的语法糖。主要区别在于该命令使用数据自身的列和指数来计算图表的 Altair 规格。因此，在许多 "只需绘制此图 "的情况下，该命令更易于使用，但可定制性较差。 如果 st.area_chart 无法正确猜测数据规格，请尝试使用 st.altair_chart 指定所需的图表。 Function signa
阅读更多...
时间服务器中，适用于国内的 NTP 服务器地址，可用于时间同步或 Android 加速 GPS 定位

时间服务器中，适用于国内的 NTP 服务器地址，可用于时间同步或 Android 加速 GPS 定位

NTP 是什么？   NTP 是网络时间协议（Network Time Protocol），它用来同步网络设备【如计算机、手机】的时间的协议。 NTP 实现什么目的？   目的很简单，就是为了提供准确时间。因为我们的手表、设备等，经常会时间跑着跑着就有误差，或快或慢的少几秒，时间长了甚至误差过分钟。 NTP 服务器列表 最常见、熟知的就是 www.pool.ntp.org/zo
阅读更多...
气象站的种类和应用范围可以根据不同的分类标准进行详细的划分和描述

气象站的种类和应用范围可以根据不同的分类标准进行详细的划分和描述

气象站的种类和应用范围可以根据不同的分类标准进行详细的划分和描述。以下是从不同角度对气象站的种类和应用范围的介绍： 一、气象站的种类 根据用途和安装环境分类： 农业气象站：专为农业生产服务，监测土壤温度、湿度等参数，为农业生产提供科学依据。交通气象站：用于公路、铁路、机场等交通场所的气象监测，提供实时气象数据以支持交通运营和调度。林业气象站：监测林区风速、湿度、温度等气象要素，为林区保护和
阅读更多...
企业如何进行员工的网络安全意识培训？

企业如何进行员工的网络安全意识培训？

企业网络安全意识培训的重要性         企业网络安全意识培训是提升员工网络安全素质的关键环节。随着网络技术的快速发展，企业面临的网络安全威胁日益增多，员工的网络安全意识和技能水平直接关系到企业的信息安全和业务连续性。因此，企业需要通过系统的网络安全意识培训，提高员工对网络安全的认识和防范能力，从而降低企业在面对潜在安全风险时的损失和影响。 企业网络安全意识培训的方法         企
阅读更多...
LeetCode--220 存在重复元素 III

LeetCode--220 存在重复元素 III

题目 给定一个整数数组，判断数组中是否有两个不同的索引 i 和 j，使得 nums [i] 和 nums [j] 的差的绝对值最大为 t，并且 i 和 j 之间的差的绝对值最大为 ķ。 示例 示例 1:输入: nums = [1,2,3,1], k = 3, t = 0输出: true示例 2:输入: nums = [1,0,1,1], k = 1, t = 2输出: true示例
阅读更多...
LeetCode--217 存在重复元素

LeetCode--217 存在重复元素

题目 给定一个整数数组，判断是否存在重复元素。如果任何值在数组中出现至少两次，函数返回 true。如果数组中每个元素都不相同，则返回 false。 示例 示例 1:输入: [1,2,3,1]输出: true示例 2:输入: [1,2,3,4]输出: false示例 3:输入: [1,1,1,3,3,4,3,2,4,2]输出: true class Solution {p
阅读更多...
PyTorch模型_trace实战：深入理解与应用

PyTorch模型_trace实战：深入理解与应用

pytorch使用trace模型 1、使用trace生成torchscript模型2、使用trace的模型预测 1、使用trace生成torchscript模型 def save_trace(model, input, save_path):traced_script_model = torch.jit.trace(model, input)<
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2