cover_image

如何使用油猴插件提高测试工作效率

原创胡迪&风定酷家乐技术质量

一、背景

在酷家乐设计工具测试中，总会有许多高频且较繁琐的工作，比如：

查询插件版本：需要打开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+。

后续我们也会根据实际需要封装更多的便捷工具，提供更多个性化的配置能力。

推荐阅读

继续滑动看下一个

酷家乐技术质量

向上滑动看下一个