2017-11-204bd0d3dffcd87285883ac12cc16473a0

99+ Puppeteer26 分钟读完 (大约 3879 个字) 0次访问

headless chrome Puppeteer 无头or无界面

概述Puppeteer

Puppeteer 是一个用来控制无界面Chrome的Node库，它提供了很多高级的api来使我们跟好的控制无界面的Chrome。这个headless可以叫无头，也可以叫无界面吧 ## 我们能做什么？大多数我们能在浏览器上做的都能用Puppeteer来做！ * 生成页面的截图和PDF文件。 * 抓取spa并生成预渲染内容（即“SSR”）。 * 从网页爬取内容。 * 自动化表单提交、UI测试、键盘输入等。 * 自动化更新表格创建，自动化测试环境。 * 捕获站点的时间线跟踪，以帮助诊断性能问题。

了解这么多，我主要是从爬虫知道的这个工具。

因为这个工具相关的几个类似的工具(像PhantomJS)也大多停止更新了，谷歌真厉害。。 ## shotscreens 和 PDF实例 ### 截图 page.screenshot([options]) 这个api 可以

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

PDF

page.pdf(options)这个api来打印，也有一些options可以设置比较常用的format：A4 之类的

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});

  await browser.close();
})();

获取页面上下文

page.evaluate(pageFunction, ...args)，这个api，来解析

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Get the "viewport" of the page, as reported by the page.
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    };
  });

  console.log('Dimensions:', dimensions);

  await browser.close();
})();

Puppeteer常用api分类

概览

Puppeteer 使用开发者工具和浏览器通信
Browser 拥有多个界面的实例
Page 至少有一个框架：主框架。可能还有其他由iframe和frame标签创建的frames
Frame 至少有一个执行上下文，默认的上下文是JavaScript的执行框架。框架可能有与执行相关联的附加执行上下文。

环境变量

由npm config设置proxy代理，或关于下载的Url和版本之类的。

类：Puppeteer

Puppeteer模块提供了一种方法来登录Chromium实例。

类：Browser

一个Browser 在Puppeteer连接到Chromium实例时被创建,通过puppeteer.launch 或 puppeteer.connect. 常用browser.newPage()新界面 ,browser.close()关闭browser和browser.wsEndpoint()断点打开。

类：Page

Page提供了于Chromium单选项交互的方法。一个Browser有多个Page实例基础的方法有：一些原生的事件，还有page.$(selector)，page.$$(selector)来进行页面的元素选择，page.$eval(selector, pageFunction[, ...args])和page.$$eval(selector, pageFunction[, ...args])

1
2
3

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.click(selector[, options])鼠标点击，相关的点击事件也可以通过options来设置。

page.content()返回整个HTML的page内容，包括doctype。

page.cookies(...urls), page.deleteCookie(...cookies)

page.emulate(options)媒体设置。

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.evaluate(pageFunction, ...args)对页面的上下文进行操作。

1
2
3

const bodyHandle = await page.$('body');
const html = await page.evaluate(body => body.innerHTML, bodyHandle);
await bodyHandle.dispose();

page.goto(url, options),page.goForward(options)和page.goBack(options)。

还可以对页面的js,css,html进行行管的操作。

page.setUserAgent(userAgent), page.setViewport(viewport)亦可以进行相关操作。

类：Keyboard

键盘相关输入，

await page.keyboard.type('Hello World!');
await page.keyboard.press('ArrowLeft');

await page.keyboard.down('Shift');
for (let i = 0; i < ' World'.length; i++)
  await page.keyboard.press('ArrowLeft');
await page.keyboard.up('Shift');

await page.keyboard.press('Backspace');
// Result text will end up saying 'Hello!'

类：Mouse

鼠标点击拖住事件。和键盘事件类似。

类: Touchscreen

点击屏幕位置。 touchscreen.tap(x, y)

类：Dialog

弹出框确认，取消以及相关的信息，输入都客气取得。

类：ConsoleMessage

页面的console信息获取。

类：Frame

大部分page都有Frame的方法，相当于 page.mainFrame()。

frame.childFrame()， frame.name()， frame.parentFrame()相关操作。属于frame的。

类：ExecutionContext

类表示JavaScript执行的上下文。

类：JSHandle

JSHandle表示页面中的JavaScript对象。JSHandles可以由page.evaluateHandle方法创建。

类：ElementHandle

elementhandle代表一个页面的DOM元素。elementhandles可以 page.$由方法。

elementHandle.getProperties() elementHandle.getProperty(propertyName) 获取元素的属性值, 爬取页面的url可用。

elementHandle.screenshot([options])，这个会将页面滚动到可以显示元素的地方，来截图。

elementHandle.uploadFile(...filePaths)上出文件。

类：Request

当一个页面发送一个request，puppeteer's page会派发一下以下几个事件 * 'request'当页面发出请求时发出。 * 'response' 当响应请求接收到响应时发出。 * 'requestfinished' 当响应体被下载并请求完成时发出。

类： Response

响应类表示由页面接收的响应。

api详情

本文最后修改于: 2020-03-27.

本文标题：headless chrome Puppeteer 无头or无界面
本文作者：hddhyq
本文链接：https://hddhyq.github.io/2017/11/20/headless-chrome-Puppeteer-无头or无界面/
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！