利用現代瀏覽器所提供的強大 API 錄製，回放並儲存任意 web 介面中的使用者操作

API jQuery MySQL · 發表 2019-01-29 14:31:00

摘要：在開發測試階段作為開發人員你永遠不知道你的測試和產品有什麼沙雕操作，他們只會說xxx頁面/功能有bug。想要復現也很難。前段時間正好看到了rrweb這個專案，索性基於它實現了定時間隔錄製、主動上報、存入資料庫、統一檢視等功能，可以再專案開發時引入，再也不怕bug復現了。走過路過先來波...

在開發測試階段作為開發人員你永遠不知道你的測試和產品有什麼沙雕操作，他們只會說xxx頁面/功能有bug。想要復現也很難。前段時間正好看到了rrweb這個專案，索性基於它實現了定時間隔錄製、主動上報、存入資料庫、統一檢視等功能，可以再專案開發時引入，再也不怕bug復現了。

走過路過先來波start

專案地址

實測在 windows 下安裝最新的 MySQL8.0 會報錯，重置密碼也不行，原因不明，解決辦法是安裝MySQL 5.7.25。 MAC OS 下安裝最新版沒有問題。

:sparkles: 特性

錄製並回放任意 web 介面中的使用者操作前端封裝+後端。
開箱即用。
支援跨域。

支援環境

Linux , MacOS , Windows 。
現代瀏覽器和 IE11及以上。
Electron

:minidisc: 後端架構

基於 NodeJS
資料庫使用MySQL
服務框架使用express4

:computer: 前端架構

錄製基於 rrweb
http 請求預設依賴axios可配置為jQuery以及任何與 jQuery 結構相同的庫
回放頁面前端框架使用VUE
UI 框架使用Element
回放基於 rrewb-player

:package: 安裝

安裝MySQL並配置 ./server/mysql.config 裡的埠號及使用者密碼
安裝 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) //檢視屬性
複製程式碼

:hammer: 示例

<!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/ 檢視結果

:book: 目錄結構

├── .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
複製程式碼