自动 CSS 回归测试工具 BackstopJS & PhantomCSS

BackstopJShttp://www.oschina.net/p/backstopjs

BackstopJS是自动CSS回归测试工具，它通过比较不同视窗大小的DOM截图来回应你所测试的Web界面。

{  "viewports": [
    {      
   "name": "phone",      "width": 320,      "height": 480
    }, 
    {     
     "name": "tablet_v",      "width": 568,      "height": 1024
    }, 
    {       
     "name": "tablet_h",      "width": 1024,      "height": 768
    }
  ],  
    "scenarios": [
    {      
     "label": "http://getbootstrap.com",      
     "url": "http://getbootstrap.com",      
     "hideSelectors": [],      
     "removeSelectors": [        
     "#carbonads-container"
      ],      
      "selectors": [        
      "header",         
      "main",        
      "body .bs-docs-featurette:nth-of-type(1)",        
      "body .bs-docs-featurette:nth-of-type(2)",        
      "footer",        
      "body"
      ],      
      "readyEvent": null,      
      "delay": 500
    }
  ]
}

PhantomCSShttp://www.oschina.net/p/phantomcss

PhantomCSS是CSS回归测试工具。一个通过PhantomJS或者SlimerJS和Resemble.js进行自动视觉回归测试的CasperJS模块。

示例代码：

casper.
    start( url ).
    then(function(){        
// do something
        casper.click('button#open-dialog');        
// Take a screenshot of the UI component
        phantomcss.screenshot('#the-dialog', 'a screenshot of my dialog');
 
    });