博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
FE.TEST-前端测试初探
阅读量:6989 次
发布时间:2019-06-27

本文共 3505 字,大约阅读时间需要 11 分钟。

clipboard.png

前言

测试可以提供快速反馈,根据测试用例覆盖代码,从而提升代码开发效率和质量。根据投入产出价值,通常迭代较快的业务逻辑不做测试用例,对通用常用的代码基本组件或框架需要编写测试。

在 2018 年年初对测试工具的整体回顾:

测试与开发

TDD 测试驱动开发

测试驱动开发的基本思想就是在开发功能代码之前,先编写测试代码。也就是说在明确要开发某个功能后,首先思考如何对这个功能进行测试,并完成测试代码的编写,然后编写相关的代码满足这些测试用例。然后循环进行添加其他功能,直到完全部功能的开发。(示例)

//mochasuite('Array', function() {  setup(function() {    // ...  });  suite('#indexOf()', function() {    test('should return -1 when not present', function() {      assert.equal(-1, [1,2,3].indexOf(4));    });  });});

BDD 行为驱动开发

Behavior Driven Development,行为驱动开发是一种敏捷软件开发的技术,它鼓励软件项目中的开发者、QA和非技术人员或商业参与者之间的协作。

与一般的自动化测试(如单元测试、服务测试、UI 测试)不一样的是,BDD 是由多方参与的测试开发方式。如在使用 Protractor 写 Angular 的 E2E 测试的时候,所以的测试都是前端测试人员编写的。BDD 最重要的一个特性是:由非开发人员编写测试用例,而这些测试用例是使用自然语言编写的 DSL(领域特定语言)。换多话来说,业务人员、测试人员、客户等利益相关者,以习惯的方式编写相关的测试用例,再由开发人员去实现相关的测试。

(示例)

//Jasminedescribe("A suite is just a function", function() {  var a;  it("and so is a spec", function() {    a = true;    expect(a).toBe(true);  });});

单元测试 Unit Testing

断言库

const assert = require('assert');assert.equal(1, '1');//okconst obj1 = {a: {b: 1}};const obj2 = {a: {b: 1}};assert.deepEqual(obj1, obj2);//ok
should(null).not.be.ok();({ a: 10}).should.be.eql({ a: 10 });'ab'.should.be.equalOneOf(['a', 10, 'ab']);
//shouldchai.should();foo.should.be.a('string');foo.should.equal('bar');foo.should.have.lengthOf(3);tea.should.have.property('flavors')  .with.lengthOf(3);
//exceptvar expect = chai.expect;expect(foo).to.be.a('string');expect(foo).to.equal('bar');expect(foo).to.have.lengthOf(3);expect(tea).to.have.property('flavors')  .with.lengthOf(3);
//assertvar assert = chai.assert;assert.typeOf(foo, 'string');assert.equal(foo, 'bar');assert.lengthOf(foo, 3)assert.property(tea, 'flavors');assert.lengthOf(tea.flavors, 3);

模拟响应数据

Mock.mock({"number|1-100": 100})//{"number": 30}Mock.mock({'regexp': /\d{5,10}/})//{"regexp": "365355673"}Mock.mock({  "object|2-4": {    "110000": "北京市",    "120000": "天津市",    "130000": "河北省",    "140000": "山西省"  }})/*{  "object": {    "120000": "天津市",    "130000": "河北省",    "140000": "山西省"  }}*/Random.date()//"2007-10-24"Random.image('200x100', '#4A7BF7', 'Hello')

端到端测试 End to End Testing

在浏览器中边预览执行可视化测试用例,像selenium一样模拟用户操作,可以接入Mocha和chai

describe('My First Test', function() {  it('clicking "type" navigates to a new url', function() {    cy.visit('https://example.cypress.io')    cy.contains('type').click()    // Should be on a new URL which includes '/commands/actions'    cy.url().should('include', '/commands/actions')  })})

模拟浏览器交互

基于 Electron 的框架,针对 Web 自动化测试和爬虫。

Node.js的下一代WebDriver测试自动化框架,参考官方

性能测试 Performance Testing

持续集成 Continuous Integration

持续集成是一种非常优秀的多人开发实践,通过代码push触发钩子,实现自动运行编译、测试等工作。接入持续集成后,我们的每一次push代码,每个Merge Request都会生成对应的测试结果,项目的其他成员可以很清楚地了解到新代码是否影响了现有的功能,在接入自动告警后,可以在代码提交阶段就快速发现错误,提升开发迭代效率。

持续集成会在每次集成时提供一个几乎空白的虚拟机器,并拷贝用户提交的代码到机器本地,通过读取用户项目下的持续集成配置,自动化的安装环境和依赖,编译和测试完成后生成报告,在一段时间之后释放虚拟机器资源。

开源持续集成构建项目,采用yaml格式。

nodejs下面的代码测试覆盖率,原理是通过istanbul生成测试数据,上传到coveralls网站上,然后以badge的形式展示出来

代码风格

目前比较流行js校验工具有 JSLint、JSHint、JSCS、ESLint, 它们之前的差异比较可以参考 A Comparison of JavaScript Linting Tools,推荐使用

代码风格检查同样也可以集成到 ci,只需要在 ci 命令前追加检查命令即可。以 eslint 为例:

"scripts": {    // ..    "lint": "eslint .",    "cov": "istanbul cover .",    "ci": "tnpm run lint && TEST_TIMEOUT=60000 istanbul cover ." }

此时构建会先做代码风格检查,再做单元测试、覆盖率统计,如代码风格检查失败,会直接导致构建中断。

流行的测试框架

Facebook 出品的一个测试框架,相对其他测试框架,其一大特点就是就是内置了常用的测试工具,比如自带断言、测试覆盖率工具。与React搭配更加。 ()

一个测试集成框架,可以方便地以插件的形式集成测试框架、测试环境、覆盖率工具等等。与Angular搭配更加。(使用 vue-cli 可以快速生成一个 Vue 项目,其中包含了 Webpack 和 Karma 以及覆盖率统计的配置)

&

参考

其他参考资料:

转载地址:http://gbzvl.baihongyu.com/

你可能感兴趣的文章
【Linux】Linux系统编程入门
查看>>
用JS,躺赢30万
查看>>
阿里云操作审计 - 日志安全分析(一)
查看>>
Sanic 微信公众号开发 --- 初探
查看>>
利用CSS、JavaScript及Ajax实现图片预加载
查看>>
学习 webpack 前,你需要了解的那些概念
查看>>
基于PhantomJs的Java后台网页截图技术
查看>>
Android自定义标签列表控件LabelsView解析
查看>>
关于二进制的一点小思考
查看>>
多账号配置SSH
查看>>
adb通信协议分析以及实现(二):adb服务进程发现设备
查看>>
用Vue实现省市区三级联动
查看>>
五、FFmpeg零基础(2)-FFmpeg的编译
查看>>
喜大普奔,Ant Design of Vue 1.0版本发布
查看>>
存储系统设计——NVMe SSD性能影响因素一探究竟
查看>>
高性能的视差动画【译】
查看>>
Scrapy爬虫以及Scrapyd爬虫部署
查看>>
有何建议给即将步入职场的计算机应届毕业生?
查看>>
Android NDK开发之旅2 C语言基础 指针
查看>>
选择了软件测试,你后悔吗?
查看>>