热门关键字:
jquery > jquery教程 > jquery教程 > Puppeteer 入门教程

Puppeteer 入门教程

421
作者:管理员
发布时间:2021/8/23 18:03:06
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5306
  Puppeteer 是一个node库,他提供了一组用来操纵Chrome的API, 通俗来说就是一个 headless chrome浏览器 (当然你也可以配置成有UI的,默认是没有的)。既然是浏览器,那么我们手工可以在浏览器上做的事情 Puppeteer 都能胜任, 另外,Puppeteer 翻译成中文是”木偶”意思,所以听名字就知道,操纵起来很方便,你可以很方便的操纵她去实现:


  1) 生成网页截图或者 PDF


  2) 高级爬虫,可以爬取大量异步渲染内容的网页


  3) 模拟键盘输入、表单自动提交、登录网页等,实现 UI 自动化测试


  4) 捕获站点的时间线,以便追踪你的网站,帮助分析网站性能问题


  如果你用过 PhantomJS 的话,你会发现她们有点类似,但Puppeteer是Chrome官方团队进行维护的,用俗话说就是”有娘家的人“,前景更好。


  查看 Puppeteer 的官方 API 你会发现满屏的 async, await 之类,这些都是 ES7 的规范,所以你需要:


  Nodejs 的版本不能低于 v7.6.0, 需要支持 async, await.


  需要最新的 chrome driver, 这个你在通过 npm 安装 Puppeteer 的时候系统会自动下载的


  先开看看官方的入门的 DEMO


  上面这段代码就实现了网页截图,先大概解读一下上面几行代码:


  先通过 puppeteer.launch() 创建一个浏览器实例 Browser 对象


  然后通过 Browser 对象创建页面 Page 对象


  然后 page.goto() 跳转到指定的页面


  调用 page.screenshot() 对页面进行截图


  关闭浏览器


  是不是觉得好简单? 反正我是觉得比 PhantomJS 简单,至于跟 selenium-webdriver 比起来, 那更不用说了。下面就介绍一下 puppeteer 的常用的几个 API。


  使用 puppeteer.launch() 运行 puppeteer,它会 return 一个 promise,使用 then 方法获取 browser 实例, 当然高版本的 的 nodejs 已经支持 await 特性了,所以上面的例子使用 await 关键字,这一点需要特殊说明一下,Puppeteer 几乎所有的操作都是 异步的, 为了使用大量的 then 使得代码的可读性降低,本文所有 demo 代码都是用 async, await 方式实现。这个 也是 Puppeteer 官方推荐的写法。对 async/await 一脸懵逼的同学狠狠的戳这里


  options 参数详解


  参数名称


  参数类型


  参数说明


  ignoreHTTPSErrors


  boolean


  在请求的过程中是否忽略 Https 报错信息,默认为 false


  headless


  boolean


  是否以”无头”的模式运行 chrome, 也就是不显示 UI, 默认为 true


  executablePath


  string


  可执行文件的路劲,Puppeteer 默认是使用它自带的 chrome webdriver, 如果你想指定一个自己的 webdriver 路径,可以通过这个参数设置


  slowMo


  number


  使 Puppeteer 操作减速,单位是毫秒。如果你想看看 Puppeteer 的整个工作过程,这个参数将非常有用。


  args


  Array(String)


  传递给 chrome 实例的其他参数,比如你可以使用”–ash-host-window-bounds=1024x768” 来设置浏览器窗口大小。更多参数参数列表可以参考这里


  handleSIGINT


  boolean


  是否允许通过进程信号控制 chrome 进程,也就是说是否可以使用 CTRL+C 关闭并退出浏览器。


  timeout


  number


  等待 Chrome 实例启动的最长时间。默认为30000(30秒)。如果传入 0 的话则不限制时间


  dumpio


  boolean


  是否将浏览器进程stdout和stderr导入到process.stdout和process.stderr中。默认为false。


  userDataDir


  string


  设置用户数据目录,默认linux 是在 ——/.config 目录,window 默认在 C:\Users{USER}\AppData\Local\Google\Chrome\User Data, 其中 {USER} 代表当前登录的用户名


  env


  Object


  指定对Chromium可见的环境变量。默认为process.env。


  devtools


  boolean


  是否为每个选项卡自动打开DevTools面板, 这个选项只有当 headless 设置为 false 的时候有效


  当 Puppeteer 连接到一个 Chrome 实例的时候就会创建一个 Browser 对象,有以下两种方式:


  Puppeteer.launch 和 Puppeteer.connect.


  下面这个 DEMO 实现断开连接之后重新连接浏览器实例


  Browser 对象 API


  方法名称


  返回值


  说明


  browser.close()


  Promise


  关闭浏览器


  browser.disconnect()


  void


  断开浏览器连接


  browser.newPage()


  Promise(Page)


  创建一个 Page 实例


  browser.pages()


  Promise(Array(Page))


  获取所有打开的 Page 实例


  browser.targets()


  Array(Target)


  获取所有活动的 targets


  browser.version()


  Promise(String)


  获取浏览器的版本


  browser.wsEndpoint()


  String


  返回浏览器实例的 socket 连接 URL, 可以通过这个 URL 重连接 chrome 实例




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐