电竞比分网-中国电竞赛事及体育赛事平台

搜索
分享

如何使用油猴插件提高測試工作效率

 漢無為 2024-07-19 發(fā)布于貴州

一、背景

在酷家樂設計工具測試中，總會有許多高頻且較繁瑣的工作，比如：
  • 查詢插件版本：需要打開Chrome控制臺，輸入好幾個命令然后過濾出版本信息。
  • 查詢模型商品：需要先打開調試工具，查詢得到模型商品id，然后跳轉到測試平臺進行加密，再去商家后臺拼接url，最終訪問到商品詳情頁。
  • 修改定制高級配置：至少要點擊4次頁面跳轉，才能開始配置。
類似的重復性工作實在太多，無形中影響工作效率與體驗。并且大量的命令記憶對新手特別不友好。
仔細分析這類行為，大多都屬于'數據查詢'、“命令輸入” 、“頁面訪問” 等簡單操作的組合，其實非常適合“插件化”，封裝成各種【一鍵操作】。

二、思路

基于上述背景，我們期望能開發(fā)一個插件來提高測試工作效率。
對于測試插件，主要有以下訴求：
  • 開發(fā)門檻低。能讓更多人參與進來，實現豐富的功能，滿足各種需求。
  • API 強大。便于擴展更多能力。
  • 插件更新方便。便于新功能的推廣。
最容易想到有兩種方案： 酷家樂工具內部集成插件、Chrome 插件。但是很明顯，這兩種方式都存在開發(fā)門檻高、維護成本高、使用場景有限的缺點。
所以最后選擇了另一種方案---油猴插件。

什么是油猴插件？

篡改猴 (Tampermonkey) 是擁有 超過 1000 萬用戶 的最流行的瀏覽器擴展之一。它適用于 Chrome、Microsoft Edge、Safari 等主流瀏覽器。
它允許用戶自定義并增強您最喜愛的網頁的功能。用戶腳本是小型 JavaScript 程序，可用于向網頁添加新功能或修改現有功能。使用 篡改猴，您可以輕松在任何網站上創(chuàng)建、管理和運行這些用戶腳本。
簡單說，油猴插件是一個 Chrome 插件，但是它的功能是一個腳本管理器，能將自定義的腳本注入到當前頁面，讓你的代碼成為網頁的一部分。
舉例：
在油猴腳本管理器中，僅用數十行代碼就能在任意頁面掛載一個刷新按鈕。本質上就是一段H5代碼。
Image
Image
所以它也正好符合我們的訴求：
  • 開發(fā)門檻低。僅涉及H5開發(fā)，了解 DOM、javascript 知識即可。
  • API 強大。腳本注入到當前page中，所以頁面的元素、api都能直接訪問。并且油猴還提供了許多內部Api，支持跨域、簡單存儲等。
  • 更新方便。Tampermonkey 天然就是一個腳本管理器，腳本版本與更新管理非常便捷。
  • 油猴工具作為一個前端插件，調用后端接口相對其他獨立工具有一個天然優(yōu)勢，不需要額外登錄，更加靈活高效

三、插件設計

3.1 功能組成

為了盡可能簡單、易擴展，插件實現為一個懸浮的可拖拽菜單。并分為【小工具】，【常用鏈接】兩種模塊。
【小工具】主要集成一些交互操作，包括數據查詢、前端數據修改、命令執(zhí)行等。【常用鏈接】則內置了一些快捷跳轉方式，可根據模型數據、粘貼板拼接 URL。
Image
Image

3.2 可維護性

為了便于功能擴展，菜單也采用配置的形式，動態(tài)掛載。在擴展功能時，無需關注 HTML、CSS，只需要給出工具需要觸發(fā)的函數。
為提升可用性，也支持配置每個小工具的顯隱條件。

Image

Image

Image


3.3 擴展性
油猴腳本的形態(tài)是單個 js 腳本，其開發(fā)過程相對簡單直觀。但是當代碼量擴張后，單個js文件難以維護。尤其是酷家樂業(yè)務線眾多，不同產品對于小工具訴求不同，維護多個js插件更難。
為此，我們將插件腳本擴展成為一個 TS 項目，并支持快速擴展，輕松管理多個插件。
Image

四、插件能力的擴展

前面用大約100多行代碼，搭建了一個工具“殼子”，而真正有價值的是各種菜單功能的實現。
要實現功能就需要借助各種API能力。下面介紹幾類我們用到的API：

4.1 瀏覽器API
由于油猴腳本本身執(zhí)行在當前頁面中，所以瀏覽器提供的api都可以直接使用。如 window、document 對象，alert、prompt等。
可以非常輕松地實現各種 url 操作、DOM 數據提取、前端數據提取等交互能力。
Image
Image


4.2 第三方庫

油猴腳本甚至可以直接引用第三方庫。瀏覽器內置的 alert 對話框不太能滿足我們的需求，所以我們引用了一個非常輕量級的UI庫---xtiper ，提供了多種實用的彈窗、toast 等。
前例中，我們還通過靜態(tài)資源引入了 jsoneditor。
Image

4.3 接口請求

    本站是提供個人知識管理的網絡存儲空間，所有內容均由用戶發(fā)布，不代表本站觀點。請注意甄別內容中的聯系方式、誘導購買等信息，謹防詐騙。如發(fā)現有害或侵權內容，請點擊一鍵舉報。
    轉藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多