在开发测试阶段作为开发人员你永远不知道你的测试和产品有什么沙雕操作，他们只会说 xxx 页面/功能有 bug。想要复现也很难。前段时间正好看到了rrweb这个项目，索性基于它实现了定时间隔录制、主动上报、存入数据库、统一查看等功能，可以再项目开发时引入，再也不怕 bug 复现了。
走过路过先来波 start
项目地址
实测在windows下安装最新的MySQL8.0会报错，重置密码也不行，原因不明，解决办法是安装MySQL 5.7.25。MAC OS下安装最新版没有问题。
✨ 特性
- 录制并回放任意 web 界面中的用户操作 前端封装+后端。
- 开箱即用。
- 支持跨域。
🖥 支持环境
Linux,MacOS,Windows。- 现代浏览器和 IE11 及以上。
- Electron
💽 后端架构
- 基于NodeJS
- 数据库使用MySQL
- 服务框架使用express4
💻 前端架构
- 录制基于rrweb
http请求默认依赖axios可配置为jQuery以及任何与jQuery结构相同的库- 回放页面前端框架使用VUE
UI框架使用Element- 回放基于rrewb-player
📦 安装
安装MySQL并配置./server/mysql.config里的端口号及用户密码
安装NodeJS
进入项目目录
安装依赖
启动项目
operationRecord.js 参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| const record = new Record({
url: "/operationRecord/add",
name: "不知名的测试人员",
projectName: "test",
ajaxFn: $,
msg: "你这东西有bug啊",
isReport: "1",
interval: "2000",
success: function (res) {
console.log(`成功的回调${res}`);
},
error: function (err) {
console.log(`失败的回调${err}`);
},
});
record.destroy();
console.log(record);
|
🔨 示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>test</title>
</head>
<body>
<h1>test</h1>
<input type="text" />
<button>测试</button>
<button>回放</button>
<script src="./js/axios.min.js"></script>
<script src="./js/operationRecord.js"></script>
<script>
let a = new Record({
url: "ip地址+/operationRecord/add",
name: "liu",
projectName: "testProject",
msg: "测试信息",
interval: 20000,
success: function (res) {
console.log(res);
},
});
</script>
</body>
</html>
|
打开http://localhost:9527/查看结果
📖 目录结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| ├── .git
├── .gitignore
├── README.md
├── datas // 录制数据储存目录
├── node_modules
├── package.json
├── public // 静态文件目录
├── ├── .DS_Store
├── ├── css // css文件
├── ├── ├── element.min.css
├── ├── ├── fonts // 字体文件
├── ├── ├── ├── element-icons.ttf
├── ├── ├── ├── element-icons.woff
├── ├── ├── player.min.css
├── ├── ├── reset.min.css
├── ├── ├── style.css // 自定义样式
├── ├── index.html
├── ├── js // js文件
├── ├── ├── axios.min.js
├── ├── ├── element.min.js
├── ├── ├── operationRecord.js
├── ├── ├── player.min.js
├── ├── ├── replay.js
├── ├── ├── vue.js
├── ├── replayer.html
├── readme.js
├── server // 服务器文件
├── ├── local-zh.config // 表名中英文对应
├── ├── mysql.config // mysql配置文件
├── ├── mysql.js // mysql操作
├── server.js // server
|
🤝 参与共建 
提交 pr
提交 issue
