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学习之2D转换功能详解
Dec 23 HTML / CSS
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 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
php 数组使用详解 推荐
2011/06/02 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
PHP常用的三种设计模式
2017/02/17 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
Python中http请求方法库汇总
2016/01/06 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python实现指定ip端口扫描方式
2019/12/17 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
机电专业个人自荐信格式模板
2013/09/23 职场文书
社区工作者先进事迹
2014/01/18 职场文书
师范生自我鉴定
2014/03/20 职场文书
教代会闭幕词
2015/01/28 职场文书
歌舞青春观后感
2015/06/10 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis