前言
众所周知，测试工作是痛苦而乏味的。
举个典型的例子，一个拥有庞大的表单的新功能，如图所示
填写起来着实是费时费力，开发过程中可能需要测试好几遍，就需要反复的填写。
不单单是前端和测试，后端可能也有这种需要测试自己接口的场景
又众所周知，懒惰是人类进步的阶梯，puppeteer 这种无头浏览器 很快就接手了自动化测试的这项工序。
但是遗憾的是，测试脚本还是需要开发人员自己码，但当下以敏捷迭代为主的产品大行其道，而自己编写的选择器没多久就要因为页面变动而失效，所以前端一般也不爱写自动化测试。
这其实是两难的局面，如果能保证页面长期不发生大变动，那其实没什么测试的必要；如果总是变动，那你的脚本写完就报废写完就报废，那还不如自己手动测试。
而 Recorder 的出现，打破了这一困境。
本篇文章会介绍 Recorder 的使用，以及我自己复刻的 Recorder 的插件
Recorder 是什么
其实很多前端同学应该都有这种想法：要是能自动生成测试脚本就好了，把我的点击、输入记录下来，然后进行回放，这不就大幅降低了我们的开发负担。
是的，Recorder 就干了这件事，请看 gif
可以看到，几乎没有任何额外操作，只需要点击录制和回放就够了，也不需要做什么 puppeteer 脚本，接入 puppeteer 等等麻烦的流程。
更难能可贵的是，这是 chromium 系列浏览器自带的功能，也就是大部分浏览器都可以直接使用，而不用额外安装插件。
Recorder 怎么用
开启 Recorder
有的同学就要问了，imooimoo，这么好用的东西我怎么没有看到。有的兄弟有的，只需要你手动去开启它。
别等，就现在。按下 f12，跟我一起体验一下
想测试常规操作，可以创建一个录制，并进行本篇文章左侧的点赞评论，然后就可以重放看效果了
如果想试试表单类操作，可以在这做测试 arco.design/react/compo...
基本操作
这个工具的基本使用其实很好懂，大家上手操作一下就明白了，包括但不限于：
- 录像的增删改查
- 录像的导入导出
- 录制与回放
- 调整回放速率
所以我重点说一下一些好用的额外操作
额外操作
- 右侧可以在任意节点进行插入、移除、打断点
- 自动识别选择器
这里有个小按钮，如果你希望更新选择器，就点击它，随后任意点击网页上的元素，它就能自动获取唯一选择器，并更新你当前的选择器，完全不用自己费劲写选择器，非常好用家人们。
- 模拟低网速
- 联动性能面板
使用方向
- 测试工程师减少点点点的操作
- 前后端调试接口省去填写的时间
- 用户可以提前填好常用的数据，减少反复的写同样的内容（模版功能）
- 将其视为草稿箱暂存内容
- ...
仅供抛砖引玉，理论上浏览器的所有重复性操作都可以靠 Recorder 来解决
复刻一个 Recorder
众所周知，前端一言不合就喜欢自己造轮子，Recorder 虽然好，但是会出现偶发性卡顿的问题，我们也没办法进行调试排查。
所以我又做了一个极简版的插件，之前也没做过浏览器插件，刚好趁这个机会丰富一下自己的工作经历。
说是自己做，其实大半是 ai 生成的 🐶，我们只需要负责决策大体方向即可。
记录一下我的思路
找一个框架
写原生是不可能写原生的，框架这么多，我翻了一下最终选用了 plasmo，它可以用 react + ts 的方式写代码，活跃程度也不错
让 ai 写个简单的方案
主要是看一下各种文件应该怎么写怎么放。
看一下 chrome 是怎么实现的
这步踩了坑了，首先下到了 chromium 的源码，找了许久也没看到录制器相关的逻辑。
ai 在这一步也没有给出有用的帮助，官方文档里也没有说明这一块的 github 链接。当时以为这里没有开源，都准备放弃了。
后来发现 edge 也有相同的录制器，那就不对了，一定是开源的才能复用。
在 github 淘了半天，最后找到了 github.com/ChromeDevTo... ，居然只有 3k star，落魄了家人们。
检查了一下它的大体逻辑，也基本是用 puppeteer 来实现的，但是插件端不太方便用 puppeteer，罢了，兜兜转转到最后还是得靠自己。
其实核心就两部分，录制 与回放
录制中，我们需要记录当前行为和点击的目标。我找到了一个不错的库，css-selector-generator 可以很方便的生成唯一选择器，再分别监听一下 click 和 keydown 就差不多了。
回放中，利用刚才记录的唯一选择器，触发对应事件即可。
好了 claude 3.7，方案有了，快给我写
修 bug
有个 bug 比较麻烦，难住我很久。有些元素是点击以后自动就变化了 class ，这时候我再记录的 class 会出现不准的问题。
比如某个打勾的组件，点击后会打上勾，这时候自动会添加一个 checked 的 class，录制器这时候去记录，往往就记录上这个 checked。当你重放的时候，这个 checked 实际上是找不到的。
聪明的同学这时候要说了：在捕获阶段进行我们的点击事件
没错，大部分事件是在冒泡阶段才进行处理，我们只需要在捕获阶段做就好了。但是少部分事件呢？
另外，react 项目呢？react 统一做了事件委托，在顶层进行处理，并且在捕获阶段就做了很多事情。
到这一步，我只想到了一个点，我们也做一个事件委托，并且将我们的委托挂在最外层，对于 react 17 之后的项目，它们的捕获是在 root 节点而非 document，就会比我们晚一步，这样一来，我们就会优先触发，记录以后它怎么变更 class 都无所谓了。
写这篇文章其实也是希望有大佬指点一下，有无更好的实现方案
ok，修完bug，我们的插件也开发的差不多了，最后找个 ai-logo 设计个 logo 就搞定了。
如果有兴趣的同学，可以看看我的录制器插件，已经开源：github.com/imoo666/chr...
总结
读完这篇文章，你也许了解到了：
-
Recorder 的使用，用来提升我们的工作效率
-
做一个浏览器插件过程
-
一个
好用的浏览器插件 -
复习了一下捕获与冒泡，以及 react 的事件委托机制
看到这里非常不错了，共勉兄弟们~