利用现代浏览器的强大功能还原操作并储存 V1.0.0
实测在windows
下安装最新的MySQL8.0
会报错,重置密码也不行,原因不明,解决办法是安装MySQL 5.7.25。MAC OS
下安装最新版没有问题。
✨ 特性
- 录制并回放任意 web 界面中的用户操作 前端封装+后端。
- 开箱即用。
- 支持跨域。
🖥 支持环境
Linux
,MacOS
,Windows
。- 现代浏览器和 IE11及以上。
- Electron
💽 后端架构
💻 前端架构
📦 安装
-
安装MySQL并配置
./server/mysql.config
里的端口号及用户密码。 -
导入提供的
./test.sql
文件,每个项目可以建一个表。 -
安装NodeJS。
-
进入项目目录。
-
安装依赖:
npm i #国内使用cnpm
-
启动项目:
node server
operationRecord.js参数
const record=new Record({
url: '/operationRecord/add',//后台服务器url,如未修改服务器文件,应为:服务端ip+/operationRecord/add
name: '不知名的测试人员',//提交人,会显示在统计页面。默认:unknow
projectName: 'test',//需要连接的表名
ajaxFn:$,//ajax 提交函数,默认依赖axios,如果项目中使用的是jquery直接写$,可以使用人和和jquery结构一致的ajax库
msg:'你这东西有bug啊',//提交bug信息,最多255
isReport:'1',//是否认为上报,1:是,0:否。默认:0
interval:'2000',//提交间隔,默认10秒,单位ms
success: function (res) {
console.log(`成功的回调${res}`);
},
error: function (err) {
console.log(`失败的回调${err}`);
}
});
//方法
record.destroy(); //销毁
console.log(record) //查看属性
🔨 示例
<!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/
查看结果
📖 目录结构
├── .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
📄 TODO
- 自动引入
rrweb
以及rrweb-player
最新版。 rrweb
与本项目代码分离,使用时自动打包压缩。- 更换
MySQL
为其他轻量级数据库。 - 添加已读功能。
- 完善数据传输部分。
- 解耦。