浅谈前端自动化测试

557 阅读3分钟

测试核心概念

我们为什么要测试?

  • 正确性:测试可以验证代码的正确性,在上线前做到心里有底
  • 自动化:当然手工也可以测试,通过console可以打印出内部信息,但是这是一次 性的事情,下次测试还需要从头来过,效率不能得到保证。通过编写测试用例,可 以做到一次编写,多次运行
  • 解释性:测试用例用于测试接口、模块的重要性,那么在测试用例中就会涉及如何 使用这些API。其他开发人员如果要使用这些API,那阅读测试用例是一种很好地途 径,有时比文档说明更清晰
  • 驱动开发,指导设计:代码被测试的前提是代码本身的可测试性,那么要保证代码 的可测试性,就需要在开发中注意API的设计,TDD将测试前移就是起到这么一个 作用
  • 保证重构:互联网行业产品迭代速度很快,迭代后必然存在代码重构的过程,那怎 么才能保证重构后代码的质量呢?有测试用例做后盾,就可以大胆的进行重构

一、单元测试

  • 目的:单元测试能够让开发者明确知道代码结果
  • 原则:单一职责、接口抽象、层次分离
  • 断言库:保证最小单元是否正常运行检测方法
  • 测试风格:
    • 测试驱动开发(Test-Driven Development,TDD)、行为驱动开发(Behavior Driven Development,BDD)均是敏捷开发方法论。
    • TDD关注所有的功能是否被实现(每一个功能都必须有对应的测试用例),suite配合test利用assert('tobi' == user.name)。
    • BDD关注整体行为是否符合整体预期,编写的每一行代码都有目的提供一个全面的测试用例集。expect/should,describe配合it利用自然语言expect(1).toEqual(fn())执行结果。
  • 单元测试框架:
    • better-assert (TDD断言库Github 190star 19fork)
    • should.js (BDD断言库Github 2295star 194fork)
    • expect.js (BDD断言库Github 1391star 162fork)
    • chai.js (TDD BDD双模Github 2823star 271fork)
    • Jasmine.js (BDD Github10723star1680fork)
    • Node.js本身集成 require(“assert”);
    • Intern 更是一个大而全的单元测试框架
    • QUnit 一个游离在jQuery左右的测试框架
    • Macaca 一套完整的自动化测试解决方案 国产神器来自阿里巴巴
  • 单元测试流程:
    • before -> beforeEach -> it -> after -> afterEach
    • 1.before单个测试用例(it)开始前
    • 2.beforeEach每一个测试用例开始前
    • 3.it 定义测试用例 并利用断言库进行设置 chai 如:expect(x).to.equal(true); 异步mocha
    • 4.以上专业术语叫 mock

karma

  • karma 自动化runner集成PhantomJS无刷新
    • npm install -g karma
    • npm install karma-cli —save-dev
    • npm install karma-chrome-launcher —save-dev
    • npm install karma-phantomjs-launcher —save-dev
    • npm install karma-mocha —save-dev
    • npm install karma-chai —save-dev
  • 报告和单测覆盖率检查
    • npm install karma-coverage —save-dev
    • coverageReporter: { type: 'html',dir: 'coverage/' } //配制代码覆盖测试率生成结果

代码覆盖率监测

react 测试(了解)

  • npm i react-testing-library --save-dev
  • npm i jest --save-dev
  • npm i jest-dom --save-dev
  • npm i react-scripts --save-dev

UI测试

PhantomCSS

BackstopJS

node测试

mocha

  • npm i mochawesome --save-dev
  • npm i mocha --save

./mochaRunner.js

const Mocha = require("mocha");

const mocha = new Mocha({
    reporter: "mochawesome",
    reporterOptions: {
        reportDir: './docs/mochawesome-reporter'
    }
});

mocha.addFile("./service/router.spec.js");
mocha.run(function () {
    process.exit();
});

./service/router.spec.js

const axios = require("axios");

describe('node 接口', function () {
    it('test接口 ', function (done) {
        axios
            .get("https://xcssss.com")
            .then(function (res) {
                if (res.data.xx = "xxx") {
                    done();
                } else {
                    done(new Error("数据请求出错"))
                }
            })
            .catch(function (err) {
                done(err);
            })
    });
});

阿里巴巴的前端测试神器 —— uirecorder

uirecorder官方网站

转载一篇入门的博客

二、性能测试

三、安全测试

四、功能测试