自动化测试分类

UT测试

单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。简单来说，单元就是人为规定的最小的被测功能模块，可能是一个单一函数或方法、一个完整的组件或类。

单元测试是最小巧也是最简单的测试——它们通过隔离单个组件的每一个部分，来在最小工作单元上进行断言。

单元测试侧重：检验函数的输出结果

E2E测试

e2e (端到端) 测试，致力于确保组件的一系列交互是正确的。它们是更高级别的测试，例如可能会测试用户是否注册、登录以及更新他们的用户名。这种测试运行起来会比单元测试和快照比对测试慢一些。

e2e测试侧重：从用户视角，对真实系统的访问行为进行仿真

选择

市面上常用的Jest、Mocha、Jasmine、sinon、chai、Karma等，这里推荐jest测试框架。jest 是facebook推出的一款测试框架,集成了 Mocha，chai，jsdom，sinon等功能。

为啥要做单元测试？

举个例子，之前做的一个公共的函数方法库，因为会大量的复用，所以质量尤为重要，如果开发的时候有bug没有发现，那么将会直接降低了整个项目的质量。我希望让程序去测试这些公共组件，保证每一个公共组件是可用的。

单元测试的作用

• 降低bug发生几率，快速定位bug，减少重复的手工测试。
• 提高代码质量，为项目带来更高的代码可维护性。
• 方便项目的交接工作，测试脚本就是最好的需求描述。

Vue上手

如果是用最新的脚手架搭的项目，只需要在项目目录下执行vue add @vue/cli-plugin-unit-jest即可。

如果是老项目接入，需要费点时间了，可以转到官网看下文档。

这里说一下可能会遇到的问题，就是vue单文件引入一些css，jset是会报错，找了好久，需要在jest.config.js中，配置下moduleNameMapper。这里我直接放源码：

jest.config.js：

const path = require('path');

module.exports = {
  rootDir: path.resolve(__dirname, './'),
  preset: '@vue/cli-plugin-unit-jest',
  testEnvironment: "jsdom", //node,jsdom
  moduleNameMapper: {
    '\\.(css|scss)$': '<rootDir>/tests/unit/styleMock.js'
  }
}

styleMock.js

module.exports = {};

E2E测试

如果用脚手架安装的话，是可以直接把E2E加上的，这里，我没用官方的推荐的，我使用的是testcafe这款测试框架，使用起来特别方便，根据官方文档直接就可以上手了。只简单的说一下怎么安装：

1. 项目目录执行npm install testcafe --save-dev
2. package.json增加命令 "test:e2e": "testcafe all tests/e2e/*.test.js --app-init-delay 10000 -S -s screenshots",

命令的含义：

• all – 把系统里面所能找到的浏览器都拿来当作测试对象。可选参数，你能通过逗号来分隔浏览器名称。
• tests/e2e/*.test.js – 在tests/e2e文件夹中执行所有档案名称结尾为.test.js的测试 。
• --app-init-delay 10000 – 等待十秒，用来延迟启动测试，因为要等应用程序开起来。
• -S – 当测试失败的时候屏幕截图。
• -s screenshots – 把屏幕截图存放在相对路径的screenshots文件夹中。

import { Selector } from 'testcafe';

fixture(`百度案例`).page(`https://www.baidu.com`);

test('百度搜索功能', async t => {
  await t.typeText('#kw', "王叨叨")
    .click('#su')
});

搞了一个DEMO，可以跑起来看一看：

NPM-Template

Owner：wangdaodao

Updated：2021-06-30 09:05

Watch：1

Star：1

Fork：0

此代码为 NPM 初始化模板，基于Vue-CLI搭建。