利用現代瀏覽器所提供的強大 API 錄製，回放並保存任意 web 界面中的用戶操做

時間 2019-11-06

標籤利用現代瀏覽器提供強大 api 錄製回放保存任意 web 界面用戶欄目瀏覽器简体版

原文原文鏈接

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

走過路過先來波start

項目地址css

利用現代瀏覽器的強大功能還原操做並儲存 V1.0.0

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

✨ 特性

錄製並回聽任意 web 界面中的用戶操做前端封裝+後端。
開箱即用。
支持跨域。

🖥 支持環境

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

💽 後端架構

基於NodeJS
數據庫使用MySQL
服務框架使用express4

💻 前端架構

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

📦 安裝

安裝MySQL並配置./server/mysql.config裏的端口號及用戶密碼。前端
導入提供的./test.sql文件，每一個項目能夠建一個表。vue
安裝NodeJS。java
進入項目目錄。node
安裝依賴：mysql
```
npm i #國內使用cnpm
複製代碼
```
啓動項目：jquery
```
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/查看結果ios

📖 目錄結構

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