Puppeteer recorder的使用

介绍

puppeteer recorder是一个为puppeteer服务的插件，用以记录用户的浏览器行为，然后自动生成puppeteer可以执行的代码。

构建

项目地址： https://github.com/checkly/puppeteer-recorder

先下载下来然后构建下

git clone https://github.com/checkly/puppeteer-recorder
cd puppeteer-recorder
yarn install # 或者npm install

看一下该项目的package.json

没有特殊指令，依然是知道build

好来执行下

npm run build

执行后在目录会生成dist目录

安装

打开chrome 浏览器的扩展程序管理界面

点击加载已解压的扩展程序

选择刚刚的dist文件夹

选择后在该界面就加载来该插件

并且在浏览器地址栏右侧也有图标

示例

简单演示一下。

点击图标，点击Recoed

地址栏访问百度，搜索1，选择百度词条那一条，点击进入。

再次点击图标，点击Stop。

可以看到，已经自动生成了puppeteer支持的代码，拷贝出来放入到puppeteer就可以执行了，也可以自己再进行二次开发，使用还是非常简单的。

问题

使用中有一些问题，可以从示例中看到，我的输入事件并未转化为代码，且点击第三条搜索结果，id为3，应该是#3，此处转化出来是#\33，放到puppeteer中并不能识别。