`

自动 CSS 回归测试工具 BackstopJS

 
阅读更多
http://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
    }
  ]
}
分享到:
评论

相关推荐

    NightwatchJS的CSS回归插件

    6. **性能**:CSS回归测试还可以检测CSS性能,例如选择器的复杂性、重绘和回流的影响,以优化页面加载速度。 在"dayguard-master"这个压缩包中,可能包含了NightwatchJS的配置文件、测试脚本、示例用例以及其他辅助...

    css背景合并工具,自动生成CSS样式

    这个工具的主要功能是自动生成CSS样式,特别是在处理背景图像时。在网页设计中,有时我们需要为一个元素设置多个背景图层,例如背景色、背景图片、图案或者渐变等。手动编写这些复杂的CSS代码既耗时又容易出错。而这...

    css自动生成代码工具

    例如,"使用免费工具CSS Tab Designer自动生成CSS样式菜单.exe"是一个用于创建CSS样式的菜单的特定工具。它可能包含以下功能: 1. **图形界面**:用户可以通过拖放或者直观的界面设计菜单结构,无需直接编写代码。 ...

    CSS格式化工具 Visual CSS

    **CSS格式化工具Visual CSS详解** CSS(Cascading Style Sheets)是网页设计中的关键元素,用于控制网页的布局和视觉样式。Visual CSS(VCS)是一款专为开发者设计的CSS代码编辑器,它提供了强大的功能,使得CSS...

    grunt-phantomcss, 使用PhantomCSS进行CSS回归测试的grunt任务.zip

    grunt-phantomcss, 使用PhantomCSS进行CSS回归测试的grunt任务 phantomcss使用PhantomCSS自动化CSS回归测试正在启动这个插件需要 Grunt ~0.4.1If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt...

    css格式化工具 CSSFormator

    1. **自动缩进**:工具能够自动调整CSS选择器、属性和值的缩进,使其符合标准的代码格式。 2. **自动换行**:长行的CSS代码会被适当地分割成多行,使得代码更易于阅读。 3. **排序属性**:根据一定的规则(如字母...

    CSS菜单制作工具 CSS菜单制作工具

    CSS菜单制作工具 CSS菜单制作工具 CSS菜单制作工具 CSS菜单制作工具 CSS菜单制作工具 CSS菜单制作工具 CSS菜单制作工具 CSS菜单制作工具 CSS菜单制作工具 CSS菜单制作工具 CSS菜单制作工具 CSS菜单制作工具 CSS菜单...

    好用的css格式化工具

    好用的css格式化工具好用的css格式化工具

    hocus-focus:CSS回归测试工具

    Bootstrap 的 CSS 回归测试工具 这个怎么运作 screenshots 在各种浏览器中截取屏幕截图 比较截图和输出视觉差异; 有关用法,请参阅 Web 应用程序可查看差异并批准有意更改 用于基于 GitHub 的登录的 一些 Python...

    CSS特效生成工具/css代码

    本篇文章将详细讲解如何利用“CSS特效生成工具”来创建和修改CSS特效代码,以及它对新手用户的价值。 首先,CSS特效生成工具是一种在线或离线的应用程序,旨在帮助设计者快速生成特定的CSS样式和特效,无需从头编写...

    css 取色工具

    "CSS取色工具"就是这样一个实用程序,它帮助开发者和设计师方便地从屏幕上选取颜色,并自动生成相应的颜色代码,以便在CSS中使用。 这个工具的主要功能包括: 1. **实时取色**:用户只需运行工具,然后将光标移动...

    10 个有用免费 CSS3 强大工具

    **:这是一个快速输入CSS3属性并即时查看效果的工具,适合初学者学习和专业人士快速测试新特性。 6. **CSS Gradient Generator**:此工具专门用于生成CSS3渐变,支持线性渐变、径向渐变等多种类型,并可以预览在...

    JS_CSS文件压缩工具(2)

    "JS_CSS文件压缩工具(2)"是一个专为此目的设计的小型实用程序,它能够帮助开发者批量处理文件,以减少网页加载时间,提高用户体验。这个工具具有错误提示功能,确保了压缩过程的稳定性和可靠性,对于个人开发者或...

    CSS超级压缩工具

    4. **自动化**:通过配置自动化工具,确保每次构建时自动进行CSS压缩。 通过合理使用CSS超级压缩工具,可以有效地提高网站性能,降低服务器负担,提升用户体验。理解其工作原理和使用方法,将使你在网页开发中更加...

    Firefox浏览器插件Firebug和CSS减肥工具CSS Usage(清理无用CSS样式的CSS精简工具)

    第四步,在Firefox浏览器中打开我们要优化的页面(本地的页面也可以),点击右上角的firebug(有个小蜜蜂图标),打开firebug工具窗口,我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。 首先我们来分析最...

    css制作工具

    4. **在线工具**:像CSS-Tricks的CodePen或JSFiddle这样的在线代码编辑器,可以实时预览CSS效果,方便测试和学习。还有如ColorPicker用于选取颜色,Can I Use?用于检查CSS特性的浏览器兼容性。 5. **CSS验证器**:...

    css自动格式化工具(绿色单机版)_带源码

    CSS自动格式化工具是一款专为前端开发者设计的实用软件,旨在帮助用户快速整理和格式化CSS代码,提高代码可读性和维护性。该工具通常是一个轻量级的应用,无需安装,下载后即可直接运行,因此被称为绿色单机版。源码...

    简单CSS调试工具v1.0

    7. **代码提示与自动完成**:对于CSS3的新特性和属性,工具可能提供智能提示和自动补全功能,加快编码速度。 8. **保存与导出**:调试完成后,用户可以方便地保存和导出修改的CSS代码,直接应用到实际项目中。 9. ...

    可视化 Blueprint 框架 CSS 生成工具

    4. **代码生成**:完成设计后,工具会自动生成整洁、规范的CSS代码,遵循Blueprint框架的约定,确保代码的可读性和可维护性。 5. **源码编辑**:对于有经验的开发者,工具还提供了源码编辑功能,可以直接修改生成的...

    HTML CSS JS压缩工具

    这样的工具可以帮助开发者快速地处理大量的CSS代码,提高加载速度。 JavaScript是一种强大的客户端脚本语言,它使得网页具有交互性。然而,JS文件往往比HTML和CSS更大,且执行时会占用更多资源。JS压缩通常涉及变量...

Global site tag (gtag.js) - Google Analytics