部份基本概念及内容:
单位测试:
以模块为单位,测试你代码的自身,确保你编写的模块另有逻辑准确。只需输入的值稳定,输出的值也应当不发生转变
前端自动化测试:
界面回归测试 测试界面是不是平常,包含案牍,图片等。
功用测试 包含交互逻辑和功用模块是不是相符预期。
机能测试 页面机能愈来愈遭到关注,而且机能须要在开辟过程当中延续关注,不然很轻易跟着营业迭代而下落。
本文重要的内容集合在界面回归测试和功用测试。这2部份的测试事情是经由过程模仿用户举行页面操纵,经由过程检察页面状况的变化,从而检测功用是不是运转平常:它的测试流程是:
DOM元素拔取
触发DOM元素绑定事宜
检察绑定事宜效果是不是标记预期
怎样去做前端UI自动化测试
要完成前端UI自动化测试起码须要测试框架,断言库。
东西的挑选
Headless无界面:
PhantomJS.包含了
WebKit
浏览器引擎和JavaScript API
的剧本诠释器,因而能够去运转js代码。只不过不供应图形界面,其他的功用都和浏览器一样。比方一些爬虫爬了网站,这个网站并非静态的,那末须要实行Js才行。因而PhantomJS
供应了实行页面中的代码功用。casperjs.基于
PhantomJS
举行开辟,供应的功用也和PhantomJS
,不过语法越发精练。不像PhantomJS callback hell
那样恶心。同时和PhantomJS
差别的处所还在于它直接供应了测试的功用,比方对长途DOM
的断言测试,还能编写功用测试套件。详细的API文档拜见casperjs
的官网。
casper.start('http://www.google.fr/', function() { //翻开谷歌主页,增加页面加载完成时的回调函数
this.test.assertTitle('Google', 'google homepage title is the one expected'); //检测页面题目是不是是'Google',假如是,输出第二个参数指定的字符串
this.test.assertExists('form[action="/search"]', 'main form is found'); //检测页面中是不是存在挑选器指定的元素,假如存在输出第二个参数指定的字符串
this.fill('form[action="/search"]', { //添补表单并提交,实行搜刮操纵
q: 'foo'
}, true);
});
casper.then(function() {
this.test.assertTitle('foo - Recherche Google', 'google title is ok'); //检测搜刮效果页的页面题目是不是准确
this.test.assertUrlMatch(/q=foo/, 'search term has been submitted'); //检测搜刮效果页的网址是不是婚配指定的正则表达式
this.test.assertEval(function() {
return __utils__.findAll('h3.r').length >= 10; //自定义一个检测函数
}, 'google search for "foo" retrieves 10 or more results');
});
casper.run(function() {
this.test.renderResults(true); //输出检测效果
});
UI测试
nightwatch (简朴的语法,能够疾速上手运用壮大的
Selenium WebDriver API
来在DOM
元素上实行敕令和断言)
module.exports = {
'Demo test Google' : function (client) {
client
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.assert.title('Google')
.assert.visible('input[type=text]')
.setValue('input[type=text]', 'rembrandt van rijn')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.pause(1000)
.assert.containsText('ol#rso li:first-child',
'Rembrandt - Wikipedia')
.end();
}
};
nightmare.js 基于
phatomJS
为测试封装的的一套High level Api
(异常的语义化:click, refresh, goto…).同时nightmare
还基于electron
,那末它也供应了GUI的界面东西,当你运用nightmare.js
举行自动化测试的时刻就能够看到一切的模仿用户动作了。
yield Nightmare()
.goto('http://yahoo.com')
.type('input', 'github nightmare')
.click('.searchsubmit');
protractor
angular
的亲儿子,angular团队
本身开辟的e2e
测试东西。一样供应模仿用户的操纵的API,来考证Angular运转状况。selenium 临时还没用过,网上有大批的关于它的材料
macaca 本系列要讲的重点
Appium 支撑
ios/android/firefoxos
多种平台的测试,native
、h5
、hybrid
都支撑,以及一切支撑jsonWireProtocal
协定的剧本语言:python
,java
,nodejs
ruby
都能够用来誊写用例.它现实上包含了: a. 基于express
的server
用于发送/吸收client
端的协定敕令;作为
bootstrap
客户端用于将敕令传递给对应的UIAutomator/UIAutomation/Google’s Instrumentation
测试框架
测试框架的作用就是运转测试开辟人员编写的剧本东西,测试框架会抓取到代码抛出的AssertionError
,并在控制台或许网页中输出。测试框架供应了特定的测试语法,平常分为两类TDD(测试驱动开辟)
和BDD(行动驱动开辟)
。测试框架一般供应TDD(测试驱动开辟)
或BDD(行动驱动开辟)
的测试语法来编写测试用例。
TDD:是指先写好测试代码,然后再依据测试来写代码。它的步骤平常是:
写个测试
写出起码数目的代码,使其坚持测试经由过程
优化代码
反复前面的事情
BDD:不去针对代码细节,而是针对行动举行测试
现在用的比较多的测试框架是:
mocha
jasmine
断言库
断言的作用就是推断源码的现实实行效果与预期效果是不是雷同,假如不一致就抛出一个毛病。
chai
chai.js
供应了assert
, expect
, should
三种作风的断言。可依据本身的喜欢去挑选断言作风。详细API请查阅相干的文档。
运用上面的东西基本上就能够最先举行测试剧本的测试事情了。
下面一篇文章就会引见怎样运用macaca
来对hybird
运用举行测试。