前端自动化UI测试的完整方案

最新推荐文章于 2025-09-25 19:28:42 发布

原创

最新推荐文章于 2025-09-25 19:28:42 发布 · 876 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#职场和发展 #面试 #职场经验 #自动化测试 #学习 #功能测试 #程序员

开发公共平台项目，测试资源相对比较少，因此对开发者自身而言，为了维护项目的稳定性，需要对平台做各类测试，即使有测试环境，但是也很容易缺乏测试场景导致带着bug上线的情况。

因此我们需要做完整自动化测试方案，来避免这类常规错误，提高平台的可用性和稳定性。

这里先简单描述自动化测试的分类：

单元测试，验证独立的单元模块代码或函数是否正常工作
集成测试，验证多个单元模块间的协同工作
UI 测试，只针对前端UI部分测试，后端数据采用mock方式
端到端测试，从用户的角度，通过机器来模仿用户在真实浏览器中验证应用交互
快照测试，验证程序的UI变化

接下来我们将根据这些测试类如何在项目中落地完整方案。

单元测试

前端项目主要用的单元测试框架为Jest和Mocha，下面就Jest框架如何实现一个单元测试。

实现步骤

1、安装依赖

npm i jest --save-dev
# 如果是typescript还需要安装 ts
npm i ts-jest babel-jest --save-dev
# 安装类型
npm i @types/jest --save-dev

2、新增测试命令，在package.json中scripts新增代码

{
    ...
    "scripts": {
        "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
  },
}

3、新增配置文件jest.config.js，参考配置如下：

module.exports = {
    "testEnvironment": "node",
    testMatch: [ //匹配测试用例的文件
        '<rootDir>/test/**/*.test.ts'
    ],
    transform: {
        '^.+\\.js$': '<rootDir>/node_modules/babel-jest', // babel编译
        '^.+\\.ts$': '<rootDir>/node_modules/ts-jest', // typescript编译
    },
    "collectCoverage": true
}

4、编写单元测试代码，在根目录下新建测试文件test/sum.test.js，标识对a.ts文件做测试，代码如下：

//sum.ts
export const sum = (a, b) => {
    return a + b;
}

//sum.test.ts
import { sum } from '../src/sum'

test("test two num sum", async () => {
    const res = sum(5, 6);
    expect(typeof res).toBe("number")
    expect(res).toBe(11)
})

5、开始自动化测试yarn test或者npm run test，然后会出现如下：