auto.js如何解析html
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了auto.js如何解析html相关的知识，希望对你有一定的参考价值。
URL：https://account.cnblogs.com/signin
编写思路(入门级别)
1、打开谷歌浏览器
2、打开博客园登录网页地址
3、在用户名输入框内输入用户名
4、在密码输入框内输入密码
5、点击登录
6、检测是否跳转到了登录成功的页面
脚本如下图:
4feb5d799ae52eea8c1b063cc8c60f85.png
现在我们来分解下输入用户名这个动作
1、首先找到用户名输入框
2、在输入框中输入用户名
【找到用户名输入框】实现此步骤的前提就是需要掌握控件的定位。具体在脚本中实现也就是图中的第11行：
('//*[@autocomplete="username"]')
WEB控件定位所做的事情，就是通过特定的方式找到我们需要操作的页面控件
那么如何才能学会这个控件定位呢？第一步就是简单了解下前端的语言。和我一起往下看即可轻松学会。
二、WEB网页文本—html5
要想掌握WEB自动化测试的控件定位，我们首选要了解控件是什么。
控件就是浏览器展示的前端语言生成对象。
web前端的基础语言就是HTML5
依旧是老套路，拿博客园举例：
5faa8b60ca05f50f4c0d6430574214fd.png
用户打开浏览器，看到的用户名输入框、密码输入框、登陆按钮、立即注册等等所有，都是浏览器展示的HTML5语言的对象。
我们按下F12键即可打开浏览器的调试模式，来查看网页的HTML5源代码。
如下图：
按下F12后右边页面中Elements选项对应的就是网页的html5代码
第一次接触肯定觉得非常晦涩难懂、云里雾里。但是相信我，万事开头难！你在看我自动化测试思维的文章以前不也是觉得自动化测试非常高大上吗?
不了解什么是自动化测试思维？戳下方5分钟即可学会☟☟☟
【自动化测试入门】自动化测试思维
00a821b679ab09e913981cf6a655f861.png
HTML5一个控件的写法一般是2个尖括号成对出现。
一、第一个尖括号的第一个单次为控件类型，之后是控件属性。
二、第二个尖括号表示此控件的尾部。
三、2个尖括号中间为控件在前端显示的文字部分。
举例说明的话。控件类型是狗的类型(中华田园犬、哈巴狗、牧羊犬等)，控件属性就是这条狗的名字、性别、体重、毛发颜色等。2个尖括号中间的文字，就是你想在此页面上展示的这个狗的'名字'。
还是拿博客园的登陆界面举例来说：
点击'小箭头'定位控件，或者在控件处右键选中'检查元素'，即可定位到指定的控件
7b1de1397c71dcde07d8d9da72e61ab5.png 控件的源码为：
<input _ngcontent-miv-c141=""matinput=""formcontrolname="username"placeholder="登录用户名 / 邮箱"autocomplete="username" id="mat-input-0" aria-describedby="mat-error-0" aria-invalid="true" aria-required="false">
input就是控件类型
input以外的就都是控件属性
这个输入框的控件属性有：
_ngcontent-miv-c141=""
matinput=""
formcontrolname="username"
placeholder="登录用户名 / 邮箱"
autocomplete="username"
id="mat-input-0"
aria-describedby="mat-error-0"
aria-invalid="true"
aria-required="false"
三、基于控件的唯一控件属性定位
了解了什么是控件，现在我们在上手控件的定位。
selenium有八种定位控件的方式，有6种都是基于HTML5原生控件的单一控件属性来定位的。
id定位：
find_element_by_id()
name定位：
find_element_by_name()
class定位：
find_element_by_class_name()
tag定位：
find_element_by_tag_name()
link定位：
find_element_by_link_text()
partial_link定位：
find_element_by_partial_link_text()
以下两种为特定的2种控件定位方法，下一篇文章再做详解。 xpath定位：find_element_by_xpath() CSS定位：find_element_by_css_selector()
下面我将举例来讲解这6种基于单一控件属性的定位方法。
还是拿博客园的登陆界面举例来说：
833005656b1e6d0fa4a7e2cc58d875a5.png
登陆用户名的输入框的HTML5源码为：
<input _ngcontent-miv-c141=""matinput=""formcontrolname="username"placeholder="登录用户名 / 邮箱"autocomplete="username" id="mat-input-0" aria-describedby="mat-error-0" aria-invalid="true" aria-required="false">
这个输入框的控件属性有：
_ngcontent-miv-c141=""
matinput=""
formcontrolname="username"
placeholder="登录用户名 / 邮箱"
autocomplete="username"
id="mat-input-0"
aria-describedby="mat-error-0"
aria-invalid="true"
aria-required="false"
对应的定位方法：
id属性来定位此控件
写法为：
find_element_by_id(mat-input-0)
name属性来定位此控件
此控件前端开发没有定义name属性，则无法使用此定位方法
tag属性来定位此控件(控件的类型)
写法为：
find_element_by_tag_name('input')
class属性来定位此控件
写法为：
find_element_by_class_name(mat-input-0)
另外两种定位是针对link属性的控件，也就是链接控件。如下图：
依旧是老老路。使用博客园登陆页举例：
【立即注册】就是页面中的一个link控件，其作用就是跳转到注册页面。
fe0c7b4e9f770591aeaa13a7a9e5ec43.png
_ngcontent-arq-c141="" href="/signup?returnUrl=https:%2F%2Fwww.cnblogs.com%2F">立即注册
他的控件属性有
link定位(通过link控件的文本值)
find_element_by_link_text('立即注册')
但是部分页面会存在，link的文本值非常长，所以就发明了partial_link定位。
如下图中的百度文库的某一页面：
5ddb0ca6201cd203245824c06c9e7932.png link的文本值为：全国2018年10月04741计算机网络原理真题以及答案解析
定位的脚本就可以写成：(只取文本的某一段值即可)
find_element_by_link_text('04741计算机网络')
但是这样的定位方式存在一个致命且常见的问题：
随着前端的技术不断的发展，页面的复杂度越来越高。一个页面的控件越来越多(tag不唯一)，id、name、class_name可能有很多重名或者完全是动态的一串字母(id、name、class_name、link_name可能都不唯一)，我们基于唯一控件属性定位的在特别复杂的项目上可能完全无法完成UI自动化测试的定位工作。 参考技术A 如果只允许你用javascript和html开发程序呢，比如开发adobe air的程序，比如下一步我要做的基于基于内嵌webkit组件的android应用快速开发框架，有时候，轮子还是得自己造的。
我的这个解析实现只是雏形，它以Erik Arvidsson开发的SimpleHtmlParser
作为html的分析器。SimpleHtmlParser是一个基于Sax模型实现的html分析器，他能分析非标准的xml的格式的html别把转换作为一个标准的xml处理。有了这个解析器做基础，我写了个简单的html_extractor，用来分析html并获取指定标记内的内容。
html_extractor的使用
new html_extractor(html): 指定html字符串创建一个html_extractor对象
方法：
tag(tagName):设定一个待匹配的元素名，返回结果为当面的html_extractor对象
attr(attrName, attrValue):设定匹配的属性条件，attr必须在tag后，返回结果为当面的html_extractor对象
match(innerOrNot):执行匹配，返回结果为符合条件的字符串数组。 参考技术B 如果只允许你用javascript和html开发程序呢，比如开发adobe air的程序，比如下一步我要做的基于基于内嵌webkit组件的Android应用快速开发框架，有时候，轮子还是得自己造的。
我的这个解析实现只是雏形，它以Erik Arvidsson开发的SimpleHtmlParser
作为html的分析器。SimpleHtmlParser是一个基于Sax模型实现的html分析器，他能分析非标准的xml的格式的html别把转换作为一个标准的xml处理。有了这个解析器做基础，我写了个简单的html_extractor，用来分析html并获取指定标记内的内容。
html_extractor的使用
new html_extractor(html): 指定html字符串创建一个html_extractor对象
方法：
tag(tagName):设定一个待匹配的元素名，返回结果为当面的html_extractor对象
attr(attrName, attrValue):设定匹配的属性条件，attr必须在tag后，返回结果为当面的html_extractor对象
match(innerOrNot):执行匹配，返回结果为符合条件的字符串数组 参考技术C 如果只允许你用javascript和html开发程序呢，比如开发adobe air的程序，比如下一步我要做的基于基于内嵌webkit组件的Android应用快速开发框架，有时候，轮子还是得自己造的。
我的这个解析实现只是雏形，它以Erik Arvidsson开发的SimpleHtmlParser
作为html的分析器。SimpleHtmlParser是一个基于Sax模型实现的html分析器，他能分析非标准的xml的格式的html别把转换作为一个标准的xml处理。有了这个解析器做基础，我写了个简单的html_extractor，用来分析html并获取指定标记内的内容。
html_extractor的使用
new html_extractor(html): 指定html字符串创建一个html_extractor对象
方法：
tag(tagName):设定一个待匹配的元素名，返回结果为当面的html_extractor对象
attr(attrName, attrValue):设定匹配的属性条件，attr必须在tag后，返回结果为当面的html_extractor对象
match(innerOrNot):执行匹配，返回结果为符合条件的字符串数组。 参考技术D js 解析html文件
js 解析html文件,用Javascript解析html

格秒索杉
转载
关注
1点赞·3286人阅读
说到用Javascript解析html，大家肯定会想到dom或者正则表达式，但这两个都不是我今天我要说的。dom很不错，不过效率不高，而且必须将要解析的html插入到当前页面或者建立一个iframe才能进行，而用正则表达式，又有太过繁琐和难以维护的问题。
有人要说了，ruby、php、python有了那么多开源的优秀的html解析的类库，什么beautiful soap，什么Mechanize，什么Hpricot，什么ScRUBYt，你为什么非要自讨苦吃用javascript来干这活呢？
答案是：如果只允许你用javascript和html开发程序呢，比如开发adobe air的程序，比如下一步我要做的基于基于内嵌webkit组件的Android应用快速开发框架，有时候，轮子还是得自己造的。
我的这个解析实现只是雏形，它以Erik Arvidsson开发的SimpleHtmlParser
作为html的分析器。SimpleHtmlParser是一个基于Sax模型实现的html分析器，他能分析非标准的xml的格式的html别把转换作为一个标准的xml处理。有了这个解析器做基础，我写了个简单的html_extractor，用来分析html并获取指定标记内的内容。
Auto.js 命令&作用 硬件按键监听
Auto.js 全命令整理命令(五) 硬件按键监听
目录
硬件按键监听
| 命令 | 目的 |
|---|---|
| events.observeKey() | 按键监听,启动 ! |
| events.onKeyDown(按键名, 回调函数) | 注册按键按下监听函数 |
| events.onKeyUp(按键名, 回调函数) | 注册按键弹起监听函数 |
| events.onceKeyDown(按键名, 回调函数) | 注册仅首次生效的按键按下监听函数 |
| events.onceKeyUp(按键名, 回调函数) | 注册仅首次生效的按键弹起监听函数 |
| events.removeAllKeyDownListeners(按键名) | 删除对该按键的所有按下监听 |
| events.removeAllKeyUpListeners(按键名) | 删除对该按键的所有弹起监听 |
| volume_up | 音量+键 |
| volume_down | 音量-键 |
末
以上是我据本阶段的学习得出的一些经验与心得，如果帮到了您，在下十分荣幸；若是您发现了不足，您可以在评论区指出, 我会感谢您的指点的!
咕咕咕…
以上是关于auto.js如何解析html的主要内容，如果未能解决你的问题，请参考以下文章