运行程序进行截图比较(为了对比,在运行时设置默认显示下拉菜单):

  输出差异图片,差异处标色突出:

  由于检查点取的是元素相对于页面的位置,因此在任何CSS布局上值的偏差都会导致对比的失败,换言之,比如待检查的元素向下偏移了一个像素,那么在空出的那一个元素的位置的色差会发生变化,也会通过对比得出差异。通常样本图片一旦确定后不需要经常发生变动,如果遇到需求变更导致的页面样式排版等的变化,只需要重新选取一张样本图片即可。

  这种对比方法适用于样式回归,在脚本运行到需要验证元素样式的位置插入验证方法即可。另外值得注意的是,样本图片和每次得到的截图必须有同样的分辨率,不然会匹配失败。