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

一、背景

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

  • 查询插件版本:需要打开Chrome控制台,输入好几个命令然后过滤出版本信息。
  • 查询模型商品:需要先打开调试工具,查询得到模型商品id,然后跳转到测试平台进行加密,再去商家后台拼接url,最终访问到商品详情页。
  • 修改定制高级配置:至少要点击4次页面跳转,才能开始配置。

类似的重复性工作实在太多,无形中影响工作效率与体验。并且大量的命令记忆对新手特别不友好。

仔细分析这类行为,大多都属于"数据查询"、“命令输入” 、“页面访问” 等简单操作的组合,其实非常适合“插件化”,封装成各种【一键操作】。

二、思路

基于上述背景,我们期望能开发一个插件来提高测试工作效率。

对于测试插件,主要有以下诉求:

  • 开发门槛低。能让更多人参与进来,实现丰富的功能,满足各种需求。
  • API 强大。便于扩展更多能力。
  • 插件更新方便。便于新功能的推广。

最容易想到有两种方案: 酷家乐工具内部集成插件、Chrome 插件。但是很明显,这两种方式都存在开发门槛高、维护成本高、使用场景有限的缺点。

所以最后选择了另一种方案---油猴插件

什么是油猴插件?

篡改猴 (Tampermonkey) 是拥有 超过 1000 万用户 的最流行的浏览器扩展之一。它适用于 ChromeMicrosoft EdgeSafari 等主流浏览器。
它允许用户自定义并增强您最喜爱的网页的功能。用户脚本是小型 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+。

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