Puppeteer 初探

oysun 发布于2019-08-22 18:14 / 1976人阅读

摘要：抓取并生成预先呈现的内容即。自动表单提交，测试，键盘输入等。创建一个最新的自动化测试环境。使用最新的的和浏览器功能，直接在最新版本的浏览器中运行测试。捕获您网站的时间线跟踪，以帮助诊断性能问题。

木偶 Puppeteer

更友好的 Headless Chrome Node API
木偶也是有心的 (=･ω･=)

Puppeteer是什么？

Puppeteer是一个Node库，它提供了一个高级API来通过DevTools协议控制无头 Chrome或Chromium ，它也可以配置为使用完整（非无头）Chrome或Chromium。

你可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。

为什么会产生Puppeteer呢？

很早很早之前，前端就有了对 headless 浏览器的需求，最多的应用场景有两个

UI 自动化测试：摆脱手工浏览点击页面确认功能模式

爬虫：解决页面内容异步加载等问题

在Chrome headless 和Puppeteer出现之前，headless 浏览器有以下几种：

PhantomJS, 基于 Webkit

SlimerJS, 基于 Gecko

HtmlUnit, 基于 Rhnio

TrifleJS, 基于 Trident

Splash, 基于 Webkit

但这些都有共同的通病，环境安装复杂，API 调用不友好

2017 年 Chrome 官方团队连续放了两个大招 Headless Chrome 和对应的 NodeJS API Puppeteer，直接让 PhantomJS 和 Selenium IDE for Firefox 作者宣布暂停继续维护其产品，PhantomJs的开发者更直接宣称自己要失业了。

Puppeteer能做什么？

你可以在浏览器中手动完成的大部分事情都可以使用Puppteer完成
比如：

生成页面的屏幕截图和PDF。

抓取SPA并生成预先呈现的内容（即“SSR”）。

自动表单提交，UI测试，键盘输入等。

创建一个最新的自动化测试环境。使用最新的的JavaScript和浏览器功能，直接在最新版本的Chrome浏览器中运行测试。

捕获您网站的时间线跟踪，以帮助诊断性能问题。

入门

安装Puppeteer

npm install puppeteer
或者
yarn add puppeteer

Puppeteer至少需要Node v6.4.0，但如果想要使用async / await，它仅在Node v7.6.0或更高版本中受支持。

实例一截屏保存

导航到 https://example.com 并将截屏保存为 example.png：

const puppeteer = require("puppeteer");
async function screenShot(url, path, name) {
    await console.log("Screen Shot ... ");
    await console.log("Save path: " + path + name + ".png");
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url);
    await page.screenshot({path: path + name + ".png"});

    await browser.close();
}

puppeteer 默认的页面大小为800x600分辨率，页面的大小可以通过Page.setViewport()来更改

实例二创建一个PDF

const puppeteer = require("puppeteer");

async function downloadPdf(url, path, name) {
    await console.log("Download Pdf ... ");
    await console.log("Save path: " + path + name + ".pdf");
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    //networkidle2: consider navigation to be finished when there are no more than 2 network connections for at least 500 ms.
    await page.goto(url, {waitUntil: "networkidle2"});
    await page.pdf({path: path + name + ".pdf", format: "A4"});

    await browser.close();
}

实例三在渲染的页面中执行代码

const puppeteer = require("puppeteer");

async function getDimension(url) {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.goto(url);

    // 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();
}

进阶

page.type 获取输入框焦点并输入文字

page.keyboard.press 模拟键盘按下某个按键，目前mac上组合键无效为已知bug

page.waitFor 页面等待，可以是时间、某个元素、某个函数

page.frames() 获取当前页面所有的 iframe，然后根据 iframe 的名字精确获取某个想要的 iframe

iframe.$(".srchsongst") 获取 iframe 中的某个元素

iframe.evaluate() 在浏览器中执行函数，相当于在控制台中执行函数，返回一个 Promise

Array.from 将类数组对象转化为对象

page.click() 点击一个元素

iframe.$eval() 相当于在 iframe 中运行 document.queryselector 获取指定元素，并将其作为第一个参数传递

iframe.$$eval 相当于在 iframe 中运行 document.querySelectorAll 获取指定元素数组，并将其作为第一个参数传递

还是看这篇文章吧，作者写了两个实例Demo，看一下代码就能懂上面的基础用法了。

一些默认的设置和开发调试建议 1. 使用Headless模式

Puppeteer默认以Headless模式加载Chromium，如果想加载完整的Chromium（这样方便观察网页加载的效果究竟是怎么样的），可以执行以下命令

const browser = await puppeteer.launch({headless: false}); // default is true

2. 使执行本地版本的Chrome或者Chromium

const browser = await puppeteer.launch({executablePath: "/path/to/Chrome"});

3. 延迟执行Puppeteer

 const browser = await puppeteer.launch({
   headless: false,
   slowMo: 250 // slow down by 250ms
 });

4. 获取控制台输出

可以监听console的事件，也可以通过evaluate来执行console

 page.on("console", msg => console.log("PAGE LOG:", msg.text()));

 await page.evaluate(() => console.log(`url is ${location.href}`));

5. 设置页面视窗大小

await page.setViewport({
        width: 1366,
        height: 768 * 2
    });

参考链接

Puppeteer的入门教程和实践任乃千 https://www.jianshu.com/p/2f0...

官方文档 https://github.com/GoogleChro...

混合云私有云 Puppeteer puppeteer_node puppeteer关闭webrtc 初探webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95648.html

Puppeteer初探--爬取并生成《ES6标准入门》PDF

摘要：首先介绍是一个库，他提供了一组用来操纵的默认也就是无的，也可以配置为有有点类似于，但是官方团队进行维护的，前景更好。使用，相当于同时具有和的能力，应用场景会非常多。首先介绍Puppeteer Puppeteer是一个node库，他提供了一组用来操纵Chrome的API（默认headless也就是无UI的chrome，也可以配置为有UI）有点类似于PhantomJS，但Puppet...

JerryWangSAP 2019-08-21 12:00 评论0 收藏0
小程序测试方案初探

摘要：前言年月号微信小程序正式上线，小程序不需要安装就能使用，依托微信强大的生态环境，能做到很多所不能做的事情。当然更希望的是小程序官方能给出相应的单元测试方案吧。前言 2017年1月9号微信小程序正式上线，小程序不需要安装就能使用，依托微信强大的生态环境，能做到很多H5所不能做的事情。从微信小程序发布这段时间，陆陆续续开发了不少小程序相关的项目，总结了一些通用性的组件，但是对于小程序如何...

church 2019-05-29 17:01 评论0 收藏0
Puppeteer 初探

摘要：获取获取上下文句柄执行计算销毁句柄除此之外，还可以使用意为在浏览器环境执行脚本，可传入第二个参数作为句柄，而则针对选中的一个元素执行操作。我们日常使用浏览器或者说是有头浏览器时的步骤为：启动浏览器、打开一个网页、进行交互。无头浏览器指的是我们使用脚本来执行以上过程的浏览器，能模拟真实的浏览器使用场景。有了无头浏览器，我们就能做包括但不限于以下事情：对网页进行截图保存为图片或 ...

appetizerio 2019-08-21 17:08 评论0 收藏0
ELSE 技术周刊(2017.10.30期)

摘要：技术纵横调试指南协议是新加入的调试协议，通过与交互，同时基于浏览器的提供了图形化的调试界面。使得多业务线在复杂架构情况下能够独立开发测试，互不干扰，并统一调用接口。技术周刊由小组出品，汇聚一周好文章，周刊原文。本期推荐写在 2017 的前端数据层不完全指北在前端技术的发展中，各个层面演进出不同的技术方案，如数据类型层面的 TypeScript，Flow，PropTypes，应用架...

AprilJ 2019-08-22 11:13 评论0 收藏0
2017-10-18 前端日报

摘要：前端日报精选无头浏览器初探鼠标无限移动简介译深入分析变更检测发布前必须排查的安全如何开发中文第期关键和减少阻塞渲染的的自动化解决方案译网页设计掘金年最受欢迎的个编程挑战网站简书系列和深入理解掘金发布后台管理系统，没错，它就是你想 2017-10-18 前端日报精选无头浏览器 Puppeteer 初探鼠标无限移动 JS API Pointer Lock简介[译] 深入分析 Angul...

cyrils 2019-08-21 17:07 评论0 收藏0