Html5 webview元素定位工具的实现


Posted in HTML / CSS onAugust 07, 2020

一、工具选择

webview元素定位有三种方式:

  • 使用driver.page_source方法,将获取到的页面内容写入到一个html文件中,然后使用浏览器打开html文件,使用F12调试用具进行元素定位
  • chrome浏览器自带的调试工具 Developer Tools,在chrome浏览器中输入:chrome://inspect#devices,该工具需要访问国外的网站,因此需要翻墙
  • 使用UC开发者调试工具,需要提前安装,无需翻墙

综上,推荐使用UC开发者调试工具

二、UC-devtools安装

1.百度搜索“uc-devtools”

Html5 webview元素定位工具的实现

2.点击进入安装包下载页面

Html5 webview元素定位工具的实现

Html5 webview元素定位工具的实现

3.下载Windows安装包进行安装

解压后双击安装,根据提示安装,建议更改安装路径,安装完成后,在安装目录下启动应用程序

Html5 webview元素定位工具的实现

4.启动前准备

启动之前,依然要打开app的debug调试模式,手机需要打开“USB调试模式”,启动后的界面如下:

Html5 webview元素定位工具的实现

5.设置为本地 Devtools Inspector UI 资源

Html5 webview元素定位工具的实现

三、UC-开发者调试工具的使用

开启了UC-开发者调试工具后,手机开启app到webview页面,就会自动显示webview相关信息

Html5 webview元素定位工具的实现

点开inspect,就会弹出html的页面

Html5 webview元素定位工具的实现

这个结构就跟web的html页面元素基本一致,我们可以通过该工具使用selenium的一些元素定位方法进行定位即可

四、匹配webview的chromedriver版本

我们从第三项关注到UC-开发者调试工具首页显示了chrome版本信息,当然该webview也需要有对应版本的chromedriver驱动去跟浏览器版本匹配,我们之前都是将chromedriver驱动文件放在了python的安装目录下,但是在这里因为每个webview都会涉及到不同的驱动版本,这时我们该如何管理呢?具体步骤如下:

下载对应chrome浏览器版本的chromedriver驱动

创建一个chromedriver驱动的不同版本管理目录

Html5 webview元素定位工具的实现

将对应版本的chromedriver驱动放在对应的管理目录下

指定chromedriver驱动,通过启动参数chromedriverExecutable指定路径

desired_caps['chromedriverExecutable'] = r'G:\ChromeVersionManagement\chromedriver70\chromedriver.exe'

到此这篇关于Html5 webview元素定位工具的实现的文章就介绍到这了,更多相关Html5 webview元素定位内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 #HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 #HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 #HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 #HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 #HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 #HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 #HTML / CSS
You might like
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
Python微信操控itchat的方法
2019/05/31 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
外贸公司实习自我鉴定
2013/09/24 职场文书
自荐信范文
2013/12/10 职场文书
园林施工员岗位职责
2013/12/11 职场文书
南京导游词
2015/02/03 职场文书