混合元素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浏览器:
  1. 官网下载地址
  2. 国内站点下载
  • 手机版 Chrome

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

chrome driver要与Chrome的版本对应:

ChromeDriver版本与Chrome版本对应表

Appium Chromedriver 官方说明文档

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元素定位软件全家桶》文件夹中获取!

操作步骤

  1. 手机与电脑连接,开启USB调试模式,通过adb devices可查看到此设备。(设备系统Android 5.0以上)
  2. 电脑端、移动端必须安装chrome浏览器。(尽量保证移动端chrome版本与PC端一致)根据对应的Chrome浏览器版本安装对应的Chrome driver。
  3. App Webview开启debug模式
  4. 在电脑端Chrome浏览器地址栏输入chrome://inspect/#devices,进入调试模式
  5. 执行测试脚本
  6. 打开app对应的h5页面,在 chrome://inspect/#devices 地址中,检查是否显示对应的webview,如没有,则当前未开启调试模式。
  7. 在自动化脚本中,进入到对应的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页面中的输入邮箱并点击提交,然后返回

测试环境

需求分析

  1. 先进入到H5页面,然后切换到context,再进行相关元素定位操作。
  2. conetext切换:可以通过contexts()方法来获取到页面的所有context,然后切换到H5页面的context
  3. 在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(‘[email protected]‘)

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.cnblogs.com/xuzhongtao/p/9723210.html

时间: 2024-08-29 13:37:26

混合元素app的H5元素定位的相关文章

[ jquery 过滤器 offsetParent() ] 此方法用于在选择器的基础之上搜索被选元素有定位的父级元素,仅对可见元素有效

此方法用于在选择器的基础之上搜索被选元素有定位的父级元素,仅对可见元素有效: 返回第一个匹配元素用于定位的父节点,这返回父元素中第一个其position设为relative或者absolute的元素,此方法仅对可见元素有效 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my pa

Position属性——定义元素在窗口中的定位类型

说明:定义建立元素布局所用的定位机制. 注释:任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 可用的值: absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. fixed:生成绝对定位的元素,相对于浏览器

当子元素需要相对父元素定位时,父元素无法被子元素撑大该怎么办

今天遇到了子元素相对父元素定位之后,父元素无法被撑开的问题,那是因为绝对定位之后,子元素已经脱离文档流了所以无法用自身的高度把父元素撑开,这个时候只能用js来解决这个问题了: function psize(){ $("父元素").css('height',$("子元素").innerHeight()); } 上面是封装了一个函数,可以通过调用使用. height与innerHeight 的具体情况请看上一篇随笔.

让一个元素相对于父元素固定定位

之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元素跟着一起滑动.但是position: fixed是相对于窗口进行的定位,不能直接实现我们需要的效果. 我们想让特定子元素相对于父元素"fixed"定位,也就是说,剩余的子元素不定位.那我们可以分开来想,如果添加一个祖先元素assistor,有两个祖先元素,一个用于辅助定位,一个用于包裹不定位的内容

【Python】xpath中为什么粘贴进去代码后老报错?如何在定位元素的时候准确找到定位切入点?

1. xpath后()中双引号("")里面不能套用双引号(""),把里面的双引号改成单引号('')报错就没有了. 2.如何在定位元素的时候准确找到定位切入点? 要巧妙运用F12,确定要定位的页面元素后,看元素相关属性值是否在页面中的代码中是唯一的(如果有id值可以用id值去定位,一般页面中的id值都是唯一性的),否则可以通过Ctrl+F 将准备试用定位元素的属性值搜索看看该页面是否有相同的值,如果有那么就不能用这个属性值定位,如果没有那么就可以用这个属性值定位啦~这

html css样式子元素相对父级元素定位

废话不多说. 父级元素 样式设置: position:relative; 子元素样式: position: absolute; 这样就可以达到子元素相对父级元素定位了. 原文地址:https://www.cnblogs.com/bubbletg/p/10225288.html

层叠和继承的概念,选择器的优先级,盒模型,元素在页面上的定位体系,常规流

1.层叠和继承的概念: CSS层叠性是指CSS样式在针对同一元素配置同一属性是,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠. 继承:子元素会自动拥有父元素的某些CSS属性,通常来说,文本类的属性会被继承(字体.字号.颜色) 2.选择器的优先级 !important>id选择器>类选择器>标签选择器>子选择器>后代选择器>伪类选择器 3.盒模型 在网页中,一个盒子占有空间的大小由几个部分构成

元素在页面上的定位体系

共有三大体系:常规流(normal flow) 浮动(float) 绝对定位(absolute position) 常规流:在没有css的干预下,块级元素独占一行,宽高可设:行内元素并排显示,宽高自动. 当元素浮动后,脱离文档流.因为子级元素浮动后导致父级高度坍塌. 浮动:1.左浮动的元素向上向左排列 2.右浮动的元素向上向右排列: 3.浮动盒子的顶边不得高于上一个盒子的顶边: 4.若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左边或右移动(包裹性:块级元

CSS块级元素、内联元素概念

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即