好了，Puppeteer 的API 就不一一介绍了，官方提供的详细的 API， 戳这里
4、Puppeteer 实战
了解 API 之后我们就可以来一些实战了，在此之前，我们先了解一下 Puppeteer 的设计原理，简单来说 Puppeteer 跟 webdriver 以及 PhantomJS 最大的 的不同就是它是站在用户浏览的角度，而 webdriver 和 PhantomJS 最初设计就是用来做自动化测试的，所以它是站在机器浏览的角度来设计的，所以它们 使用的是不同的设计哲学。举个栗子，加入我需要打开京东的首页并进行一次产品搜索，分别看看使用 Puppeteer 和 webdriver 的实现流程：
Puppeteer 的实现流程：
打开京东首页
将光标 focus 到搜索输入框
键盘点击输入文字
点击搜索按钮
webdriver 的实现流程：
打开京东首页
找到输入框的 input 元素
设置 input 的值为要搜索文字
触发搜索按钮的单机事件
个人感觉 Puppeteer 设计哲学更符合任何的操作习惯，更自然一些。
下面我们就用一个简单的需求实现来进行 Puppeteer 的入门学习。这个简单的需求就是：
在京东商城抓取10个手机商品，并把商品的详情页截图。
首先我们来梳理一下操作流程
打开京东首页
输入“手机”关键字并搜索
获取前10个商品的 A 标签，并获取 href 属性值，获取商品详情链接
分别打开10个商品的详情页，截取网页图片
要实现上面的功能需要用到查找元素，获取属性，键盘事件等，那接下来我们就一个一个的讲解一下。
4.1 获取元素
Page 对象提供了2个 API 来获取页面元素
(1). Page.$(selector) 获取单个元素，底层是调用的是 document.querySelector() , 所以选择器的 selector 格式遵循css 选择器规范
let inputElement = await page.$("#search", input => input);
//下面写法等价
let inputElement = await page.$('#search');
(2). Page.$$(selector) 获取一组元素，底层调用的是 document.querySelectorAll(). 返回 Promise(Array(ElemetHandle)) 元素数组.
