详解Puppeteer 入门教程(3)

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 实例

好了,Puppeteer 的API 就不一一介绍了,官方提供的详细的 API, 戳这里

4、Puppeteer 实战

了解 API 之后我们就可以来一些实战了,在此之前,我们先了解一下 Puppeteer 的设计原理,简单来说 Puppeteer 跟 webdriver 以及 PhantomJS 最大的 的不同就是它是站在用户浏览的角度,而 webdriver 和 PhantomJS 最初设计就是用来做自动化测试的,所以它是站在机器浏览的角度来设计的,所以它们 使用的是不同的设计哲学。举个栗子,加入我需要打开京东的首页并进行一次产品搜索,分别看看使用 Puppeteer 和 webdriver 的实现流程:

Puppeteer 的实现流程:

  1. 打开京东首页
  2. 将光标 focus 到搜索输入框
  3. 键盘点击输入文字
  4. 点击搜索按钮

webdriver 的实现流程:

  1. 打开京东首页
  2. 找到输入框的 input 元素
  3. 设置 input 的值为要搜索文字
  4. 触发搜索按钮的单机事件

个人感觉 Puppeteer 设计哲学更符合任何的操作习惯,更自然一些。

下面我们就用一个简单的需求实现来进行 Puppeteer 的入门学习。这个简单的需求就是:

在京东商城抓取10个手机商品,并把商品的详情页截图。

首先我们来梳理一下操作流程

  1. 打开京东首页
  2. 输入“手机”关键字并搜索
  3. 获取前10个商品的 A 标签,并获取 href 属性值,获取商品详情链接