puppeteer的使用

puppeteer是一个基于js的强大API，它可以操作Chrome浏览器进行网页的获取，并且能进行无头浏览模式，强大到没朋友。
一个坑：puppeteer中获取元素的方法和浏览器里面一样，但是，获取元素的属性的办法和浏览器不一样，它有一套API用来获取界面中的元素，有一套API用来获取元素的属性，获取元素具体的操作如下：

# (1). Page.$(selector) 获取单个元素，底层是调用的是 document.querySelector() , 所以选择器的 selector 格式遵循 [css 选择器规范]
# 实例如下：
let inputElement = await page.$('#search');

#(2). Page.$$(selector) 获取一组元素，底层调用的是 document.querySelectorAll(). 返回 Promise(Array(ElemetHandle)) 元素数组.
const links = await page.$$("a");

获取元素属性的操作如下：

# Puppeteer 获取元素属性跟我们平时写前段的js的逻辑有点不一样，按照通常的逻辑，应该是现获取元素，然后在获取元素的属性。但是上面我们知道
# 获取元素的 API 最终返回的都是 ElemetHandle 对象，而你去查看 ElemetHandle 的 API 你会发现，它并没有获取元素属性的 API.

# 事实上 Puppeteer 专门提供了一套获取属性的 API， Page.$eval() 和 Page.$$eval()

const value = await page.$eval('input[name=search]', input => input.value);
const href = await page.$eval('#a', ele => ele.href);
const content = await page.$eval('.content', ele => ele.outerHTML);