ordin的笔记 - puppeteer初探

puppeteer，直译为操纵木偶的人，简单来说就是一个node的库。通过它，你可以通过api来控制浏览器的所有操作，常用于自动化测试和爬虫。目前它仅支持谷歌和火狐浏览器。

puppeteer以下统称为pptr。pptr的使用方式很简单，接下来我将通过这篇文章简单的介绍一下pptr的基操（基本操作）。

安装node环境

上面我们说到，pptr是一个node的库，因此，pptr的使用肯定是离不开的node的基本环境的。由于博主的日常使用的是mac系统。下面将介绍使用brew来安装node环境。其他系统的安装网上资料很多，就不赘述了。

安装命令

brew install node node@10

校验

node -v

当出现 v10.xx.x就表示node安装完毕。

安装cnpm

由于长城的关系。直接使用npm安装node包将会很慢，我这里将使用国内源cnpm。

安装命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

校验

cnpm -v

正常情况下将会返回以下内容：

cnpm@6.1.0 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.10.2 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@10.16.0 (/usr/local/Cellar/node@10/10.16.0/bin/node)
npminstall@3.23.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local
darwin x64 18.7.0
registry=https://r.npm.taobao.org

pptr安装

新建puppeteer文件夹

mkdir puppeteer

进入文件夹下，下载puppeteer

cd puppeteer
cnmp i puppeteer

pptr基操

截屏

新建example.js，并编辑以下内容。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.setViewport({width: 1440, height: 877})
  await page.goto('https://www.baidu.com');
  await page.screenshot({path: '/Users/ordin/work/test/vscode/puppeteer/output/baidu.png'}); //注意替换为自己的文件路径

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

运行

node example.js

检验正常的话在上述路径下就能发现baidu.png的快照。

获取页面信息

新建get-dimensions.js，并编辑以下内容。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://baidu.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();
})();

运行

node get-dimensions.js

检验正常将会返回Dimensions: { width: 800, height: 600, deviceScaleFactor: 1 }。

pptr常用api

pptr的官方api：英文版 中文版

puppeteer.launch

加载一个浏览器，可以设置浏览器的一系列属性，是否开启无头模式，忽略http错误等。

browser.newPage()

打开一个新页面。

page.goto

打开一个网站连接

page.waitForFunction

等待函数加载。本方法里包含浏览器的所有对象，如document。

page.evaluate

计算模块，相当于在console里执行。

browser.close

关闭浏览器

pptr基本设置

设置有头模式

puppeteer.launch({headless: false})

设置页面大小

await page.setViewport({
		width: 1440,
		height: 700
	});

禁止加载图片，字体，css，js等

//'image', 'stylesheet', 'font', 'script' ： 禁用图片,css,字体库，js加载
// resourceType 解释：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/ResourceType
await page.setRequestInterception(true);
page.on('request', request => {
	if (['image', 'stylesheet', 'font', 'websocket'].indexOf(request.resourceType()) !== -1)
		request.abort();
	else
		request.continue();
});

结尾

pptr的介绍到此就结束了，总体来说pptr的入门门槛还是很低的，但是众所周知浏览器的加载很耗性能，如何高效低成本的使用，还需要进一步探究。

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名,转载请标明出处
最后编辑时间为: 2019-08-23