【page-monitor 前端自动化中篇】源码分析

Object 发布于2019-08-20 10:11 / 602人阅读

摘要：上篇中初探了的一些功能和在前端自动化测试方面的可行性，本篇主要分析下的实现方式和源码。文件分析完整文件目录运行生成目录分析出了及其组件代码，可用和值的分析的文件和下面的五个文件。相关文章前端自动化上篇初步调研前端自动化下篇实践应用

上篇中初探了page-monitor的一些功能和在前端自动化测试方面的可行性，本篇主要分析下page-monitor的实现方式和源码。

mode-module简介

page-monitor的存在形式是node-module，依赖于node安装和运行，简单必须了解下node_modules

node-module是nodejs的模块，符合commonJs规范【具体规范可以参考：http://javascript.ruanyifeng....】

简单描述commonJs规范
1：文件即模块，作用域在文件内，不允许重复，不会污染。
2：加载依赖出现顺序，加载即运行，重复则利用缓存。

多说一句：这是amd 和cmd(commonJs)的本质区别，由于node多运行于服务端，加载比较快，因此比较适合cmd 规范，浏览器端的模块则更适用于cmd的规范，个人理解没有广义的好坏之分

方便看源码，贴出node_modole简单构成和主要函数module
node内部提供一了一个modle的构造函数，所有的模块都继承和依赖于此模块。

node module的引入 require命令。
其他加载规则，路径设定不在此赘述。

page-monitor文件分析

完整文件目录：

运行生成目录分析：

出了node_module及其组件代码，可用和值的分析的文件index.js 和phantomjs 下面的五个文件。

分析index.js

代码中无非变量声明和引用，关键一句引用phantom的命令乳腺

// 多线程启动位置
var proc = spawn(binPath, arr);

通过上面多线程的启动node可以达到高效和并发处理测试任务的需求，分析下arr的内容如下图：看到了窗口大小，延时，ua，存放地址，diff变量等等

分析获取DOM源码

获取dom的源码主要利用了web api evalution，evalution传入一个xpath的参数，返回一个xpath的对象，之后通过遍历和xpath规则生成规则化的json。
贴一个evalution api

为了看懂page-monitor的代码举个栗子

# evalution example:

var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null);
/* 检索body中所有H2的所欲.
 * 结果存在于一个node的迭代器中 */
var thisHeading = headings.iterateNext();
var alertText = "Level 2 headings in this document are:
";
while (thisHeading) {
  alertText += thisHeading.textContent + "
";
  thisHeading = headings.iterateNext();
}
alert(alertText); // Alerts the text of all h2 elements

通过上面函数和page-monitor中walk.js函数最后一行，可以看出page-monitor 保存了四个元素：属性[name,id等等]，节点类型，位置[后期渲染]，样式的md5加密[样式仅需要对比是否变化即可]
具体内容和dom结构如下：

对应的具体dom结构

diff.js 代码

diff代码主要两个作用

1：获取差异

2：渲染差异
其中对比的策略：

历史完全每个对比现在：获取更新和删除的内容
现在完全每个对比历史：获取更新和新增的内容
具体可以参考代码

其他api和源码简单修改

必须了解的web api 还有一个是querySeletor 也就是检索的api，参考地址
document.querySelector()
了解了这个api就可以做一件事情：不对全局dom diff，只对特别关心的dom进行diff
实现方式：修改querySelector的根节点为Header
获取的dom结构如下：根节点为header

获取的页面截图如下：

代码流程图

总结

本次在调研page-monitor的基础上，对page-monitor的源码实现进行分析；同时利用相关api修改，来只对核心页面进行获取优化。下一篇将会进一步思考page-monitor的应用。

相关文章：
【page-monitor 前端自动化上篇】初步调研
【page-monitor 前端自动化下篇】实践应用

GPU云服务器云服务器中篇前端自动化 web前端自动化测试 vps自动开通源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80031.html

【page-monitor 前端自动化 下篇】实践应用

摘要：贴一个细节图其他分析小拽通过上面的举例，旨在抛砖引玉，希望或者结构在前端的自动化测试有一定应用，提升产品质量。最终再上一张流程图，便于分析相关文章前端自动化上篇初步调研前端自动化中篇源码分析通过page-diff的初步调研和源码分析，确定page-diff在前端自动化测试和监控方面做一些事情。本篇主要介绍下，page-diff在具体的实践中的一些应用核心dom校验前端的快速发展，...

PAMPANG 2019-08-20 10:11 评论0 收藏0
【page-monitor 前端自动化 上篇】初步调研

摘要：前端自动化测试主要在于变化快，不稳定，兼容性复杂故而，想通过较低的成本维护较为通用的自动化比较困难。本文旨在通过获取和分析结构，调研能否通过监控和分析核心，来进行前端自动化测试。相关文章前端自动化中篇源码分析前端自动化下篇实践应用前端自动化测试主要在于：变化快，不稳定，兼容性复杂；故而，想通过较低的成本维护较为通用的自动化case比较困难。本文旨在通过page-monitor获取和分...

light 2019-08-20 10:11 评论0 收藏0
前端20个灵魂拷问彻底搞明白你就是中级前端工程师【中篇】

摘要：前端个灵魂拷问，彻底搞明白你就是中级前端工程师上篇感觉大家比较喜欢看这种类型的文章，以后会多一些。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。此规范其实是在推广过程中产生的。 showImg(https://segmentfault.com/img/bVbwAMU?w=700&h=394); 前端20个灵魂拷问，彻底搞明白你就是中级前端工程师...

MartinDai 2019-08-30 15:44 评论0 收藏0
前端20个灵魂拷问彻底搞明白你就是中级前端工程师【中篇】

摘要：前端个灵魂拷问，彻底搞明白你就是中级前端工程师上篇感觉大家比较喜欢看这种类型的文章，以后会多一些。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。此规范其实是在推广过程中产生的。 showImg(https://segmentfault.com/img/bVbwAMU?w=700&h=394); 前端20个灵魂拷问，彻底搞明白你就是中级前端工程师...

coolpail 2019-08-26 10:56 评论0 收藏0
Android网络编程8之源码解析OkHttp中篇[复用连接池]

摘要：构造函数默认空闲的最大连接数为个，的时间为秒通过构造函数可以看出默认的空闲的最大连接数为个，的时间为秒。实例化实例化是在实例化时进行的在的构造函数中调用了省略省略缓存操作提供对进行操作的方法分别为和几个操作。 1.引子在了解OkHttp的复用连接池之前，我们首先要了解几个概念。 TCP三次握手通常我们进行HTTP连接网络的时候我们会进行TCP的三次握手，然后传输数据，然后再释放连接...

fasss 2019-08-16 10:51 评论0 收藏0