前端测试框架,抓取网页内容

By admin in 4858美高梅 on 2019年4月16日

puppeteer

puppeteer 是多少个通过DevTools 商谈提供高端API 来决定 chrome,chromium 的
NODE库; puppeteer私下认可运维在 headless 方式,
也可配备后运维在全情势(non-headless).

小结了一下有关puppeteer的学习的网址,以往还会一而再立异

1、下载nodejs

网址: 注:小编使用的是二进制包
6三个人。解压后可径直利用

4858美高梅 1nodejs.png

puppeteer简介

puppeteer
翻译是垄断木偶的人,利用这几个工具,大家能做一个决定页面包车型大巴人。puppeteer是二个nodejs的库,帮忙调用Chrome的API来操纵Web,绝比较Selenium或是PhantomJs,它最大的特色正是它的操作Dom能够完全在内部存款和储蓄器中进行效仿既在V捌引擎中拍卖而不张开浏览器,而且重点是其一是Chrome团队在保险,会有所更加好的包容性和前景。

puppeteer能够做什么样

诸多在浏览器里手动执行的动作都得以透过puppeteer完成!
那里有多少个列子来让您开首.

  • 浮动页面截图和PDF.
  • 爬取单页面应用生成提前渲染的始末(例如 SS翼虎).
  • 电动提交表单, UI测试, 键盘输入等.
  • 创制新型的自动化的测试环境,在新式的 chrome 里使用 js
    和浏览器的新式性格来运转你的测试.
  • 抓获网址的追踪时间线以赞助会诊品质问题.

 

二、查看node版本音信。

4858美高梅 2本子消息.png

puppeteer功能

  • 扭转页面包车型地铁截图和PDF。
  • 抓取SPA并转移预先展现的剧情(即“SS奥迪Q5”)。
  • 从网址抓取你要求的始末。
  • 机动表单提交,UI测试,键盘输入等
  • 创办一个最新的自动化测试环境。使用新型的JavaScript和浏览器成效,直接在新式版本的Chrome中运作测试。
  • 破获您的网址的年华线追踪,以支援检查判断品质难题。

开始

puppeteer 介绍

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

Puppeteer有chrome官方团队拓展维护, 相对于别的如PhantomJs, CasperJs
前景越来越好.

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

Puppeteer 是三个node库,他提供了一组用来垄断Chrome的API,
通俗来说正是二个 headless chrome浏览器
(当然你也足以安顿成有UI的,暗许是从未有过的)。既然是浏览器,那么我们手工业能够在浏览器上做的业务
Puppeteer 都能独当一面, 别的,Puppeteer
翻译成汉语是”木偶”意思,所以听名字就掌握,操纵起来很有益于,你能够很有利的操纵她去完毕:

假定你用过 PhantomJS
的话,你会发现她们有点类似,但Puppeteer是Chrome官方团队拓展维护的,用俗话说正是”有娘家的人“,前景更加好。

3、安装puppeteer模块。

Puppeteer是什么 Puppeteer 是三个Node库, 它提供高端API,通过DevTools
Protocol 来支配Chrome 或 Chromium。 Puppeteer 私下认可运转为headless
,可是能够配备为运维为non-headless 。 能够做什么 生成页面截图或PDF
抓取SPA 并生成预渲染内容

puppeteer轻易入门

安装

4858美高梅 ,为了在你的类型里使用puppeteer, 施行:

npm i puppeteer
# 或者 yarn add puppeteer

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

Puppeteer 适合干些什么事?

  • 高等爬虫,能够爬取大量异步渲染内容的网页。爬取SPA应用,并生成预渲染内容(“SS索罗德”服务端渲染)
  • 支援创设新型的自动化测试环境(chrome),能够直接运营测试用例,前端自动化测试(表单操作、事件模拟、键盘输入…
    等),模拟键盘输入、表单自动提交、登入网页等,完成 UI 自动化测试
  • 改造网页截图或然 PDF
  • 破获站点的小时线,以便追踪你的网址,协理分析网址质量难点
  • 从网址抓取内容
参考:

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

壹. 条件和装置

Puppeteer 至少须求 Node v陆.四.0,如要使用 async / await,唯有 Node v七.陆.0
或越来越高版本才支撑。 node下载地址:
https://nodejs.org/zh-cn/

例子

提示: puppeteer须求 Node V6.4.0及以上版本, 但以下例子中使用了在Node
V柒.60及以上版本中的 async/await .

行使过别的浏览器测试框架的人对puppeteer也会纯熟. 创造Browser实列,
张开页面,然后采取puppeteer API操作页面.

Chrome Headless环境需要

  1. Puppeteer要求node版本不低于v陆.4.0,可是async/await只在Node
    v柒.陆.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() 设置本性化页面尺寸.

四、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浏览器路线

二.1 创造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奥迪Q7_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)的详尽音信.

贰.三 手动下载Chromium

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

把下载刚刚下载的文本解压出来会有chrome-win32文本夹,把当中的文件拷贝到项目新建的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每一回运行时先创设2个 chromium 用户, 运转甘休后就解除用户新闻.

二.4 新建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:
    等待浏览器实例运营的最长日子(以纳秒为单位)。默以为30000(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测试将会告1段落在地点那条语句, 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在七个自动化测试页面包车型大巴性质开销大致为0.
  • 海东: puppeteer在 Chromium 操作进度中,自动使潜在的恶意页面安全.
  • 安乐: puppeteer不是脆弱的,也不会有内部存款和储蓄器泄漏
  • 轻巧: puppeteer 提供易用易驾驭和调剂的高等API.

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

不是, 这八个门类因为有些例外的由来都以有价值的.

  • Selenium/WebDriver 集中于机关跨浏览器;
    它的市场股票总值在于提供1个在富有重点浏览器里工作的纯净标准API.
  • Puppeteer 专注于Chromium;它的股票总市值在于丰裕的功效和高可相信性.
    也便是说,你能够选择puppeteer在非Chromium浏览器里运营测试.
    例如使用community-driver jest-puppeteer.
    即使puppeteer不是你唯1可用的化解方案,但确确实实有几分比web
    Driver好的特征:
  • puppeteer
    能够零装置,附带特定版本的chromium是其越来越好的干活,puppeteer初始选用十分轻易,在1天停止时只在chromium上运转多少个测试比不测试好.
  • puppeteer 是事件驱动架构, 移除大量潜在脆弱环节.
    不须要在puppeteer脚本调用邪恶的”sleep(一千)”
  • puppeteer 暗中认可运营在headless方式下,使得运行相当的慢. puppeteer V壹.5.0
    也暴表露浏览器上下文, 使高效的并行实行测试成为只怕.
  • puppeteer 在调节和测试时高亮: 翻转headless位 false ,设置slowMo选项,
    将晤面到浏览器的行为. 甚至足以展开Chrome DevTools来检测环境.

怎么puppeteer V.xxx 不能够和Chromium V.yyy一齐工作?

puppeteer作为 chromium 不可分割的壹部分.
每种版本的puppeteer绑定于一个特定版本的 chromium以管教 puppeteer工作.

着并不是通过人为来约束,很多puppeteer职业的确在 chromium
仓Curry.下边时独立旧事:

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

只是,平时人们更乐于将puppeteer 和法定的谷歌Chrome一齐使用.那种景观下须要选择特定版本的puppeteer以使chromium版本接近chrome.

puppeteer使用哪个版本的 chromium?

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

哪些是导航(navigation)?

在puppeteer观点中, ‘导航(navigation)’ 是享有更换页面ULacrosseL的事物.
除了平常的领航外,在浏览器中式点心击网络从web服务器中收获新文书档案,
包蕴a标签导航和history API

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

相信的和不依赖的输入事件有何样差别?

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

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

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

  • 使用 Event.isTrusted事件标记.
  • 嗅探伴随事件. 例如每1个可相信任的点击事件在此以前都是’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时存在难点?

我们有壹份针对分歧操作系统的排错指南供给列表.

怎样行使puppeteer的超前版本?

npm i --save puppeteer@next

提示: 提前版本恐怕不安宁和含有bugs.

再有越来越多难题,到何地寻求支援?

此间有不少关于puppeteer援助的不2诀窍:

  • bugtracker
  • stackoverflowh
  • slack
    channel

保障在付出你的标题在此以前在那几个频道里寻觅难题.

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有