前端之自动化测试

关于为什么前端要去学习测试，京城一灯的志佳老师就说过了，让自己更有价值

1.BackstopJS(UI自动测试化)

简介: BackstopJS就是一个能够实现css自动化回归测试的工具，和Mocha这种依靠JavaScript判断断言语句正误和PhantomJS以模拟用户操作的测试工具不同，BackstopJS是一个基于比较网站快照的变化的回归测试工具，因此他更适给项目中的样式做回归测试，可以确保我们在重构网站样式的时候样式不发生变化，而且他支持设置多种浏览器尺寸，可以测试响应式布局。

功能:

• 支持多页面、多测试用例测试
• 可以使用脚本模拟出用户的交互动作
• 提供命令行和浏览器两种形式报告
• 支持PhantomJS或SlimerJS做浏览器引擎，事实上两种引擎也可以改造出基于快照对比的回归测试方案，但 是BackstopJS使用更简单，并且做到了可以通过配置切换引擎。
• 支持设置多种浏览器尺寸，方便实现响应式布局测试
• 可以测试HTML5元素，比如网页字体和Flexbox
• 提供了扩展接口，可供用户集成到其他测试系统中

安装

npm install -g backstopjs
使用 :
BackstopJS的具体工作流程可以分为3步：
1.配置：该步骤用户需要创建一个backstop.json文件，设置屏幕的尺寸、访问页面的url、测试区域的dom选择器、准备事件、用户交互等
2.准备测试样板：生成一系列页面快照，之后BackstopJS将根据这些快照作为页面是否存在bug的判断样板
3.测试：使用当前页面样式快照和之前的样板快照进行比较，如果出现不希望的变化就报告出来

使用示例：

// backstop.json
{
  //测试用例id，用于BackstopJS管理和为文件命名
  "id": “backstop_prod_test",
  //测试视口，就是配置各种分辨率
  "viewports": [
    {
      "name": "phone",
      "width": 320,
      "height": 480
    }],
  //在执行所有脚本前、页面加载后执行的脚本。通过他我们可以执行用express做一个静态服务器
  "onBeforeScript": "onBefore.js",
  "onReadyScript": “onReady.js",
  //测试用例
  "scenarios": [
    {
      //测试用例名称
      "label": “homepage",
      //测试的地址
      "url": “https://garris.github.io/BackstopJS/",
      //测试的区域，支持css选择器，然后BackstopJS会将选择器指定的地方截屏
      "selectors": [
        ".class",
        “#id"
      ],
      "selectorExpansion": true,
      "hideSelectors": [],
      "removeSelectors": [],
      "readyEvent": null,
      "delay": 500,
      "misMatchThreshold" : 0.1,
      //在各种的测试用例执行时、页面加载后前行,我们可以把我们对页面操作的模拟脚本放进onReady.js中
      "onBeforeScript": "onBefore.js",
      "onReadyScript": "onReady.js"
    }
  ],
  //测试图片的输出路径
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",
    "bitmaps_test": "backstop_data/bitmaps_test",
    "casper_scripts": "backstop_data/casper_scripts",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  //测试用的浏览器或模拟器，这里用的是PhantomJS
  "engine": “phantomjs",
  //报告的形式，支持命令行和浏览器两种
  "report": [“browser"],
  //是否打印测试日志
  "debug": false
}

2.selenum

简介
selenium ^[1] 是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。支持的浏览器包括IE（7, 8, 9, 10, 11），Mozilla Firefox，Safari，Google Chrome，Opera等。这个工具的主要功能包括：测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。测试系统功能——创建回归测试检验软件功能和用户需求。支持自动录制动作和自动生成 .Net、Java、Perl等不同语言的测试脚本。
安装

使用