注:原地址:https://www.cnblogs.com/paris-test/p/9705075.html
一、Puppeteer 介绍
Puppeteer
翻译是操纵木偶的人,利用这个工具,我们能做一个操纵页面的人。Puppeteer
是一个Nodejs
的库,支持调用Chrome的API来操纵Web
,相比较Selenium
或是PhantomJs
,它最大的特点就是它的操作Dom
可以完全在内存中进行模拟既在V8
引擎中处理而不打开浏览器,而且关键是这个是Chrome团队在维护,会拥有更好的兼容性和前景。
二、Puppeteer
用处
- 利用网页生成PDF、图片
- 爬取SPA应用,并生成预渲染内容(即“SSR” 服务端渲染)
- 可以从网站抓取内容
- 自动化表单提交、UI测试、键盘输入等
- 帮你创建一个最新的自动化测试环境(chrome),可以直接在此运行测试用例6.捕获站点的时间线,以便追踪你的网站,帮助分析网站性能问题
三、puppeteer环境准备
1、Puppeteer环境要求
1.1、Puppeteer要求node版本不低于v6.4.0,但是async/await只在Node v7.6.0或更高的版本支持。
1.2、需要最近版本的Chromium浏览器
2、Puppeteer环境准备
1.Node.js 安装配置
2.Puppeteer安装
通过npm安装:npm install puppeteer --save
由于封网,直接下载 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,下载完后将压缩包解压,会有个 Chromium.app
,将其放在你喜欢的目录下,例如 /Users/huqiyang/Documents/project/z/chromium/Chromium.app
。正常安装包后 Chromium.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
2、jest环境
安装 Jest:npm install --save-dev jest
四、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, // 1000, // height: 40 // } }); browser.close(); })(); |