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

page-monitor

关于我



@前端农民⼯工



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

关于page-monitor

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

应⽤用场景

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

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

效果展⽰示 —— 元素增加

效果展⽰示 —— 元素删除

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

效果展⽰示 —— 样式修改

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

⻚页⾯面差异的分类



差异分类



元素新增



元素删除



元素修改



内容修改



样式修改

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

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

compare left.jpg right.jpg diff.jpg

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

不关⼼心的改变

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

基于DOM结构差异对⽐比

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

⼯工作原理

⼯工作原理

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

⼯工作原理

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

• 遍历所有DOM节点

⼯工作原理

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

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

⼯工作原理

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

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

⼯工作原理

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

⼯工作原理

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

⼯工作原理

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

⼯工作原理

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

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



diff

⼯工作原理

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

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



diff

⼯工作原理

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

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

⼀一些实现细节

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

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

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

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

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

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

diff过程



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



div div



h1 span div p

旧版本



h1 div pp

新版本

diff过程



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

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



div h1 span div

p

旧版本



div h1 div

pp

新版本

diff过程



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

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

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

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

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



div h1 span div

p

旧版本



div h1 div

pp

新版本

diff过程



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

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

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

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



div h1 span div

p

旧版本



div h1 div

pp

新版本

diff过程



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

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

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

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

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



旧版本



新版本

使⽤用⽅方式

使⽤用⽅方式

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

使⽤用⽅方式

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

使⽤用⽅方式

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

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

使⽤用⽅方式

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

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

使⽤用⽅方式

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

⽀支持⼀一些配置

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

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

更多使⽤用⽂文档，请参考：

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

应⽤用

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

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

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

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

THANKS