客户端模拟

页面模拟设置相关函数有如下几个:

• page.setViewport: 设置视图大小
• page.setUserAget: 设置UserAgent
• page.SetCookie: 设置Cookie

模拟移动端

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');|
const iPhone = devices['iPhone 6'];
puppeteer.launch().then(async browser => {
    const page = await browser.newPage();
    await page.emulate(iPhone);
    await page.goto('https://www.google.com');
    // other actions...
    await browser.close();
});

页面跳转

• page.goto(url, options)
• page.goBack(options)
• page.goForward(options)
• page.reload(options)

比较常用的是page.goto，相当于在浏览器中输入了地址，然后回车。此外，也可以同通过执行js跳转和模拟点击link跳转。

选择

• page.$(selector): document.querySelector
• page.$$(selector): document.querySelectorAll
• page.$x(expression): xpath的select版本

在typescript中$符号会报错，解决方法: let $: any;先定义一下。它们返回的对象是<Promise<?ElementHandle>>，可以用它判断某元素是否存在，也可以对ElementHandle执行相应操作，具体在后面的ElementHandle中介绍。

模拟输入

• page.mouse
• page.keyboard
• page.click(selector[, options]) 在被选择元素上模拟点击
• page.type(selector, text[, options]) 在被选择的输入框中输入
• page.hover(selector) 模拟鼠标移动到被选择元素上
• page.select(selector, ...values) 在被选择元素上模拟选择select选项
• page.tap(selector) 在被选择元素上模拟触摸

等待

• page.waitForNavigation(options)
• page.waitFor(selectorOrFunctionOrTimeout[, options[, ...args]])
• page.waitForSelector(selector[, options])
• page.waitForXPath(xpath[, options])
• page.waitForFunction(pageFunction[, options[, ...args]])

其中最常用的有page.waitFor、page.waitForNavigation，后者常用于等待跳转结束，例如点击搜索按钮后，等待跳转至搜索结果页面。

const navigationPromise = page.waitForNavigation();
await page.click('a.my-link'); 
await navigationPromise; 

执行脚本

执行脚本最常用的函数是page.evaluate，它类似于在控制台中执行指令。

console.log(await page.evaluate('1 + 2'));
var title = await page.evaluate('document.title')
var title = await page.evaluate(async (i) => {
    return document.title + ' ' + i;
}, 'hello');

console.log(title);

其他场景脚本

• page.evaluateHandle(pageFunction, ...args)
• page.evaluateOnNewDocument(pageFunction, ...args)
• page.$$eval(selector, pageFunction[, ...args])
• page.$eval(selector, pageFunction[, ...args])

const searchValue = await page.$eval('#search', el => el.value);
const preloadHref = await page.$eval('link[rel=preload]', el => el.href);
const html = await page.$eval('.main-container', e => e.outerHTML);

信息查看

• page.url()
• page.content()
• page.frames()
• page.mainFrame()
• page.metrics()
• page.target()
• page.title()
• page.viewport()

请求劫持

page.setRequestInterception提供了中断请求的机制，例如，我们可以通过它实现一个无图模式。

await page.setRequestInterception(true);
page.on('request', interceptedRequest => {
    if (interceptedRequest.url().endsWith('.png') || interceptedRequest.url().endsWith('.jpg'))
        interceptedRequest.abort();
    else
        interceptedRequest.continue();
});
await page.goto('https://example.com');

这里有一个interceptedRequest对象，它提供了三种响应模式: abort、continue和respond。

内容注入

• page.addScriptTag(options)
• page.addStyleTag(options)

事件

事件名	备注
domcontentloaded
load
request
requestfailed
requestfinished
response
console
close
frameattached
framedetached
framenavigated
error
pageerror

page.on('load',
async () => {
    console.log('page loading done, start fetch...');
});

内容保存

page.pdf(options)
page.screenshot([options])

不常用函数

page.authenticate(credentials)
page.bringToFront()
page.browser()
page.close(options)
page.coverage
page.exposeFunction(name, puppeteerFunction)
page.queryObjects(prototypeHandle)
page.setBypassCSP(enabled)
page.setCacheEnabled(enabled)
page.setContent(html)
page.setDefaultNavigationTimeout(timeout)
page.setJavaScriptEnabled(enabled)
page.setOfflineMode(enabled)
page.tracing

参考

Puppeteer2.0 官方api (opens new window)

使用Puppeteer进行数据抓取(二)——Page对象 (opens new window)

Node：使用Puppeteer完成一次复杂的爬虫 (opens new window)