工具类

前端自动化测试工具Puppeteer实战:自动登录GitHub

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

Hello,大家好,这里是web秀,我是Javan。

今天我们来讲讲,

前端自动化测试工具Puppeteer

先来看看Puppeteer是什么?

个人总结,

Puppeteer是前端自动化测试工具,

说爬虫工具也可以啦。

官方定义:Puppeteer 是一个 Node 库,

它提供了一个高级 API 来通过 DevTools 协议,

控制 Chromium 或 Chrome。

先来看看Puppeteer能做些什么?

比如把浏览器打开的页面变为 PDF文件,

抓取 SPA(单页应用)并生成预渲染内容(即“SSR”(服务器端渲染)),

自动提交表单,进行 UI 测试,键盘输入等,

创建一个时时更新的自动化测试环境,

等等。

那我们如何使用Puppeteer?

咱们到一个空白文件夹,

直接运行 npm install puppeteer。

有点点慢,需要等待一下。

它还提供一个简化版本puppeteer-core,

和puppeteer区别就是,

puppeteer-core 是一个的轻量级的 Puppeteer 版本,

用于启动现有浏览器,

而Puppeteer装的时候就会自带Chromium浏览器。

特别需要注意是:

使用 Puppeteer,那你的 Node 版本必须大于 6.4.0,

而如果要使用 async / await,那 Node 版本必须大于7.6.0,

所有Puppeteer都是需要使用async / await的。

下面用vs code 打开项目,

然后直接copy下面示例代码。

这个代码我们稍微改一下,

打开另外一个网址,然后生成一个截图,

然后运行node example.js,

等待一会儿,截图就生成了。

好了,回归我们的主题,

自动登录github。

先设置Puppeteer 为 无头模式,

headless=false,这样就可以打开浏览器调试,

看到我们预想的效果,

我们先找到github登录页面,

替换之前的链接,

去掉截图,和注释掉关闭浏览器的代码

运行调试一下。

这时候就会自动打开一个浏览器,

并访问github页面。

接下来F12打开开发工具,

用来找到dom选择器。

先来获取到用户名唯一选择器,

使用page.$()方法,获取用户名节点,

然后密码dom选择器,

打印输出看一下,

这里就输出了两个输入框DOM 元素的信息。

然后我们自动填写表单,

使用page.type()方法,

第一个参数就是dom节点唯一选择器,

第二个参数就是要输入内容,

第三个参数是个对象,里面有一个delay属性,

主要用来延缓输入速度,这样看起来会更加真实。

ok,用户名输入框我们就填写我们的用户名,

密码框就填写密码。

然后需要点击"Sign in"按钮,

获取到"Sign in"按钮,

并调用click点击方法,

运行调试一下,

打开页面后,程序开始自动输入了,

有点慢,因为我们延缓输入1秒的原因,

自动输入完成后,程序自动点击了登录按钮,

可以看到已经登录成功。

到这里咱们就完成了Puppeteer自动登录GitHub功能,

感谢大家的观看,

这里是web秀,我是Javan,不止于前端,还有更丰富的知识!

谢谢大家支持,拜拜!

(1)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注