/operationRecord

记录产品,测试的沙雕操作,方便debugger

Primary LanguageJavaScript

利用现代浏览器的强大功能还原操作并储存 V1.0.0

示例图片

实测在windows下安装最新的MySQL8.0会报错,重置密码也不行,原因不明,解决办法是安装MySQL 5.7.25MAC OS下安装最新版没有问题。

✨ 特性

  • 录制并回放任意 web 界面中的用户操作 前端封装+后端。
  • 开箱即用。
  • 支持跨域。

🖥 支持环境

  • Linux,MacOS,Windows
  • 现代浏览器和 IE11及以上。
  • Electron

💽 后端架构

  1. 基于NodeJS
  2. 数据库使用MySQL
  3. 服务框架使用express4

💻 前端架构

  1. 录制基于rrweb
  2. http请求默认依赖axios可配置为jQuery以及任何与jQuery结构相同的库
  3. 回放页面前端框架使用VUE
  4. UI框架使用Element
  5. 回放基于rrewb-player

📦 安装

  1. 安装MySQL并配置./server/mysql.config里的端口号及用户密码。

  2. 导入提供的./test.sql文件,每个项目可以建一个表。

  3. 安装NodeJS

  4. 进入项目目录。

  5. 安装依赖:

    npm i #国内使用cnpm
  6. 启动项目:

    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

  1. 自动引入rrweb以及rrweb-player最新版。

    现在使用npm 引入 rrweb

  2. rrweb与本项目代码分离,使用时自动打包压缩。

    ./public/js/operationRecord.js可以看作为稳定版的。

    现在每次启动服务时都会询问是否打包,默认否,打包后的文件为./public/js/operationRecord.min.js`。

    同时你可以单独执行node tools来进行打包。

  3. 更换MySQL为其他轻量级数据库。

    (本项目对数据库要求不高,mysql比较成熟,迁移至MongoDB成本过高)

  4. 添加已读功能。

  5. 完善数据传输部分。

  6. 解耦。

✔ 支持环境

现代浏览器及 IE11。

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
IE11, Edge 14及以上 18及以上 6及以上 15及以上

🤝 参与共建 PRs Welcome

提交pr

提交issue