前端自动化测试的一些研究

自动化测试分类

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-03-05 13:17
Watch:1
Star:1
Fork:0
此代码为 NPM 初始化模板,基于Vue-CLI搭建。

添加新评论