开发者社区> boxti> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前端测试工具集锦

简介:
+关注继续查看

front-end-toolsfront-end-tools

总结最近了解的前端测试的相关内容,发现前端这里真的是太庞大了,而且各种测试工具层出不穷,需要总结东西太多了,如有遗漏请大家见谅。

TDD vs BDD:

TDD与BDD概念不再描述了,直奔主题。

前端BDD测试框架

jasmine
Installation

install -g jasmine
1
```
Initializing
To initialize a project for Jasmine

```jasmine init

To seed your project with some examples

examples
1
```
Usage
To run your test suite
```  jasmine
1
2
3
4
5
describe("A suite", function() {
it("contains spec with an expectation", function() {
expect(true).toBe(true);
});
});

mocha(推荐,简洁明了)

Installation

Install with npm:

1
$ npm install -g mocha

Getting Started

1
2
3
$ npm install -g mocha
$ mkdir test
$ $EDITOR test/test.js

In your editor:

1
2
3
4
5
6
7
8
9
var assert = require('chai').assert;
describe('Array', function() {
describe('#indexOf()', function () {
it('should return -1 when the value is not present', function () {
assert.equal(-1, [1,2,3].indexOf(5));
assert.equal(-1, [1,2,3].indexOf(0));
});
});
});

you need to install chai.
Back in the terminal:

1
2
3
4
5
6
7
8
9
10
    $  mocha

.

1 test complete (1ms)
```
### 前端TDD测试框架

Qunit
Installation

$ npm i qunit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
API
http://api.qunitjs.com

Qunit是一款强大的用于帮助调试代码的,JavaScript单元测试框架。QUnit由jQuery团队成员编写,是jQuery的官方测试套件,不仅如此,QUnit还可以测试任何常规JavaScript代码,甚至可以通过一些像Rhino或者V8这样的JavaScript引擎,测试服务端JavaScript代码。

可以想象其跟jquery UI及jquery animation等库结局一样,逃脱不了各种被后来的库全方位的比较和“超越”.


## Unit Testing


Mocha && Jasmine

Mocha 跟 Jasmine 是目前最火的两个单元测试框架,基本上目前前端单元测试就在这两个库之间选了,下面是这两个库的区别,大家可以根据自己的需求进行选择:

mocha:

优点:
终端显示友好
灵活,扩展性好
缺点:
自身集成度不高(没有断言,spy,异步等),而且经常要配合Chai,Sinon等库使用
配置相对麻烦一点点

Jasmine:

优点:
集成度高,自带BBD,spy,方便的异步支持(2.0)
配置方便
缺点:
相对不太灵活
由于各种功能内建,断言方式或者异步等风格相对比较固定
没有自带mockserver, 如果需要这功能的得另外配置

jest
Jest 是Facebook的一个专门进行Javascript单元测试的工具.它是在Jasmine测试框架上演变开发而来,使用了我们熟知的expect(value).toBe(other) 这种断言格式。

First install Jest with npm by running:
npm install --save-dev jest-cli
1
2

Great! Now let's get started by writing a test for a hypothetical sum.js file:
function sum(a, b) {
  return a + b;
}
module.exports = sum;
1
Create a directory __tests__/ with a file sum-test.js:
jest.unmock('../sum'); // unmock to use the actual implementation of sum
describe('sum', () => {
  it('adds 1 + 2 to equal 3', () => {
    const sum = require('../sum');
    expect(sum(1, 2)).toBe(3);
  });
});
1
Add the following to your package.json:
"scripts": {
  "test": "jest"
}
1
Run npm test:
[PASS] __tests__/sum-test.js (0.010s)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

## 代码覆盖率工具

jscover
jscover是一个用来显示JavaScript项目代码覆盖率的工具,它是继承于JSCoverage的,用C++/SpiderMonkey 取代了Java/Rhino

但是已经沦落到淘汰的边缘

Istanbul(推荐目前最强大前端代码覆盖率工具)

Istanbul 是 JavaScript 程序的代码覆盖率工具,
能产生 Statements/Lines/Functions/Branches 等指标报表,并以各种格式导出。

http://qaseven.github.io/2016/01/25/gulp_for_qa/ 这篇文章里已经详细介绍了。


blanketjs

blanketjs是一个易于安装,易于配置和易于使用的JavaScript代码覆盖库 对于nodejs和浏览器都支持的不错。

NodeJS (Powered by Mocha)

Install from npm.
npm install blanket
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Make sure you require Blanket before you require or run any of the code you want covered

require("blanket")({ /* optional options */ }),
require("src/myscripttotest");

Run your tests using mocha and take advantage of the json-cov and html-cov reporters to output the coverage results.

## e2e test
ui

webdriverio

这个库是nodejs的一个webdriver模块(浏览器自动化)。你可以用它写超级简单Selenium测试在你最喜欢的BDD / TDD测试框架中,并且可以在本地运行或在云端中, Sauce Lab,BrowserStack或TestingBot。


webdriverio 支持 Cucumber, Jasmine and Mocha+Chai 这些测试框架

nightwatch

Nightwatch.js 是一个易于使用的,基于 Node.js 平台的浏览器自动化测试解决方案。它使用强大的 Selenium WebDriver API 来在 DOM 元素上执行命令和断言。 语法简单但很强大,使您可以快速编写测试。
只需使用 Javascript 和 CSS 选择器,不需要初始化其他对象和类,您只需要编写测试规范。内置命令行测试运行器,使您能够运行整体测试,分组测试或者单个测试。
this.demoTestGoogle = function (browser) {
browser
.url(“http://www.google.com”)
.waitForElementVisible('body', 1000)
.setValue('input[type=text]', 'nightwatch')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.pause(1000)
.assert.containsText('#main', 'The Night Watch')
.end();
};
1
2
3
4
5
6

当涉及异步调用时,基于链式的队列是个糟糕的模式

CodeceptJS

CodeceptJS是一个基于WebDriver全新的端到端测试框架。它们从用户角度简单描述用户操作步骤来编写测试脚本
Feature('CodeceptJS Demonstration');

Scenario('test some forms', (I) => {
  I.amOnPage('http://simple-form-bootstrap.plataformatec.com.br/documentation');
  I.fillField('Email', 'hello@world.com');
  I.fillField('Password', '123456');
  I.checkOption('Active');
  I.checkOption('Male');  
  I.click('Create User');
  I.see('User is valid');
  I.dontSeeInCurrentUrl('/documentation');
});
1
2
3
4
5

protractor(angluarjs亲儿子,由angluarjs核心人物开发的e2e测试工具)
protractor 是 AngularJS 团队构建的一个端对端的测试运行工具,模拟用户交互,帮助你验证你的Angular应用的运行状况。

Protractor使用Jasmine测试框架来定义测试,当然你也可以选择其他测试框架来定义测试,如mocha。Protractor为不同的页面交互提供一套健壮的API。
var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');

chai.use(chaiAsPromised);
var expect = chai.expect;

describe('angularjs 首页', function() {
  it('应该欢迎一个具名的用户', function() {
    //要求浏览器访问网址http://www.angularjs.org
    browser.get('http://www.angularjs.org');

    //找到ng-model名为'youname'的HTML元素,要求浏览器键入名字
    element(by.model('yourName')).sendKeys('tanshuai');

    var greeting = element(by.binding('yourName'));

     //取得结果并作断言测试
    expect(greeting.getText()).to.eventually.equal('Hello tanshuai!');
  });
});
1
2
3
4
5
6
7
8
9
10
11

## headless

PhantomJS

PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。 PhantomJS 可以用于 页面自动化 , 网络监测 , 网页截屏 ,以及 无界面测试 等。
很多其它的测试框架都是基于PhantomJS二次开发的,例如下面要讲的casperjs,nightmare

nightmare

nightmare是一个高级浏览器自动化依赖库。

var Nightmare = require(‘nightmare’);
var expect = require(‘chai’).expect; // jshint ignore:line

describe('test yahoo search results', function() {
it('should find the nightmare github link first', function*() {
  var nightmare = Nightmare()
  var link = yield nightmare
    .goto('http://yahoo.com')
    .type('form[action*="/search"] [name=p]', 'github nightmare')
    .click('form[action*="/search"] [type=submit]')
    .wait('#main')
    .evaluate(function () {
      return document.querySelector('#main .searchCenterMiddle li a').href
    })
  expect(link).to.equal('https://github.com/segmentio/nightmare');
});
});
1
2
3
4

casperjs

CasperJS 是一个开源的导航脚本和测试工具,使用 JavaScript 基于 PhantomJS 编写,用于测试 Web 应用功能,Phantom JS是一个服务器端的 JavaScript APIWebKit。其支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG.

var casper = require(‘casper’).create();
var fs = require(‘fs’)
casper.start(‘https://github.com/login/‘);
casper.waitForSelector(‘input.btn.btn-primary.btn-block’); // wait for the form node to be added
casper.then(function() {
this.fillSelectors(‘.auth-form-body’, {
‘#login_field’: ‘qileilove’,
‘#password’: ‘*
});
this.click(‘input.btn.btn-primary.btn-block’); // Click the login button instead of submitting the form
this.echo(‘Browser Cookie: ‘ + this.evaluate(function() {
return document.cookie;
}));

casper.run(function() {
  var cookies = JSON.stringify((this.page.cookies));
  fs.write('cookie.txt', cookies, 'w');
  this.exit();
});
casper.wait(3000); // Wait for ajax form submission
casper.then(function() {
  this.capture('logged-in.png')
});

casper.run();
1
2
3
4
5
6

## visual regression-test

backstopjs

BackstopJS 是自动 CSS 回归测试工具,它通过比较不同视窗大小的 DOM 截图来回应你所测试的 Web 界面。可以识别出两个不同视角上的网页差异。
"scenarios": [
  {
    "label": "My Local Test",
    "url": "../../index.html",
    "hideSelectors": [],
    "removeSelectors": [
    ],
    "selectors": [
      "nav",
      ".jumbotron",
      "body .col-md-4:nth-of-type(1)",
      "body .col-md-4:nth-of-type(2)",
      "body .col-md-4:nth-of-type(3)",
      "footer"
    ],
    "readyEvent": null,
    "delay": 0,
    "onReadyScript": null,
    "onBeforeScript": null
  }
],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16


viff
咱们公司的 基于selenium的,已经废了。。。 2年多没更新了


success

Succss is a command line tool built to find image-based differences between website updates. Succss relies on npm and is installed globally.
https://github.com/B2F/Succss
也一年没更新了..


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

    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

##JavaScript验证工具
eslint

jshint

jslint

三者比较的文章
https://www.sitepoint.com/comparison-javascript-linting-tools/

## 前端mock工具

Mock.js

 Mockjs是个能够拦截页面ajax请求并模拟返回数据的小工具,借助Mockjs,前端开发中在后台测试接口还没有给的时候就可以自己拦截请求模拟数据进行愉快的开发了,所以只要制定好了协议,前后端分离开发的成本可以降到基本为0,也不需要联调工具了。

sinon.js
为Javascript提供独立的spies,stubs和mocks。没有任何依赖,可以与任何单元测试框架协同工作。


## api测试工具
SuperTest

基于SuperAgent ,提供对HTTP测试的高度抽象.
能嵌入各类测试框架,提供语义良好的断言.
var app = require('../app');
var request = require('supertest');

describe('router testing', function () {
    it('site root response', function (done) {
        request(app)
            .get('/')
            .expect('Content-Type', 'text/html; charset=utf-8')
            .expect(200)
            .end(function(err, res){
                if (err) throw err;
                done();
            });
    });

```
利用Mocha + Chai + SuperTest就可以搭建一套 前端rest-api测试框架
    






最新内容请见作者的GitHub页:http://qaseven.github.io/

  

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
测试面试题集锦(二)| 测试工具篇(附答案)
1.测试常见问题与流程篇 2.测试工具篇 3.计算机网络知识篇 4.数据库篇 5.Linux 篇 6.Python 编程篇 7.自动化测试篇:包含 Selenium、Appium 和接口测试 8.性能测试篇 9.软素质篇:10 大灵魂拷问 10.反问面试官篇 11.介绍一下测试中常用的工具(必备基础,必须掌握!) - 需求问题跟进、测试计划、风险评估登记、测试报告、复盘会议:wiki - 测试
105 0
测试面试题集锦(二)| 测试工具篇(附答案)
测试面试题集锦(二)| 测试工具篇(附答案)
102 0
测试工具记有哪些
小白笔记   jmeter  loadrunner  性能测试 postman  手动接口测试工具 QTP  自动化功能测试 jmeter-socket   压力测试(socket协议) jmeter-badboy  录制 fiddler  抓包工具 sonar  代码检测工具(sonar  gi.
1453 0
2015年末必备前端工具集
本文讲的是2015年末必备前端工具集,当我初识Javascript的时候,只有一种浏览器需要关心:NetScape。它在微软开始捆绑销售IE和操作系统之前完全统治了世界。在那些日子里,Javascript的开发者工具很弱这种观点的确是对的。
1049 0
基准测试工具
基准测试工具可以用来对数据库或者操作系统调优后的性能进行对比。MySQL数据库本身提供了一些比较优秀的工具,这里介绍另外两款更优秀、更常用的工具:sysbench和mysql-tpcc。 sysbench sysbench是一个模块化的、跨平台的、多线程基准测试工具,主要用于测试各种不同系统参数下的数据库负载情况。
1416 0
性能测试工具集锦(上)
性能测试工具集锦(上) 本文介绍了业界广泛使用的20种性能测试工具。 1、Apache JMeter http://jmeter.apache.org/  JMeter是100%纯Java的开源项目,主要用于测量性能和对功能行为做负载测试,既可以测试静态资源,又可以测试动态资源。
1022 0
waf 绕过测试工具
https://github.com/ironbee/waf-research http://www.
727 0
Linux 测试工具
功能测试压力测试工具,如ab、LoadRunner等内存泄漏检测工具静态检测工具,如splint、PC-LINT等动态检测工具,如valgrind, Rational purify等...
609 0
+关注
boxti
12535
文章
问答
文章排行榜
最热
最新
相关电子书
更多
78-许%26廖-运维助...1506527522.pdf
立即下载
沪江基于Node.js大规模应用实践
立即下载
沪江基于 Node.js大规模应用实践
立即下载