如何使用油猴插件提高测试工作效率
一、背景
在酷家乐设计工具测试中，总会有许多高频且较繁琐的工作，比如：
- 查询插件版本：需要打开Chrome控制台，输入好几个命令然后过滤出版本信息。
- 查询模型商品：需要先打开调试工具，查询得到模型商品id，然后跳转到测试平台进行加密，再去商家后台拼接url，最终访问到商品详情页。
- 修改定制高级配置：至少要点击4次页面跳转，才能开始配置。
类似的重复性工作实在太多，无形中影响工作效率与体验。并且大量的命令记忆对新手特别不友好。
仔细分析这类行为，大多都属于"数据查询"、“命令输入” 、“页面访问” 等简单操作的组合，其实非常适合“插件化”，封装成各种【一键操作】。
二、思路
基于上述背景，我们期望能开发一个插件来提高测试工作效率。
对于测试插件，主要有以下诉求：
- 开发门槛低。能让更多人参与进来，实现丰富的功能，满足各种需求。
- API 强大。便于扩展更多能力。
- 插件更新方便。便于新功能的推广。
最容易想到有两种方案： 酷家乐工具内部集成插件、Chrome 插件。但是很明显，这两种方式都存在开发门槛高、维护成本高、使用场景有限的缺点。
所以最后选择了另一种方案---油猴插件。
什么是油猴插件？
篡改猴 (Tampermonkey) 是拥有 超过 1000 万用户 的最流行的浏览器扩展之一。它适用于 Chrome、Microsoft Edge、Safari 等主流浏览器。
它允许用户自定义并增强您最喜爱的网页的功能。用户脚本是小型 JavaScript 程序，可用于向网页添加新功能或修改现有功能。使用 篡改猴，您可以轻松在任何网站上创建、管理和运行这些用户脚本。
简单说，油猴插件是一个 Chrome 插件，但是它的功能是一个脚本管理器，能将自定义的脚本注入到当前页面，让你的代码成为网页的一部分。
举例：在油猴脚本管理器中，仅用数十行代码就能在任意页面挂载一个刷新按钮。本质上就是一段H5代码。
所以它也正好符合我们的诉求：
- 开发门槛低。仅涉及H5开发，了解 DOM、javascript 知识即可。
- API 强大。脚本注入到当前page中，所以页面的元素、api都能直接访问。并且油猴还提供了许多内部Api，支持跨域、简单存储等。
- 更新方便。Tampermonkey 天然就是一个脚本管理器，脚本版本与更新管理非常便捷。
- 油猴工具作为一个前端插件，调用后端接口相对其他独立工具有一个天然优势，不需要额外登录，更加灵活高效
三、插件设计
3.1 功能组成
为了尽可能简单、易扩展，插件实现为一个悬浮的可拖拽菜单。并分为【小工具】，【常用链接】两种模块。
【小工具】主要集成一些交互操作，包括数据查询、前端数据修改、命令执行等。【常用链接】则内置了一些快捷跳转方式，可根据模型数据、粘贴板拼接 URL。
3.2 可维护性
为了便于功能扩展，菜单也采用配置的形式，动态挂载。在扩展功能时，无需关注 HTML、CSS，只需要给出工具需要触发的函数。为提升可用性，也支持配置每个小工具的显隐条件。
3.3 扩展性
油猴脚本的形态是单个 js 脚本，其开发过程相对简单直观。但是当代码量扩张后，单个js文件难以维护。尤其是酷家乐业务线众多，不同产品对于小工具诉求不同，维护多个js插件更难。为此，我们将插件脚本扩展成为一个 TS 项目，并支持快速扩展，轻松管理多个插件。
四、插件能力的扩展
前面用大约100多行代码，搭建了一个工具“壳子”，而真正有价值的是各种菜单功能的实现。要实现功能就需要借助各种API能力。下面介绍几类我们用到的API：
4.1 浏览器API
由于油猴脚本本身执行在当前页面中，所以浏览器提供的api都可以直接使用。如 window、document 对象，alert、prompt等。可以非常轻松地实现各种 url 操作、DOM 数据提取、前端数据提取等交互能力。
4.2 第三方库
油猴脚本甚至可以直接引用第三方库。浏览器内置的 alert 对话框不太能满足我们的需求，所以我们引用了一个非常轻量级的UI库---xtiper ，提供了多种实用的弹窗、toast 等。前例中，我们还通过静态资源引入了 jsoneditor。
4.3 接口请求
油猴插件支持跨域请求。往期的文章中介绍了我们内部的低代码平台--KUTA（服务端低代码实现和设计思路），其提供了非常多的优质接口工具。所以小工具插件也可以封装这些接口能力，减少在各个测试平台间切换的成本。
4.4 油猴API
油猴插件提供了非常多的内部API，可以极大的丰富脚本能力。如 剪切板操作、网络请求、文件下载，甚至能持久化存储一些简单数据。
4.5 工具前端API
往期的文章中也介绍过，酷家乐设计工具提供了许多前端api，可以直接通过控制台交互，方便我们的自动化测试获取模型数据、方案数据等。我们也用这些前端 api 封装了许多辅助工具。
五、插件功能演示
基于以上能力，我们将一些高频且繁琐的操作封装成快捷小工具。下面是几类典型的场景，以动画为大家演示接入油猴插件后的便捷操作方式：
数据查询
以前：1.打开酷家乐调试台工具-2.选择内外网环境-3.切换到用户数据查询页面-4.选择查询项目-5.输入用户信息
现在：酷家乐设计工具任意页面点击常驻的小工具，选择用户信息查询功能输入内容即可查询
模型交互
以前：1.选择模型后通过内部工具查看对应模型的id信息-2.打开商家后台页面-3.跳转到商品管理页面-4.切换到对应的行业线-5.点击一个其他不相关模型-6.替换模型id信息后刷新页面
现在：选择模型一键跳转到模型详情页
前端state数据访问与修改
以前：1.选择模型后通过内部工具查看对应模型的id信息-2.打开开发者工具-3.输入很长的命令执行相关API-4.再执行另一个复杂命令
现在：选择模型一键修改模型状态
url切换
以前：记忆不同环境的地址信息，记录当前方案信息后进行url拼接访问
现在：一键切换
六、总结
油猴脚本通常被网友广泛制作成各类神器，没想到引入到工作中也能有不错的效果。经过近一年的陆续迭代，测试插件里已集成了 40+ 小工具，整体代码仅1000多行。
由于其便利性，已经在产研、技术支持、实施团队内广泛使用，每天点击人次100+。
后续我们也会根据实际需要封装更多的便捷工具，提供更多个性化的配置能力。