背景
解决研发过程的痛点问题
随着系统功能复杂度不断增加，功能不断增多，版本交付周期紧张等因素，在开发和实施、产品版本迭代提测过程中，系统的质量和稳定性问题逐渐突显出来，去年项目整体的提测的冒烟通过率为86%，发布的产品质量符合率为66.67%。
提测的冒烟通过率和发布的产品质量符合率则是衡量测试效果的两个重要指标。这两个指标不达标，给研发团队带来极大的困扰。
通过对研发流程的分析，提测的冒烟通过率较低一个主要的原因是提测前，研发人员只会关注本人当前修改的功能，针对研发者本人修改的功能进行自测，并没有关注整个系统，以及上下游系统的整体流程和功能，导致提测前自测的用例的不足或者不完整。没有覆盖所有的情况，导致某些缺陷无法被发现，最终导致提测的冒烟通过率较低，因此为了提高提测冒烟通过率，提测前研发必须用完整的冒烟测试用例来进行冒烟自测。
但随着系统流程和复杂度增加，涉及主流程的完整的冒烟用例越来越多，经过和测试同事共同梳理，项目主流程冒烟用例一共 300+ 条用例。
大量的冒烟测试用例，每轮提测前，要完整，认真执行一遍的话，需要占用研发人员大量的时间，在研发任务繁重的迭代版本周期内，难以保证冒烟用例的执行质量
由于自测环境差异，会出现环境差异导致的执行结果不一致的情况（在我的环境没问题呀！！）
小结
- 随着系统复杂度增加，上下游系统数据耦合度增加，功能影响范围越来越难以判断，一个小功能的改动，容易影响整个系统以及上下游系统，且该影响难以提前被发现。
- 冒烟自测用例数量庞大，冒烟耗时，且存在大量重复性工作，同一个用例，每轮提测，每个研发人员都需要执行相同的用例，效率低下
- 冒烟用例是否被执行无法统计，执行结果无法查看，用例执行成功失败断言无统一标准
自动化冒烟测试方案
概要
通过综合运用Chrome Recorder、Chrome 扩展程序、Puppeteer，Jest，Koa等技术，为Web应用程序快速建立 自动化E2E 测试套件和团队冒烟测试用例共享管理平台，解决上述问题，提前发现问题，降低回归风险，提高冒烟通过率及产品质量符合率，促进项目的整体成功，在此方案的加持下，今年项目整体的提测的冒烟通过率从86%提高到96.43%，发布的产品质量符合率从66.67%提升至87.5%，并得到测试同事的肯定
整体流程
录制用例
-
安装chrome扩展程序
-
打开录制扩展面板，新建录制用例
-
按用例步骤在系统上操作，录制过程会记录用户的行为，如单击、滚动、输入等
-
操作demo视频
录制用例
录制回放
-
通过回放检查录制执行情况，根据执行情况，可以对录制步骤进行调整和增删步骤
-
操作demo视频
回放录制
用例同步共享平台
-
登录用例共享平台
-
选择同步的项目，维护用例名称
-
可按步骤修改步骤脚本代码，替换输入值
-
操作demo视频
同步用例共享平台
执行用例，查看用例执行结果
-
登录用例共享平台
-
新增/加入项目（团队/个人）
-
单步/批量自动执行用例（浏览器环境/后台环境）
-
查看用例执行截图
-
产看用例执行相关接口报文
-
操作demo视频
浏览器环境执行用例
后台执行用例
小结
在业务环境，迅速多变，系统复杂度不断增加，上下游系统数据耦合度增加的背景下，系统版本迭代后的稳定性逐渐降低，为了提高开发项目的冒烟通过率及产品质量符合率，研发团队需要高质量完成冒烟测试，但海量的冒烟用例需要花费大量时间且存在大量重复行操作，且用例是否通过无标准，无法衡量，因此，决定在制作自动化冒烟工具给研发团队使用，提升工作效率。在调研行业和公司相关技术后，发现自动化测试普遍存在维护成本高，时间成本高，需要使用者具备一定的技术水平等弊端，实现自动化测试投入和产出不成比例，会违背提升研发效率的初衷。因此，通过综合运用Chrome Recorder、Chrome 扩展程序、Puppeteer，Jest，Koa等技术，为Web应用程序快速建立自动化E2E 测试套件和团队冒烟测试用例共享管理平台，实现轻量化，简单易用的解决方案，一定程度上解决目前自动化测试行业方案的普遍弊端，提升开发效率，提高冒烟通过率及产品质量符合率。
方案实现
数据库
用例共享平台数据库包含：用户表，团队成员表，团队信息表，项目表，测试用例表一共5张表，数据库选择mysql，表结构与表的关系见下图
ER
表结构
-
group_info 团队信息表
-
group_user 团队成员表
-
project_info 项目表
-
test_info 测试用例表
-
user_info 用户表
用例共享管理平台(服务端+前端)
服务端
-
使用的技术栈
Koa、nodejs、Typescript、 puppeteer
-
系统架构
服务端系统架构为三层架构，分为model，service，controller三层
-
Model层
封装数据库操作，提供数据访问接口
-
Service层
处理业务逻辑，并调用model层提供的数据访问接口，进行数据处理和业务操作；对controller提供业务逻辑的服务接口
-
Controller层
接收前端用户http请求，解析参数，调用相应的Service处理请求，并将处理结果封装成http响应返回给客户端
-
前端
-
使用的技术栈
Vue3.x、Typescript、sass、Element-Plus、Vite、koa、alova
-
系统架构
Chrome Recorder 扩展程序
为了更方便管理和维护用例的整个生命周期，需要打通Chrome Recorder和用例共享平台，方便用户在录制用例后，可以直接操作同步用例到共享平台，因此增加了Chrome Recorder 扩展程序功能组件，该组件包含以下主要功能：
登录&配置
配置后台ip地址，通过用户名和密码可以登录到用例共享平台
脚本生成
根据录制生成的步骤json文件，按步骤类型动态生成puppeteer脚本
{
title: "Recording 2023/5/18 at 09:22:48",
steps: [
{
type: "setViewport",
width: 1111,
height: 979,
deviceScaleFactor: 1,
isMobile: false,
hasTouch: false,
isLandscape: false,
},
{
type: "navigate",
url: "http://***************",
assertedEvents: [
{
type: "navigation",
url: "***************",
title: "***********",
},
],
},
{
type: "click",
target: "main",
selectors: [["input[type='password']"]],
offsetY: 22,
offsetX: 71.984375,
},
{
type: "change",
value: "admin",
selectors: ["input[type='password']"],
target: "main",
},
],
}
const { steps } = JSON.parse(localStorage.getItem('recording') as string);
...
/**
* @description: 生成脚本
* @param {*} steps 步骤对象
* @return {*}
*/
const showSteps = (steps: any) => {
const st = steps.map(
(s: any) =>
(s = {
...s,
script: genScript[s.type] ? genScript[s.type](s) : '',
oldValue: getOldValue(s),
newValue: ''
})
);
puppeteerSteps.value = st;
// 生成puppeteer完整script
let stepScript = '';
st.forEach((s: any) => {
stepScript += s.script;
});
const puppeteerScript = `${header()}${stepScript}${footer()}`;
finalScript = puppeteerScript;
console.log('最终script：', puppeteerScript);
};
用例信息管理
登录后，可以选择用户相关的项目，维护用例名和描述，即可一键将录制的脚本同步到用例共享平台所选的项目中。同步前，用户也可以根据需要，修改步骤的脚本，如替换修改（支持js表达式）值等
其他功能
- 工程化打包复制chrome 扩展程序相关文件
import { copy } from 'copy-vite-plugin';
plugins: [
copy({
pattern: [
// copy dir
{ from: 'extension/', to: '/' }
]
})
]
