今天给你们分享的主题的是Javascript&QA⼯程师。看到这个主题,可能有人问:前端开发完就OK了,剩下的丢给测试就行,哪里还须要关心这些?但事实上呢,测试是前端开发很是重要的环节,也是迈向高级前端工程师的必经之路!javascript
本文主要分为一下四个部分:html
· 单元测试前端
· 性能测试vue
· 功能测试java
· 安全测试node
一. 单元测试ios
单元测试(unit testing),是指对程序中的最小可测试单元进行检查和验证。对于单元测试中单元的含义,通常来讲,要根据实际状况去断定其具体含义,如C语言中单元指一个函数,Java里单元指一个类,图形化的软件中能够指一个窗口或一个菜单等。总的来讲,单元就是人为规定的最小的被测功能模块。单元测试是在软件开发过程当中要进行的最低级别的测试活动,软件的独立单元将在与程序的其余部分相隔离的状况下进行测试。git
在一种传统的结构化编程语言中,好比C,要进行测试的单元通常是函数或子过程。在像C++这样的面向对象的语言中, 要进行测试的基本单元是类。对Ada语言来讲,开发人员能够选择是在独立的过程和函数,仍是在Ada包的级别上进行单元测试。单元测试的原则一样被扩展到第四代语言(4GL)的开发中,在这里基本单元被典型地划分为一个菜单或显示界面。github
常常与单元测试联系起来的另一些开发活动包括代码走读(Code review),静态分析(Static analysis)和动态分析(Dynamic analysis)。静态分析就是对软件的源代码进行研读,查找错误或收集一些度量数据,并不须要对代码进行编译和执行。动态分析就是经过观察软件运行时的动做,来提供执行跟踪,时间分析,以及测试覆盖度方面的信息。web
对于前端来讲就是一个函数。
(1)前端为何要作单元测试?
我认为主要缘由为一下5点:
1.正确性
测试能够验证代码的正确性,在上线前作到内心有底。
2.自动化
固然手工也能够测试,经过console能够打印出内部信息,可是这是一次性的事情,下次测试还须要从头来过,效率不能获得保证。经过编写测试用例,可以作到一次编写,屡次运行。
3.解释性
测试用例用于测试接口、模块的重要性,那么在测试用例中就会涉及如何使用这些API。其余开发人员若是要使用这些API,那阅读测试用例是一种很好地途径,有时比文档说明更清晰。
4.驱动开发,指导设计
代码被测试的前提是代码自己的可测试性,那么要保证代码的可测试性,就须要在开发中注意API的设计,TDD将测试前移就是起到这么一个做用。
5.保证重构
互联网行业产品迭代速度很快,迭代后必然存在代码重构的过程,那怎么才能保证重构后代码的质量呢?有测试用例作后盾,就能够大胆的进行重构。
(2)单元测试原则&测试风格
单元测试的目的是为了让开发者明确的知道代码结果,原则有三点:单一职责,接口抽象,层次分离。而单元测试必备的东西是断言库,断言库是保证最小单元可否正常运行的检测方法。
测试风格:测试驱动开发(Test-Driven Development,TDD)、(BehaviorDriven Development,BDD)行为驱动开发均是敏捷开发方法论。
TDD关注全部的功能是否被实现(每个功能都必须有对应的测试用例),suite配合test利用assert('tobi' == user.name);
BDD关注总体行为是否符合总体预期,编写的每一行代码都有目的提供一个全面的测试用例集。expect/should,describe配合it利用天然语言expect(1).toEqual(fn())执行结果。
(3)单元测试框架
单元测试的主要框架:
(3)单元测试运行流程
每个测试用例组经过 describe进行设置
1.before单个测试用例(it)开始前
2.beforeEach每个测试用例开始前
3.it定义测试用例 并利用断言库进行
设置chai如:expect(x).to.equal(true);异步mocha。
4.以上专业术语叫mock
(4)自动化单元测试 karma
Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular更名为Karma。Karma是一个让人感到很是神秘的名字,表示佛教中的缘分。这个名字和LOL中的扇子妈同名 - -,比较佛系。
On the AngularJS team, we rely on testing and we always seek better tools to make our life easier. That‘s why we created Karma - a test runner that fits all our needs.
Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具可用于测试全部主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其余代码编辑器一块儿使用。
能够生成报告和单测覆盖率检查。
Karma.conf.js
// Karma configuration // Generated on Thu Mar 22 2018 20:30:24 GMT+0800 (CST) module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ['jasmine'], // list of files / patterns to load in the browser files: [ './unit/**/*.js', './unit/**/*.spec.js' ], // list of files / patterns to exclude exclude: [ ], //指定对应的JS文件 去执行代码的覆盖率 preprocessors: { './unit/**/*.js': ['coverage'] }, // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter reporters: ['progress', 'coverage'], coverageReporter: { type : 'html', dir : 'coverage/' }, // web server port port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: false, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['PhantomJS'], //黑窗小独立的运行环境 singleRun: true, // Concurrency level // how many browser should be started simultaneous concurrency: Infinity }) }
单元测试demo:
// index.js window.test = function (num) { if(num == 1){ return 1 }else{ return num + 1; } } // index.spec.js describe("测试基本的函数API",function(){ it("+1函数的应用",function(){ expect(window.test(1)).toBe(1); }); });
二. 功能测试
功能测试主要是e2e测试。端到端测试是一种用于测试应用程序的流程是否从开始到结束执行的方法。执行端到端测试的目的是识别系统依赖性,并确保在各类系统组件和系统之间传递正确的信息。
通俗点说,就是把整个系统看成一个黑盒,测试人员模拟真实用户在浏览器中操做UI来测试。
常见的几种e2e测试框架,今天主要讲selenium,由于phantomjs,无头浏览器不在维护,因此rize与其造成犄角之势。能够在终端进行端对端测试。
Nightwatch是一个功能很是强大,配置巨复杂的端对端测试框架,vue-cli就是用的night watch。
(1)Selenium
Selenium 是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中,就像真正的用户在操做同样。支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Firefox,Safari,Google Chrome,Opera等。这个工具的主要功能包括:测试与浏览器的兼容性——测试你的应用程序看是否可以很好得工做在不一样浏览器和操做系统之上。测试系统功能——建立回归测试检验软件功能和用户需求。支持自动录制动做和自动生成 .Net、Java、Perl等不一样语言的测试脚本。
Selenium是ThoughtWorks公司的一个强大的开源Web功能测试工具系列,采用Javascript来管理整个测试过程,包括读入测试套件、执行测试和记录测试结果。它采用Javascript单元测试工具JSUnit为核心,模拟真实用户操做,包括浏览页面、点击连接、输入文字、提交表单、触发鼠标事件等等,而且可以对页面结果进行种种验证。也就是说,只要在测试用例中把预期的用户行为与结果都描述出来,咱们就获得了一个能够自动化运行的功能测试套件。(Selenium的核心是Javascript写的,他和浏览器进行通讯,把测试用例的信息发送给浏览器执行,从而达到自动化测试的目的。)
我这里是用火狐测试的,须要先下载一个driver,geckdriver。而后nmp i selenium-webdriver --save;
这里用代码控制打开火狐,找到name为‘wd’的元素并键入‘node’,而后按会车,最后退出火狐。代码以下:
const {Builder, By, Key, until} = require('selenium-webdriver'); (async function example() { let driver = await new Builder().forBrowser('firefox').build(); try { await driver.get('https://www.baidu.com/'); await driver.findElement(By.name('wd')).sendKeys('node', Key.RETURN); await driver.wait(until.titleIs('node_百度搜索'), 1000); } finally { await driver.quit(); } })();
使用rize框架,写法更为简洁:
const Rize = require('rize'); const rize = new Rize(); rize .goto('https://github.com/') .type('input.header-search-input', 'node') .press('Enter') .waitForNavigation() .assertSee('Node.js') .end();
三. UI测试
前端,做为一个传统的页面仔,本身写的样式,内心得有点B数,不能老等着人家UI走查,说你哪哪差几像素。
这里给你们介绍一个神奇的框架 BackstopJs。
BackstopJS automates visual regression testing of your responsive web UI by comparing DOM screenshots over time.
Backstop配置文件,backstop.json。
{ "id": "天骄", "viewports": [ { "label": "phone", "width": 375, "height": 667 }, { "label": "tablet", "width": 1024, "height": 768 } ], "onBeforeScript": "chromy/onBefore.js", "onReadyScript": "chromy/onReady.js", "scenarios": [ { "label": "qq", "cookiePath": "backstop_data/engine_scripts/cookies.json", "url": "http://map.qq.com/m/", // 这里是待测试的UI界面URL "referenceUrl": "", "readyEvent": "", "readySelector": "", "delay": 0, "hideSelectors": [], "removeSelectors": [], "hoverSelector": "", "clickSelector": "", "postInteractionWait": "", "selectors": [], "selectorExpansion": true, "misMatchThreshold" : 0.1, "requireSameDimensions": true } ], "paths": { "bitmaps_reference": "backstop_data/bitmaps_reference", "bitmaps_test": "backstop_data/bitmaps_test", // 这里放UI的设计图 "engine_scripts": "backstop_data/engine_scripts", "html_report": "backstop_data/html_report", "ci_report": "backstop_data/ci_report" }, "report": ["browser"], // 报表的方式,这里是浏览器 "engine": "chrome", "engineFlags": [], "asyncCaptureLimit": 5, "asyncCompareLimit": 50, "debug": false, "debugWindow": false }
测试的结果页面很是友好,她会把你的界面和UI图的差别标注出来:
三. 性能测试
下面说下性能测试。
前端性能主要分为两部分,第一是页面性能,如秒开率等,第二是代码性能。今天主要说代码性能。
今天主要讲代码性能测试 benchmarkjs,A benchmarking library that supports high-resolution timers & returns statistically significant results
字面意思理解,支持高分辨率计时器的基准测试库,并返回统计上显著的结果。
面向切面编程AOP无侵入式统计。Benchmark基准测试方法,它并非简单地统计 执行多少次测试代码后对比时间,它对测试有着 严密的抽样过程。执行多少次取决于采样到的数 据可否完成统计。根据统计次数计算方差。
话很少说,直接看代码:
var Benchmark = require('benchmark'); var suite = new Benchmark.Suite; suite.add('使用正则匹配字符串', function() { /o/.test('Hello World!'); }) .add('使用字符串查找', function() { 'Hello World!'.indexOf('o') > -1; }) //添加监听 .on('cycle', function(event) { console.log(String(event.target)); }) //执行结果 .on('complete', function() { console.log('更快的是-》 ' + this.filter('fastest').map('name')); }) // run async .run({ 'async': true });
执行结果以下:
下面说下 压力测试。
对网络接口作压力测试须要检查的几个经常使用指标有吞吐率、响应时间和并发数,这些指标反映了服务器并发处理能力。
PV网站当日访问人数 UV独立访问人数。PV天天几十万甚至上百万就 须要考虑压力测试。换算公式QPS=PV/t ps:1000000/ 10*60*60=27.7(100万请求集中在10个小时,服务器每秒处理27.7 个业务请求);
ab -c 100 -n 100 http://localhost:8001 每秒持续发出28个请求。 Request per second 表示服务器每秒处理请求数 即为QPS 。Failed requests 表示这次请求失败的请求数 理论上压测值越大增长 Connection Times 链接时间,它包括客户端向服务器端创建链接、服 务器端处理请求、等待报文响应的过程。
经常使用的压力测试工具是ab、siege、http_load。
四. 安全测试
常见的安全攻击有三种:XSS, CSRF, SQL注入。
(1)XSS 跨站点脚本攻击
在input中输入未闭合标签,测试是否会执行。
><scrīpt>alert(document.cookie)</scrīpt>
(2)CSRF,Sql注入。
Sql注入。 ' or 1=1- -
(3)Csrf跨站请求伪造
这是一个cookies漏洞(身份验证),用户访问了危险网站B后,B会访问偷偷的让用户访问正规网站A。正规网站对身份进行校验后(经过cookies)认为这是同一个用户,则进行操做
目前没找到什么好的测试方法。
总结:前段时间不少前端名人的博客网站都被攻击了,不少人吐槽前端天花板低,因此学习一门后台语言对咱们前端开发人员对思惟培养相当重要。而是否能写好单测很是重要。这也是咱们迈向高级前端工程师的必经之路。
最后我想说一句话:不懂测试的UI不是好前端;不懂后台的产品不是好前端。前端路漫漫,吾将上下而求索。