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

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

在这里插入图片描述

在这里插入图片描述

    • Puppeteer记录操作过程及优秀的开源插件(五)
        • 一、简介
        • 二、自动生成测试代码
        • 三、优秀的开源插件
        • 四、参考案例

一、简介

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

二、自动生成测试代码

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

首先我们通过检查页面打开开发者工具,然后选择工具栏上面的 Recorder 选项。
Puppeteer记录操作过程及优秀的开源插件(五)_第1张图片

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

Puppeteer记录操作过程及优秀的开源插件(五)_第2张图片

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

Puppeteer记录操作过程及优秀的开源插件(五)_第3张图片
如上,会要求我们填写一些必要的信息,比如记录的名称和选择器属性,还有选择器的类型。这里可以根据自己的偏好进行设置。

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

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

Puppeteer记录操作过程及优秀的开源插件(五)_第4张图片

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

Puppeteer记录操作过程及优秀的开源插件(五)_第5张图片
在代码显示的下拉框中,我们能够看到总共有四种语言可以生成,我们选择我们熟悉的Puppeteer。
这样,我们复制生成的代码在node环境中运行就能达到和我们刚才操作一样的效果了。

三、优秀的开源插件

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

Puppeteer记录操作过程及优秀的开源插件(五)_第6张图片

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

在这里插入图片描述


你可能感兴趣的:(Puppeteer学习及实践,自动化,爬虫,node.js,javascript)