AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

监控页面变化的小工具

发布者 tester
发布于 1431900794742  浏览 5793 关键词 JavaScript, 自动化测试 
分享到

第1页

监控⻚页⾯面变化的⼩小⼯工具

page-monitor



第2页

关于我



@前端农民⼯工



微博:http://weibo.com/fouber Github:https://github.com/fouber 博客:https://github.com/fouber/blog 擅⻓长:前端⼯工程 爱好:开源硬件、3D打印



第3页

关于page-monitor

• 记录⺴⽹网⻚页的“结构快照”,基于DOM⽐比对历史差异的⼩小⼯工具 • github:https://github.com/fouber/page-monitor (927 stars)



第4页

应⽤用场景

• ⾃自家产品每⽇日截图存档,查看历史更新变化 • 竞品监控,关注竞品演化,分析运营特征 • 代码修改后UI变动范围确认,便于回归测试



第5页

不讲太多理论,现看例⼦子



第6页

效果展⽰示 —— 元素增加



第7页

效果展⽰示 —— 元素删除



第8页

效果展⽰示 —— ⽂文本修改



第9页

效果展⽰示 —— 样式修改



第10页

基于DOM的对⽐比,⽽而⾮非像素对⽐比,这很重要。



第11页

⻚页⾯面差异的分类



差异分类



元素新增



元素删除



元素修改



内容修改



样式修改



第12页

每种差异的变化都可以从DOM结构上反映出来, 单纯基于图⽚片的对⽐比会存在很⼤大的误判。



第13页

元素删除、样式改变将引起巨⼤大的像素差异

compare left.jpg right.jpg diff.jpg



第14页

⽽而且,有些像素变化我们并不关⼼心

不关⼼心的改变



第15页

所以,基于像素对⽐比确定差异是不靠谱的



第16页

基于DOM结构差异对⽐比

• 可以⽐比较精确的判断差异区域,减少误判 • 可以通过配置有选择的过滤某些不关⼼心的元素 • 可以以⽂文本的形式存储⻚页⾯面快照,⽅方便传输,简化对⽐比



第17页

⼯工作原理



第18页

⼯工作原理

• 使⽤用命令⾏行浏览器访问⻚页⾯面



第19页

⼯工作原理

• 使⽤用命令⾏行浏览器访问⻚页⾯面 • 执⾏行js,收集⻚页⾯面元素信息

• 遍历所有DOM节点



第20页

⼯工作原理

• 使⽤用命令⾏行浏览器访问⻚页⾯面 • 执⾏行js,收集⻚页⾯面元素信息

• 遍历所有DOM节点 • 读取节点样式、属性、坐标



第21页

⼯工作原理

• 使⽤用命令⾏行浏览器访问⻚页⾯面 • 执⾏行js,收集⻚页⾯面元素信息

• 遍历所有DOM节点 • 读取节点样式、属性、坐标 • 递归获取元素⼦子节点数据



第22页

⼯工作原理

• 使⽤用命令⾏行浏览器访问⻚页⾯面 • 执⾏行js,收集⻚页⾯面元素信息 • 将元素信息存储为json⽂文本



第23页

⼯工作原理

• 使⽤用命令⾏行浏览器访问⻚页⾯面 • 执⾏行js,收集⻚页⾯面元素信息 • 将元素信息存储为json⽂文本 • 对⺴⽹网⻚页进⾏行截图并存储



第24页

⼯工作原理

• 使⽤用命令⾏行浏览器访问⻚页⾯面 • 执⾏行js,收集⻚页⾯面元素信息 • 将元素信息存储为json⽂文本 • 对⺴⽹网⻚页进⾏行截图并存储 • 对两个历史版本进⾏行对⽐比



第25页

⼯工作原理

• 使⽤用命令⾏行浏览器访问⻚页⾯面 • 执⾏行js,收集⻚页⾯面元素信息 • 将元素信息存储为json⽂文本 • 对⺴⽹网⻚页进⾏行截图并存储 • 对两个历史版本进⾏行对⽐比

• 对⽐比json⽂文件中的数据结构



diff



第26页

⼯工作原理

• 使⽤用命令⾏行浏览器访问⻚页⾯面 • 执⾏行js,收集⻚页⾯面元素信息 • 将元素信息存储为json⽂文本 • 对⺴⽹网⻚页进⾏行截图并存储 • 对两个历史版本进⾏行对⽐比

• 对⽐比json⽂文件中的数据结构 • 找到有差异的元素(增删改)



diff



第27页

⼯工作原理

• 使⽤用命令⾏行浏览器访问⻚页⾯面 • 执⾏行js,收集⻚页⾯面元素信息 • 将元素信息存储为json⽂文本 • 对⺴⽹网⻚页进⾏行截图并存储 • 对两个历史版本进⾏行对⽐比

• 对⽐比json⽂文件中的数据结构 • 找到有差异的元素(增删改) • 在截图上标记有差异元素



第28页

⼀一些实现细节

• 使⽤用phantomjs作为命令⾏行浏览器

• 允许在记录⻚页⾯面结构之前执⾏行⼀一些js函数,⽤用于前置处理

• 允许通过选择器配置过滤某些元素,⼯工具在遍历dom时,会忽 略这些元素(利⽤用了webkitMatchesSelector⽅方法判断给定元素是 否匹配某选择器)

• 获取元素的可视计算样式,并将其拼接成字符串,最后对整体 进⾏行md5摘要计算,⽤用以节省存储空间

• ⽂文本节点的内容同样只存储其摘要值,进⼀一步节省空间



第29页

Diff过程核⼼心算法:最⻓长公共⼦子序列(LCS)



第30页

diff过程



• 逐级对⽐比,先判断当前 元素样式是否发⽣生改变



div div



h1 span div p

旧版本



h1 div pp

新版本



第31页

diff过程



• 逐级对⽐比,先判断当前 元素样式是否发⽣生改变

• ⼦子元素集利⽤用LCS算法找 到公共⼦子序列



div h1 span div

p

旧版本



div h1 div

pp

新版本



第32页

diff过程



• 逐级对⽐比,先判断当前 元素样式是否发⽣生改变

• ⼦子元素集利⽤用LCS算法找 到公共⼦子序列

• 每⼀一级公共⼦子序列之外 的元素,就是删除或者 新增的元素

• 旧版本中的⾮非公共⼦子序列元素为删除元素

• 新版本中的⾮非公共⼦子序列元素为新增元素



div h1 span div

p

旧版本



div h1 div

pp

新版本



第33页

diff过程



• 逐级对⽐比,先判断当前 元素样式是否发⽣生改变

• ⼦子元素集利⽤用LCS算法找 到公共⼦子序列

• 每⼀一级公共⼦子序列之外 的元素,就是删除或者 新增的元素

• 公共⼦子序列中的元素需 要再递归对⽐比差异



div h1 span div

p

旧版本



div h1 div

pp

新版本



第34页

diff过程



• 逐级对⽐比,先判断当前 元素样式是否发⽣生改变

• ⼦子元素集利⽤用LCS算法找 到公共⼦子序列

• 每⼀一级公共⼦子序列之外 的元素,就是删除或者 新增的元素

• 公共⼦子序列中的元素需 要再递归对⽐比差异

• 完成对⽐比,将有差异的 元素标记在截图上



旧版本



新版本



第35页

使⽤用⽅方式



第36页

使⽤用⽅方式

• 通过npm安装模块 npm install page-monitor



第37页

使⽤用⽅方式

• 通过npm安装模块 • 在nodejs中使⽤用



第38页

使⽤用⽅方式

• 通过npm安装模块 • 在nodejs中使⽤用

• 第⼀一次调⽤用capture⽅方法,会创建第⼀一个快照



第39页

使⽤用⽅方式

• 通过npm安装模块 • 在nodejs中使⽤用

• 第⼀一次调⽤用capture⽅方法,会创建第⼀一个快照 • 多次调⽤用capture⽅方法,会与最近⼀一次快照进⾏行对⽐比



第40页

使⽤用⽅方式

• 通过npm安装模块 • 在nodejs中使⽤用 • 对⽐比任意两个版本的差异



第41页

⽀支持⼀一些配置

• 指定⻚页⾯面尺⼨寸(默认320x568) • 设置user-agent(默认是iphone的Safari) • 设置忽略哪些标签的⼦子元素(⽐比如img、input、audio、video、select等) • 指定关注哪些样式(默认是所有可⻅见样式,⽐比如颜⾊色、字体、背景⾊色、边框、投影、

透明度等) • ⽤用css选择器指定 忽略/包含/删除 哪些元素 • ⽤用css选择器指定忽略哪些元素的⼦子元素 • 在⻚页⾯面初始化、遍历节点抓取快照之前,执⾏行⼀一些钩⼦子函数 • 等等



第42页

更多使⽤用⽂文档,请参考:

https://github.com/fouber/page-monitor



第43页

应⽤用



第44页

⼯工具应⽤用——产品监控平台 https://github.com/fouber/pmui



第45页

⼯工具应⽤用——微博机器⼈人(偶尔会被封)



第46页

⼯工具应⽤用——回归测试范围确认(构想中)

• 对所有产品⻚页⾯面进⾏行监控 • 每次代码提交,⾃自动抓取所有⻚页⾯面,对⽐比差异 • 将有差异的⻚页⾯面截图发送给研发和测试同学进⾏行确认 • 能⽐比较有效的确认代码影响范围,减少回归测试成本



第47页

THANKS



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。