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，不止于前端，还有更丰富的知识！
谢谢大家支持，拜拜!
表情