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

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
    }
  ]
}

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');

    });