Puppeteer记录操作过程及优秀的开源插件（五）

Puppeteer记录操作过程及优秀的开源插件（五）

一、简介

本节我们将介绍通过浏览器工具记录用户的实际操作，并且进行生成相应的 nodeJS 代码，然后能够进行对过程的重放。避免所有的脚本都需要用户进行编写，从而减轻代码编写的过程，而且增加代码的稳定性。
接下来还会介绍一些常用的已经实现的比较优秀的插件库的列表集，可以根据自己的需求快速的使用到自己的项目中。

二、自动生成测试代码

自动生成代码的过程是使用谷歌浏览器自带的功能 Recorder功能 进行记录，我们只需要进行操作UI界面即可以自动记录操作过程，不再需要我们编写代码了，并且能够按照我们的需要切换对应的语言。

首先我们通过检查页面打开开发者工具，然后选择工具栏上面的 Recorder 选项。

如果之前没有做过记录，则会显示空白页面，如果之前有做过记录，则会显示之前的操作记录列表，则会如上图显示，我们能够进行针对具体的项目重放或者删除编辑。

开始点击 Create a new recording 按钮进行开始

如上，会要求我们填写一些必要的信息，比如记录的名称和选择器属性，还有选择器的类型。这里可以根据自己的偏好进行设置。

最后点击最底部的 Start recording 的按钮开始记录。此时我们开始操作浏览器页面，我们就能够看有对应的记录。

最后结束记录，会生成最终的记录结果。

同时界面中能够看到 性能分析面板 和 Replay 重放面板。也能够看到 Show code 按钮,用于展示生成的代码

在代码显示的下拉框中，我们能够看到总共有四种语言可以生成，我们选择我们熟悉的Puppeteer。
这样，我们复制生成的代码在node环境中运行就能达到和我们刚才操作一样的效果了。

三、优秀的开源插件

如此优秀的框架，必然会有很多社区支持的功能，我们在这里能够看到有人在github做了总结，在这里总结了一下，有兴趣的同学可以去看看

https://github.com/transitive-bullshit/awesome-puppeteer/blob/master/readme.zh.md

四、参考案例

• 该案例基本实现了上传下载的自动化，能学到的东西较多。
  https://zhuanlan.zhihu.com/p/627805163

• Puppeteer 不重启如何更换代理 IP
  Puppeteer 不重启如何更换代理 IP

• 优秀插件
  https://github.com/transitive-bullshit/awesome-puppeteer/blob/master/readme.zh.md

• 详细介绍
  https://blog.csdn.net/ZangKang1/article/details/132092578

---