文书档案翻译

作者: 计算机前端  发布:2019-11-23

puppeteer

puppeteer 是三个透过DevTools 共同商议提供高等API 来调节 chrome,chromium 的 NODE库; puppeteer默认运营在 headless 格局, 也可布署后运维在全情势(non-headless).

总结了豆蔻年华晃有关puppeteer的就学的网址,以往还有只怕会三番五回改过

puppeteer能够做怎么着

大部在浏览器里手动实践的动作都足以通过puppeteer完成! 这里有几个列子来让您起头.

  • 转换页面截图和PDF.
  • 爬取单页面应用生成提前渲染的原委(举例 SS本田CR-V).
  • 活动提交表单, UI测验, 键盘输入等.
  • 创设新型的自动化的测量试验碰着,在最新的 chrome 里选择 js 和浏览器的流行特性来运转你的测验.
  • 破获网址的追踪时间线以支援确诊质量难点.

 

开始

puppeteer 介绍

Puppeteer是叁个经过DevTools Protocol垄断(monopoly卡塔 尔(阿拉伯语:قطر‎headless chromium的尖端node库, 也可通过安装设置非headless Chromium.

Puppeteer有chrome官方共青团和少先队实行保护, 相对于此外如PhantomJs, CasperJs 前途越来越好.

=============================================================================================

Puppeteer 是四个node库,他提供了风流罗曼蒂克组用来操纵Chrome的API, 通俗来讲正是叁个 headless chrome浏览器 (当然你也能够配备成有UI的,暗中认可是未曾的)。既然是浏览器,那么大家手工业能够在浏览器上做的业务 Puppeteer 都能废寝忘食, 别的,Puppeteer 翻译成汉语是”木偶”意思,所以听名字就清楚,操纵起来很有益于,你能够很有利的主宰她去达成:

假设你用过 PhantomJS 的话,你会开采她们有一些相似,但Puppeteer是Chrome官方团队扩充维护的,用常言说就是”有娘家的人“,前程越来越好。

安装

为了在你的花色里应用puppeteer, 实施:

npm i puppeteer
# 或者 yarn add puppeteer

提醒: 安装puppeteer是,会下载最新版本的chromium(Mac下170 M, Windows下282M))以保障API符合规律工作. 要跳过这一步,请参阅景况变量().

Puppeteer 相符干些什么事?

  • 尖端爬虫,能够爬取大批量异步渲染内容的网页。爬取SPA应用,并生成预渲染内容(“SS酷威”服务端渲染卡塔尔国
  • 支持成立新型的自动化测验意况(chrome卡塔 尔(英语:State of Qatar),能够直接运转测量检验用例,前端自动化测量检验(表单操作、事件模拟、键盘输入… 等卡塔 尔(阿拉伯语:قطر‎,模拟键盘输入、表单自动提交、登陆网页等,达成 UI 自动化测量检验
  • 改造网页截图恐怕 PDF
  • 破获站点的光K线,以便追踪你的网址,扶持剖析网址质量难题
  • 从网址抓取内容

例子

唤醒: puppeteer必要 Node V6.4.0及以上版本, 但以下例子中动用了在Node V7.60及以上版本中的 async/await .

利用过此外浏览器测验框架的人对puppeteer也会纯熟. 创制Browser实列, 展开页面,然后使用puppeteer API操作页面.

Chrome Headless碰着须求

  1. Puppeteer须要node版本超级大于v6.4.0,不过async/await只在Node v7.6.0或越来越高的版本扶植。
  2. 内需前段时间版本的Chromium浏览器

 

官方API:

 

 

基础篇:

一、《Puppeteer 入门教程》

二、《使用puppeteer-autotest 来为cnodejs 做自动化测验.》附录:有连锁网址案例

三、《Puppeteer的入门和进行》

四、《puppeteer学习》

五、《Puppeteer 入门》(iframe)

 

基础+进阶:

《无头浏览器 Puppeteer 初探》、《Puppeteer 初探》

 

进阶篇:

一、《Puppeteer初探--爬取并转移《ES6专门的职业入门》PDF》

二、《大前端神器安利之 Puppeteer》

三、《Puppeteer 初探从前端自动化测验》

四、《Making a Master Puppeteer》(成为二个Puppeteer大师卡塔 尔(阿拉伯语:قطر‎

 

Example - 导航到 截图后保存为example.png.

封存如下文件为 example.js

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

奉行上边命令 node example.js

puppeteer 设置出时页面尺寸为 800 x 600px ,截图尺寸也是其黄金时代. 通过Page.setViewport() 设置天性化页面尺寸.

Example - 创建PDF

文件保留为hn.js

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

试行如下命令 node hn.js, 查看 Page.pdf() API 找出越来越多关于创立PDF的新闻.

Example - 在页面上下文中试行js

保存为 get-dimensions.js

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

  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    }
  })
})()

实施如下命令 node get-dimensions.js, 查看Page.evaluate() API 获取有关evaluate和血脉相像办法 (如:evaluateOnNewDocument, exposeFunction)的详细消息.

运转时的暗许设置

  1. 使用无头浏览器形式(headless)

puppeteer 运转chromium 在headless形式下. 当运维浏览器时设置'headless' 选项使chromium运维在全格局下.

const browser = await puppeteer.launch({headless: false});
  1. 绑定特定版本的chromium

暗中认可情状下,puppeteer下载使用钦命版本的 chromium 以保险全体的API平常专门的工作. 创立Browser实例时钦点 executablePath值来以使用分歧浏览器.

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

翻看puppeteer.launch() API明白更加多音讯.

阅读那篇小说了解chromium和 Chrome 的不同, 陈诉了Chrome和 chromium 在Linux下的不相同.

  1. 开创二个新顾客

puppeteer每回运维时先创建三个 chromium 客户, 运营甘休后就杀绝客商音讯.

API文档

追究API 文书档案和例子来学习越来越多.

调弄整理技巧

  1. 关闭无头格局 - 有的时候看见浏览器的来得是有效的. 使浏览器运营在全情势而不是无头格局下, 使用headless: false:
const browser = await puppeteer.launch({headless: false,})
  1. 慢下来 - slowMo 选项减慢puppeteer 实行进程, 减慢钦赐的总纳秒数. 那是帮助观察发生如何的另二个路子.
const browser = await puppeteer.launch({
  headless: false,
  slowMo: 250 //减慢puppeteer 250ms
});
  1. 破获控制台出口 - 监听console事件. 当调节和测量试验page.evaluate() 内部代码时相比较便利.
page.on('console', msg => console.log('页面log', msg.text()));
await page.evaluate(() => console.log(`url is ${location.href}`))
  1. 悬停推行测量试验,在浏览器内使用debugger
  • 运行puppeteer时使用 {devtools: true}:
const browser = await puppeteer.launch({devtools: true});
  • 退换测验超时时间:
    • jest: jest.setTimeout(100000);
    • jasmine: jasmine.DEFAULT_TIME_INTERVAL = 100000;
    • mocha: this.timeout(100000); (改造测量试验时接收 function 无法运用箭头函数)
  • 在evaluate内部使用 debugger 语句, 在已存在的evaluate遭受中增加 debugger
await page.evaluate(() => {
  debugger;
});

puppeteer测量试验将会终止在上头那条语句, chromium也将停留在 debugger 方式.

  1. 开荒详细笔录 - 调用全数公共API 和中间传输协议将会被puppeteer命名空间下的 debug模块记录
# 基本的详细记录
 env DEBUG="puppeteer:*" node script.js

 # 调试输出可通过命名空间来开关
 env DEBUG="puppeteer:*,-puppeteer:protocol" node script.js # 记录除了协议信息的所有信息
 env DEBUG="puppeteer:session" node script.js # 记录会话协议(protocol messages)
 env DEBUG="puppeteer:mouse,puppeteer:keyboard" node script.js # 只记录鼠标和键盘API调用

 # 传输协议记录的比较繁杂. 下面例子过滤所有网络信息.
 env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'

为puppeteer贡献

查看孝敬指南 以了然puppeteer开垦概述

本文由澳门新萄京app发布于计算机前端,转载请注明出处:文书档案翻译

关键词:

上一篇:没有了
下一篇:外阴影与外发光