CSS 测试

by · 2016年01月01日 · 601 Words · ~2min reading time | Improve on


原文链接： CSS 测试

预备知识

  • grunt
  • PhantomJS
  • CasperJS

我们要谈的不是TDD，而是一种CSS测试的形式，叫做Visual Regression Testing，使得我们可以从视觉上比较网站正确的版本(baseline)和开发版本(new)。过程很简单，就是给网页进行快照，然后比较像素来寻找区别。

##测试工具
我们将使用PhantomCSS进行测试。它是三个工具的强大结合：
1.PhantomJS
2.CasperJS
3.ResembleJS

同时，我们想把整个过程自动化，所以会把PhantomCSS集成到Grunt。

##搭建grunt
首先引入Anselm的Grunt PhantomCSS 项目到我们的Grunt项目中。因为它还没有NPM命名空间，所以只能直接从github上pull 下来。

npm i --save-dev git://github.com/anselmh/grunt-phantomcss.git

然后修改Gruntfile.js：

grunt.loadNpmTasks('grunt-phantomcss');

继续修改Gruntfile.js，对PhantomCSS进行一些配置：

phantomcss: {
        options: {
          mismatchTolerance: 0.05,
          screenshots: 'baselines',
          results: 'results',
          viewportSize: [1280, 800],
          },
          src: [
             'phantomcss.js'
          ]
      },

稍微解释下：

  • misMatchTolerance：
  • screenshots:保存baseline图片的文件夹
  • results:比较结束后，结果会放到这个文件夹
  • viewportSize:
  • src:测试文件的路径，相对于gruntfile

##测试文件
接下来，在我们的测试文件phantomcss.js文件中，就可以使用Casper.js了。PhantomCSS会启动一个PhantomJS浏览器，然后通过Casper.js进行各种导航和所需操作。

示例：

casper.start('http://localhost:9001/cta-link.html')
.then(function() {
  phantomcss.screenshot('.cta-link', 'cta-link');
})
.then(function() {
  this.mouse.move('.cta-button');
  phantomcss.screenshot('.cta-link', 'cta-link-hover');
});

##作比较
有了baseline的图片后，我们就可以不断地运行测试了。

Tags:

`