2019.4.10 初识puppeteer

注：原地址：https://www.cnblogs.com/paris-test/p/9705075.html

1、Puppeteer 介绍

Puppeteer 翻译是操纵木偶的人，利用这个工具，咱们能作一个操纵页面的人。Puppeteer是一个Nodejs的库，支持调用Chrome的API来操纵Web，相比较Selenium或是PhantomJs,它最大的特色就是它的操做Dom能够彻底在内存中进行模拟既在V8引擎中处理而不打开浏览器，并且关键是这个是Chrome团队在维护，会拥有更好的兼容性和前景。

2、Puppeteer 用处

• 利用网页生成PDF、图片
• 爬取SPA应用，并生成预渲染内容（即“SSR” 服务端渲染）
• 能够从网站抓取内容
• 自动化表单提交、UI测试、键盘输入等
• 帮你建立一个最新的自动化测试环境（chrome），能够直接在此运行测试用例6.捕获站点的时间线，以便追踪你的网站，帮助分析网站性能问题

3、puppeteer环境准备

一、Puppeteer环境要求

1.一、Puppeteer要求node版本不低于v6.4.0，可是async/await只在Node v7.6.0或更高的版本支持。

1.二、须要最近版本的Chromium浏览器

二、Puppeteer环境准备

1.Node.js 安装配置

2.Puppeteer安装

经过npm安装：npm install puppeteer --save

因为封网，直接下载 Chromium 会失败，能够先阻止下载 Chromium 而后再手动下载它

手动下载 Chromium，下载完后将压缩包解压，会有个 ，将其放在你喜欢的目录下，例如 。正常安装包后  会在 中

# 安装命令 npm i puppeteer --save # 错误信息 ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download. # 设置环境变量跳过下载 Chromium set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 # 或者能够这样干，只下载模块而不build npm i --save puppeteer --ignore-scripts # 成功安装模块 + puppeteer@0.13.0 added 1 package in 1.77s

Chromium.app/Users/huqiyang/Documents/project/z/chromium/Chromium.appChromium.app.local-chromium

Tip：下载 Chromium 失败解决办法

• 更换国内Chromium源

PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org npm i puppeteer 

• 或者用 cnpm 安装

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

二、jest环境

安装 Jest：npm install --save-dev jest

4、puppeteer自动化初试

初试 Puppeteer，截个图吧

知识点

• puppeteer.launch 启动浏览器实例
• browser.newPage() 建立一个新页面
• page.goto 进入指定网页
• page.screenshot 截图

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

const  puppeteer = require( 'puppeteer' );   (async () => {    const  browser = await (puppeteer.launch({      // 如果手动下载的chromium须要指定chromium地址, 默认引用地址为 /项目目录/node_modules/puppeteer/.local-chromium/      executablePath:  '/Users/huqiyang/Documents/project/z/chromium/Chromium.app/Contents/MacOS/Chromium' ,      //设置超时时间      timeout: 15000,      //若是是访问https页面 此属性会忽略https错误      ignoreHTTPSErrors:  true ,      // 打开开发者工具, 当此值为true时, headless总为false      devtools:  false ,      // 关闭headless模式, 不会打开浏览器      headless:  false    }));    const  page = await browser.newPage();    await page. goto ( 'https://www.jianshu.com/u/40909ea33e50' );    await page.screenshot({      path:  'jianshu.png' ,      type:  'png' ,      // quality: 100, 只对jpg有效      fullPage:  true ,      // 指定区域截图，clip和fullPage二者只能设置一个      // clip: {      //   x: 0,      //   y: 0,      //   width: 1000,      //   height: 40      // }    });    browser.close(); })();