PhantomCSS基础入门_像素对比工具

PhantomCSS基础入门

GitHub:https://github.com/HuddleEng/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);

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

注意

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

海计划公众号
(0)
上一篇 2020/03/06 08:35
下一篇 2020/03/06 08:35

您可能感兴趣的内容

  • jquery.color.js小白知识_支持颜色动画处理的jQuery插件

    jquery.color.js小白知识 GitHub:https://github.com/jquery/jquery-color 简介描述:支持颜色动画处理的jQuery插件 J…

    2020/03/06
  • 移动端H5固定底部导航菜单的三种布局实现入门百科_布局入门基础教程

    需求:需要把导航固定在底部?只能滑动内容,导航菜单固定不动的。效果如下:这篇文章主要讲解三种实现方案,包括:fixed,absolute,以及css3的flex布局。html结构如下:滚动区域

    底部固定菜单

    <!—公用样式—

    2020/04/05
  • vue-element-admin使用攻略_一个后台前端解决方案

    vue-element-admin使用攻略 官方网址:http://panjiachen.github.io/vue-element-admin GitHub:https://gi…

    2020/03/06
  • 数据库的选择:数据库种类那么多,该如何选择?菜鸟知识_数据库小白攻略

    技术真的是日新月异,Web 网站已经脱离之前的静态网站的体系,转而使用动态语言搭建的动态网站。这也衍生出一个问题:该如何存储数据了?数据库就应运而生,它的作用是提供存储数据的容器。方便 web 网站进行存储、查询、更新等。数据库种类也很多,有成熟且稳定的 MySql 数据库,有后起之秀的 MongoDB 数据库,也有新时代宠儿 Redis 数据库。除此之外,

    2020/04/03
  • css中line-height的理解小白入门介绍line-height实际应用_居中小白知识

    一、line-height的定义css中line-height行高是指文本行基线之间的距离,不同字体,基线位置不同。line-height只影响行内元素和其他行内内容,而不会直接影响块级元素,如果块级元素设置了line-height,这个值只会应用到块级元素里面的内联内容时才会有影响。在块级元素上声明line-height会为该块级元素的内容设置一个最小行框

    2020/04/05
  • 你可能不知道的 npm 实用技巧入门知识_npm入门基础

    作者: LeanCloud weakish分享一些 npm 包管理工具的实用小窍门,希望能够略微提高下前端、Node.js 开发者的生活质量。绝大多数前端和 Node.js 开发者每天的日常工作都离不开 npm,不知道你对 npm 的观感如何?如果你觉得 npm 很棒,那么不妨看下这篇文章,说不定其中有你之前没留意过的小窍门,可以让你 npm 用得更顺手。如

    2020/03/29
  • 程序员猝死:年轻人要学的除了赚钱,还有惜命菜鸟指南_程序员小白入门

    -凌晨3点,你在哪里?-加班。办公室仍然灯火通明。01、当“猝死”成为一种标签近日,深圳某互联网公司一名24岁的程序员在工作中猝然倒下,视频在各类IT论坛和社群中广泛流传。幸运的是,这位程序员在倒下的瞬间就被同事进行心脏复苏并送往医院紧急抢救,逃过一劫。而那些不幸的呢?“猝死”令人惋惜。华为海思无线芯片开发部部长王劲突然昏迷,抢救无效,年仅44岁;前阿里dt

    2020/04/03
  • 你是一直认为MySQL count(1) 比 count(*) 效率高么?使用帮助_效率新手入门

    MySQL count(1) 真的比 count(*) 快么? 反正同事们都是这么说的,我也姑且觉得对吧,那么没有自己研究一下究竟?如果我告诉你他们一样,你信么?有 Where 条件的 count,会根据扫码结果count 一下所有的行数,其性能更依赖于你的 Where 条件,所以文章我们仅针对没有 Where 的情况进行说明。MyISAM 引擎会把一个表的

    2020/03/29
  • Trilium Notes小白入门_层级结构的笔记程序,专注构建个人的大型知识库

    Trilium Notes小白入门 GitHub:https://github.com/zadam/trilium 简介描述:层级结构的笔记程序,专注构建个人的大型知识库 Tril…

    2020/03/07
  • 打一个通用UMD包入门攻略_umd入门基础

    有这样一个场景,客户端运行很久,但是法务部和数据部需要收集用户的一些信息,这些信息收集好之后需要进行相应的数据处理,之后上报到服务端。客户端提供一个纯粹的 JS 执行引擎,不需要 WebView 容器。iOS 端有成熟的 JavaScriptCore、Android 可以使用 V8 引擎。这样一个引擎配套有一个 SDK,访问 Native 的基础能力和数据运

    2020/03/20
  • vConsole菜鸟教程vue移动端调试_调试基础指南

    当我们在浏览器开发vue页面时,由于浏览器对于调试有天然的支持,我们开发起来很方便。但是现在已经进入了移动端时代,移动端页面的需求越来越大。在开发移动端页面的时候我们通常是在浏览器完成开发完成,之后才在手机端测试,如果测试出现问题还得重新回到浏览器上寻找错误。甚至还有嵌入在APP的页面,经过调试之后还要重新发包。当然还有更加奇怪的现象,由于手机浏览器和Web

    2020/03/26
  • TypeScript 枚举教程视频_枚举使用攻略

    数字类型枚举常规枚举的值都是数字类型,因此被称为数字类型枚举:enum Color {Red,Blue,Green
    }
    console.log(Color.Red);
    // 0
    console.log(Color[0]);
    // Red
    console.log(Color[Color.Red]);
    // Red, Color.Red = 0改变与数字枚举关联

    2020/03/26
  • vue具名插槽、作用域插槽的新写法小白常识_插槽菜鸟攻略

    具名插槽自 2.6.0 起有所更新。已废弃的使用 slot attribute 的语法但是我们有了新的语法,如下:子组件 childCom:<!– 具名插槽的针对于组件中不止一个插槽的情况下使用,使用方式,即:给每个插槽指定 name 属性,在使用的时候需要给标签设置 slot 属性,且属性值为 对

    2020/03/23
  • 前端工程化:构建、部署、灰度小白帮助_工程化小白指南

    优秀的技术方案很多,大部分时候我们感觉只是在现有技术方案里面做排列组合、求笛卡尔积、选择最优解,做出一个最适合当前项目的方案。未来,人类应该编写最核心的业务代码、设置规则,由云端和AI来根据当前项目情况自动选择和调整到最优的架构和方案。前言前端项目的工程化,不只对开发层面的组件化、模块化、规范化等,更涉及到构建、部署的工程化和自动化。工程化的一些概念,编译、

    2020/03/26
  • Pushbar.js入门知识_一个用于在Web应用中创建滑动抽屉的微型javascript插件

    Pushbar.js入门知识 官方网址:https://oncebot.github.io/pushbar.js/ GitHub:https://github.com/oncebo…

    2020/03/08
  • vuedraggable:vue拖拽排序插件基础入门_插件入门指南

    最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入首先在vue项目中,用npm包下载下来npm install vuedraggable -S下载下来后,引入插件,在你的vue文件的script标签里面这样引入im

    2020/03/23