【澳门葡京】文书档案翻译,抓取网页内容

puppeteer

puppeteer 是3个由此DevTools 协议提供高等API 来调整 chrome,chromium 的
NODE库; puppeteer暗中认可运营在 headless 方式,
也可配置后运维在全情势(non-headless).

小结了眨眼间间关于puppeteer的学习的网址,未来还会持续创新

1、下载nodejs

网址: 注:小编使用的是二进制包
6十六位。解压后可径直选择

澳门葡京 1nodejs.png

puppeteer简介

puppeteer
翻译是操纵木偶的人,利用那一个工具,我们能做二个说了算页面包车型地铁人。puppeteer是三个nodejs的库,帮助调用Chrome的API来垄断Web,相相比Selenium或是PhantomJs,它最大的特色正是它的操作Dom能够完全在内存中实行模拟既在V八引擎中处理而不展开浏览器,而且根本是以此是Chrome团队在保卫安全,聚会场全数越来越好的包容性和前景。

puppeteer能够做哪些

大部分在浏览器里手动试行的动作都足以透过puppeteer达成!
那里有几个列子来让您开头.

  • 转移页面截图和PDF.
  • 爬取单页面应用生成提前渲染的剧情(例如 SS奥迪Q5).
  • 活动提交表单, UI测试, 键盘输入等.
  • 开立异型的自动化的测试环境,在风行的 chrome 里接纳 js
    和浏览器的摩登本性来运行你的测试.
  • 破获网址的追踪时间线以援救会诊品质难点.

 

二、查看node版本音讯。

澳门葡京 2本子消息.png

puppeteer功能

  • 浮动页面包车型大巴截图和PDF。
  • 抓取SPA并转移预先显示的剧情(即“SS奇骏”)。
  • 从网址抓取你须要的始末。
  • 机动表单提交,UI测试,键盘输入等
  • 创造2个最新的自动化测试环境。使用最新的JavaScript和浏览器成效,间接在最新版本的Chrome中运作测试。
  • 破获您的网址的小时线跟踪,以帮扶检查判断品质难点。

开始

puppeteer 介绍

Puppeteer是二个透过DevTools
Protocol支配headless
chromium的高端级node库, 也可通过设置设置非headless Chromium.

Puppeteer有chrome官方团队开始展览维护, 相对于任何如PhantomJs, CasperJs
前景更加好.

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

Puppeteer 是3个node库,他提供了壹组用来垄断(monopoly)Chrome的API,
通俗来说正是多个 headless chrome浏览器
(当然你也得以布置成有UI的,暗许是尚未的)。既然是浏览器,那么大家手工业可以在浏览器上做的政工Puppeteer 都能独当一面, 其余,Puppeteer
翻译成普通话是”木偶”意思,所以听名字就通晓,垄断(monopoly)起来很便宜,你能够很便宜的主宰她去落到实处:

假诺你用过 PhantomJS
的话,你会意识她们有点类似,但Puppeteer是Chrome官方团队进行爱戴的,用俗话说正是”有娘家的人“,前景越来越好。

3、安装puppeteer模块。

Puppeteer是什么 Puppeteer 是七个Node库, 它提供高端API,通过DevTools
Protocol 来决定Chrome 或 Chromium。 Puppeteer 暗中同意运维为headless
,可是能够配备为运营为non-headless 。 能够做哪些 生成页面截图或PDF
抓取SPA 并生成预渲染内容

puppeteer轻巧入门

安装

为了在您的种类里应用puppeteer, 推行:

npm i puppeteer
# 或者 yarn add puppeteer

提示: 安装puppeteer是,会下载最新版本的chromium(Mac下170 M,
Windows下2八2M))以管教API平常工作. 要跳过这一步,请参阅环境变量().

Puppeteer 适合干些什么事?

  • 尖端爬虫,可以爬取大批量异步渲染内容的网页。爬取SPA应用,并生成预渲染内容(“SS猎豹CS六”服务端渲染)
  • 扶持创造新型的自动化测试环境(chrome),可以直接运转测试用例,前端自动化测试(表单操作、事件模拟、键盘输入…
    等),模拟键盘输入、表单自动提交、登六网页等,落成 UI 自动化测试
  • 变化网页截图大概 PDF
  • 破获站点的时刻线,以便追踪你的网址,帮助分析网址质量难点
  • 从网址抓取内容
参考:

一、在windows环境下安装,在命令提醒符中,输入指令:npm i –save puppeteer
–ignore-scripts,就能够安装成功。

1. 环境和装置

【澳门葡京】文书档案翻译,抓取网页内容。Puppeteer 至少须求 Node v6.肆.0,如要使用 async / await,只有 Node v七.6.0
或越来越高版本才支撑。 node下载地址:
https://nodejs.org/zh-cn/

例子

唤醒: puppeteer须求 Node V陆.4.0及以上版本, 但以下例子中央银行使了在Node
V七.60及以上版本中的 async/await .

应用过任何浏览器测试框架的人对puppeteer也会熟稔. 创造Browser实列,
展开页面,然后利用puppeteer API操作页面.

Chrome Headless环境须求

  1. Puppeteer要求node版本不低于v6.肆.0,不过async/await只在Node
    v七.6.0或更加高的本子扶助。
  2. 亟需近日版本的Chromium浏览器

 

官方API:

 

 

基础篇:

一、《Puppeteer
入门教程》

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

三、《Puppeteer的入门和奉行》

四、《puppeteer学习》

五、《Puppeteer
入门》(iframe)

 

基础+进阶:

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

 

进阶篇:

一、《Puppeteer初探–爬取并转移《ES陆行业内部入门》PDF》

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

三、《Puppeteer
初探以前端自动化测试》

四、《Making a Master
Puppeteer》(成为2个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() 设置特性化页面尺寸.

四、chromeium能够下载对应的chromium,一定要和本机的chrome浏览器版本相呼应,也能够平素运用本机的chrome浏览器。

const puppeteer = require('puppeteer'); => { // chrome地址 const chromePath=process.argv[2] //传进的将要解析的url网址 const address=process.argv[3]; const browser = await puppeteer.launch({ignoreHTTPSErrors: true,headless: false,executablePath:chromePath,timeout:60000,args: ['--no-sandbox', '--disable-setuid-sandbox']}); // 打开新页面 const page = await browser.newPage(); //等待时间 var time=25000; // 访问 await page.goto(request_url, {waitUntil: 'domcontentloaded'}).catch(err => console.log; await page.waitFor; let content = await page.content() console.log; await browser.close;

推行命令:在cmd中施行 : nodejs路线 puppeteer路线 chrome浏览器路线

2.一 创制test目录,进入目录试行npm init

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的音信.

2.2 安装 puppeteer
yarn add puppeteer 或者 npm i puppeteer

或许会冒出以下报错:

ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA
D" env variable to skip download.

是因为在实行安装的进度中必要推行install.js,这里会下载Chromium,官方网站提议是开始展览跳过,大家得以施行—ignore-scripts 忽略那一个js施行。也可以经过设置条件变量set
PUPPETEE猎豹CS6_SKIP_CHROMIUM_DOWNLOAD=一阻止下载 Chromium
(因为封网,间接下载会退步)

npm i --save puppeteer --ignore-scripts

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)的详尽音讯.

2.三 手动下载Chromium

下载地址:https://download-chromium.appspot.com/
(张开蓝灯翻墙软件…)

把下载刚刚下载的文书解压出来会有chrome-win3二文书夹,把里面包车型大巴公文拷贝到项目新建的chromium文件夹中

运作时的暗中同意设置

  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 用户, 运转甘休后就免去用户消息.

二.肆 新建index.js(截图功用), 代码如下:
const puppeteer = require('puppeteer');

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

打开cmd执行index.js

node index.js

此时恐怕出现以下错误:

(node:8672) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejec
tion id: 1): AssertionError [ERR_ASSERTION]: Chromium revision is not downloaded
. Run "npm install"
(node:8672) [DEP0018] DeprecationWarning: Unhandled promise rejections are depre
cated. In the future, promise rejections that are not handled will terminate the
 Node.js process with a non-zero exit code.

来得chromium
未下载错误,因为chromium暗中认可的下载路线是在node_modules/puppeteer/.local-chromium/目录,那时候大家的chromium是在档次根目录,所以要求配置钦赐路径,修改index.js文件():

const puppeteer = require('puppeteer');

(async () => {
      const browser = await puppeteer.launch({
        executablePath: './chromium/chrome.exe',
        headless: false
      });
      const page = await browser.newPage();
      await page.goto('http://music.163.com/');
      await page.screenshot({path: 'music.png'});
      browser.close();
})();

puppeteer launch参数表明:

  • executablePath: 运转Chromium或Chrome可实践文件的门路
  • headless:
    是或不是运营在浏览器headless方式,true为不展开浏览器推行,默以为true
  • timeout:
    等待浏览器实例运转的最长日子(以微秒为单位)。默以为贰仟0(30秒)。通过0禁止使用过期
  • args: 传递给浏览器实例的任何参数

更多参数请参考官网,再一次实行index.js或许出现以下错误:

Error: Protocol error (Page.getFrameTree): 'Page.getFrameTree' wasn 't found undefined

刚发轫找了好久没找到答案,然后上万能的谷歌(Google)找了下,发现了就像的标题

image.png

大概是chromium的版本存在差别,然后再一次在chromium官网下载最新版本解压到品种(要留心下相应系统chromium)

实行index.js,
脚本运维chromium浏览器跳转到界面,截图保存到花色中,那样就成功了…

API文档

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

二.5 puppeteer相关地址

puppeteer神器官方文书档案,能够开始展览任何庞大的意义开采…

调整技巧

  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开辟概述

FAQ(常见难点)

谁维护puppeteer?

Chrome DevTools共青团和少先队掩护那个库, 同时欢迎大家的到场!

puppeteer的对象和任务是何等?

以此类别的对象是:

  • 提供多个精简和华贵的库以杰出 DevTools Protocol 的手艺
  • 为接近的测试库提供实现参考. 最后此外框架可以动用puppeteer作为基础层.
  • 提升利用 无头,自动化 浏览器测试.
  • 接济DevTools Protocol 新特征做 dogfood 测试, 捕获bug
  • 找出浏览器自动化测试的痛点, 然后帮助缓解这个差距.

咱俩接纳chromium任务来帮助大家驱动产品做决定:

  • 急迅: puppeteer在1个自动化测试页面包车型客车质量费用大约为0.
  • 有惊无险: puppeteer在 Chromium 操作进度中,自动使潜在的恶心页面安全.
  • 安居乐业: puppeteer不是脆弱的,也不会有内部存储器泄漏
  • 简易: puppeteer 提供易用易明白和调节和测试的高端级API.

Puppeteer是用来代替Selenium/webDriver的吗?

不是, 那四个系列因为有个别见仁见智的原因都以有价值的.

  • Selenium/WebDriver 集中于活动跨浏览器;
    它的价值在于提供贰个在具备重点浏览器里职业的纯粹标准API.
  • Puppeteer 专注于Chromium;它的股票总值在于丰裕的作用和高可信赖性.
    也正是说,你能够动用puppeteer在非Chromium浏览器里运维测试.
    例如利用community-driver jest-puppeteer.
    就算puppeteer不是你唯一可用的消除方案,但确确实实有几分比web
    Driver好的特征:
  • puppeteer
    能够零设置,附带特定版本的chromium是其越来越好的做事,puppeteer初始应用相当轻易,在一天结束时只在chromium上运营多少个测试比不测试好.
  • puppeteer 是事件驱动架构, 移除大批量机密脆弱环节.
    不要求在puppeteer脚本调用邪恶的”sleep(一千)”
  • puppeteer 私下认可运维在headless情势下,使得运行相当的慢. puppeteer V一.5.0
    也暴揭破浏览器上下文, 使高效的并行试行测试成为或者.
  • puppeteer 在调节和测试时高亮: 翻转headless位 false ,设置slowMo选项,
    将会看出浏览器的行为. 甚至能够张开Chrome DevTools来检查实验环境.

为什么puppeteer V.xxx 无法和Chromium V.yyy一起职业?

puppeteer作为 chromium 不可分割的1部分.
各样版本的puppeteer绑定于一个特定版本的 chromium以担保 puppeteer工作.

着并不是因此人为来约束,很多puppeteer工作真正在 chromium
仓库里.上面时独立传说:

  • puppeteer bug报告
  • 那原本是DevTools protocol的 issue, 然后在chromium里修复
  • 当bug修复后,滚动更新chromium到 puppeteer

不过,日常人们更愿意将puppeteer 和法定的谷歌Chrome一起使用.那种状态下要求选拔特定版本的puppeteer以使chromium版本接近chrome.

puppeteer使用哪个版本的 chromium?

在puppeteer相关版本的package.json文件里查看.

什么是导航(navigation)?

在puppeteer观点中, ‘导航(navigation)’ 是享有改动页面U途达L的事物.
除了寻常的领航外,在浏览器中式点心击网络从web服务器中得到新文书档案,
包含a标签导航和history API

在那个navigation定义中, puppeteer和单页面应用无缝衔接.

相信的和不相信的输入事件有哪些不一致?

在浏览器中输入事件被分为两大类: 信任的和不被信任的.

  • 信任事件: 通过页面包车型地铁用户接口发生. 例如使用鼠标和键盘.
  • 非信任事件: 通过web API产生. 例如document.create伊芙nt 或然element.click() 方法.

网址能够区分那两类事件:

  • 使用 Event.isTrusted事件标识.
  • 嗅探伴随事件. 例如每三个可相信任的点击事件此前都是’moussedown’
    和’mouseup’事件.

为了自动化的目标, 生成可信任事件是相比重大的.
通过puppeteer生成的输入事件都以可靠任事件和接触适当的陪伴事件.假使必要非信任事件,供给通过page.evaluate
在页面上下文中生成模拟事件:

await page.evaluate(() => {
  document.querySelector('button[type=submit]').click();
})

puppeteer不协理什么特点?

你大概会发现当puppeteer调节包括audio和video的页面时部分行事不是意料的.(例如,
摄像播放时截图会退步),
那有以下五个原因:

  • Puppeteer 是和chromium绑定的,并不是chrome, 所以puppeteer承接了
    chromium全部限制. 那意味puppeteer 不扶助部分许可格式例如: AAC和
    H.26四(但是也说不定强制puppeteer使用, 当
    通过executablePath选项使用chrome代替chromium时.
    唯有在法定发布的chrome帮忙那一个媒体格式时技能利用那个安顿)
  • 自打puppeteer调控chromium/chrome的桌面版后,只在大哥伦比亚大学版本里的chrome个性不被支持.
    那表示puppeteer不协理 http Live Streaming(HLS).

在测试环境中装置运维puppeteer时存在难点?

咱俩有1份针对不一样操作系统的排错指南急需列表.

怎么接纳puppeteer的超前版本?

npm i --save puppeteer@next

提醒: 提前版本也许不安宁和包蕴bugs.

还有越来越多难题,到何地寻求帮忙?

此处有无数有关puppeteer帮助的路子:

  • bugtracker
  • stackoverflowh
  • slack
    channel

保障在付给你的主题素材从前在那几个频道里找找难点.

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website