微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

PhantomCSS

编程之家收集整理的这个编程导航主要介绍了PhantomCSS编程之家,现在分享给大家,也给大家做个参考。

PhantomCSS 介绍

Phantomcss由 Huddle(http://huddle.com)公司的 James Cryer 带领开发团队编写。它依赖于 Casperjs 和 Resemble.js,可以结合 Phantomjs 或 Slimerjs 使用。

phantomcss使用了简单的API来做图片对比:

phantomcss.screenshot( "#css .selector1",screenshotName1);

phantomcss.screenshot( "#css .selector2",screenshotName2);

phantomcss.compareFiles(screenshotName1,screenshotName2);

假如对比的图片有不一致的地方,会生成一张对比图,同时有差异的地方会用显眼的颜色标出,类似这样: 

PhantomCSS

注意

页面截图对比出现不一致,并不能证明我们的页面就出现了异常,例如广告位等,这些变化频繁的区域,每一次对比都有可能出现差异,所以对广告位或其他经常变化的位置不宜所差异对比。 实际应用中,对整个页面进行截图对比是不推荐的,这样的方式过于简单粗暴,我们更应该对页面的各个区域进行细分对比,做细粒度的监控。

GitHub:https://github.com/HuddleEng/PhantomCSS

网站描述:像素对比工具

PhantomCSS

官方网站:

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。