🌚

通过比较截图检查网页变化

Posted at — Apr 30, 2017
#编程 #测试

有时候我们希望检查代码或数据的更新对网页产生的影响,如果能把这个过程集成到git等版本控制系统中,在提交成果的同时自动批量执行,将会极大地提高生产力。

首先网页的截图可以用PhantomJS、Headless Chrome实现:

1
2
3
4
5
var page = require('webpage').create();
page.open('http://github.com/', function() {
  page.render('github.png');
  phantom.exit();
});

图片的差异比较用GraphicsMagick实现:

1
gm compare old.png new.png -file diff.png -highlight-style assign

为方便查看,还可以把截图做成gif动图:

1
gm convert -delay 20 old.png diff.png new.png diff.gif