详解Puppeteer 入门教程(7)

日期：2020-05-11 栏目：程序人生浏览：次

鼠标操作：

mouse.click(x, y, [options]) 移动鼠标指针到指定的位置，然后按下鼠标，这个其实 mouse.move 和 mouse.down 或 mouse.up 的快捷操作

mouse.down([options]) 触发 mousedown 事件，options 可配置:

options.button 按下了哪个键，可选值为[left, right, middle], 默认是 left, 表示鼠标左键
options.clickCount 按下的次数，单击，双击或者其他次数
delay 按键延时时间

mouse.move(x, y, [options]) 移动鼠标到指定位置， options.steps 表示移动的步长

mouse.up([options]) 触发 mouseup 事件

7、另外几个有用的 API

Puppeteer 还提供几个非常有用的 API，比如：

7.1 Page.waitFor 系列 API

page.waitFor(selectorOrFunctionOrTimeout[, options[, …args]]) 下面三个的综合 API
page.waitForFunction(pageFunction[, options[, …args]]) 等待 pageFunction 执行完成之后
page.waitForNavigation(options) 等待页面基本元素加载完之后，比如同步的 HTML, CSS, JS 等代码
page.waitForSelector(selector[, options]) 等待某个选择器的元素加载之后，这个元素可以是异步加载的，这个 API 非常有用，你懂的。

比如我想获取某个通过 js 异步加载的元素，那么直接获取肯定是获取不到的。这个时候就可以使用 page.waitForSelector 来解决：

await page.waitForSelector('.gl-item'); //等待元素加载之后，否则获取不到异步加载的元素
const links = await page.$$eval('.gl-item > .gl-i-wrap > .p-img > a', links => {
 return links.map(a => {
 return {
 href: a.href.trim(),
 name: a.title
 }
 });
});

其实上面的代码就可以解决我们最上面的需求，抓取京东的产品，因为是异步加载的，所以使用这种方式。

7.2 page.getMetrics()

通过 page.getMetrics() 可以得到一些页面性能数据，捕获网站的时间线跟踪，以帮助诊断性能问题。

Timestamp 度量标准采样的时间戳
Documents 页面文档数
Frames 页面 frame 数
JSEventListeners 页面内事件监听器数
Nodes 页面 DOM 节点数
LayoutCount 页面布局总数
RecalcStyleCount 样式重算数
LayoutDuration 所有页面布局的合并持续时间
RecalcStyleDuration 所有页面样式重新计算的组合持续时间。
ScriptDuration 所有脚本执行的持续时间
TaskDuration 所有浏览器任务时长
JSHeapUsedSize JavaScript 占用堆大小
JSHeapTotalSize JavaScript 堆总量

8、总结和源码

本文通过一个实际需求来学习了 Puppeteer 的一些基本的常用的 API， API 的版本是 v0.13.0-alpha. 最新邦本的 API 请参考 Puppeteer 官方API.

详解Puppeteer 入门教程(7)

相关推荐