puppeteer 是一个通过devtools 协议提供高级api 来控制 chrome,chromium 的 node库; puppeteer默认运行在 headless 模式, 也可配置后运行在全模式(non-headless).
大部分在浏览器里手动执行的动作都可以通过puppeteer实现! 这里有几个列子来让你开始.
为了在你的项目里使用puppeteer, 执行:
npm i puppeteer # 或者 yarn add puppeteer
提示: 安装puppeteer是,会下载最新版本的chromium(mac下170 m, windows下282m))以保证api正常工作. 要跳过这一步,请参阅环境变量().
提示: puppeteer需要 node v6.4.0及以上版本, 但以下例子中使用了在node v7.60及以上版本中的 async/await .
使用过其它浏览器测试框架的人对puppeteer也会熟悉. 创建browser实列, 打开页面,然后使用puppeteer api操作页面.
保存如下文件为 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() 设置个性化页面尺寸.
文件保存为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的信息.
保存为 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)的详细信息.
puppeteer 运行chromium 在headless模式下. 当运行浏览器时设置'headless' 选项使chromium运行在全模式下.
const browser = await puppeteer.launch({headless: false});
默认情况下,puppeteer下载使用指定版本的 chromium 以保证所有的api正常工作. 创建browser实例时指定 executablepath值来以使用不同浏览器.
const browser = await puppeteer.launch({executablepath: '/path/to/chrome'})
查看puppeteer.launch() api了解更多信息.
阅读这篇文章了解chromium和 chrome 的不同, 描述了chrome和 chromium 在linux下的不同.
puppeteer每次运行时先创建一个 chromium 用户, 运行结束后就清除用户信息.
探索api 文档和例子来学习更多.
const browser = await puppeteer.launch({headless: false,})
const browser = await puppeteer.launch({
headless: false,
slowmo: 250 //减慢puppeteer 250ms
});
page.on('console', msg => console.log('页面log', msg.text()));
await page.evaluate(() => console.log(`url is ${location.href}`))
const browser = await puppeteer.launch({devtools: true});
jest.settimeout(100000);jasmine.default_time_interval = 100000;this.timeout(100000); (改变测试时使用 function 不能使用箭头函数)debugger 语句, 在已存在的evaluate环境中添加 debuggerawait page.evaluate(() => {
debugger;
});
puppeteer测试将会停止在上面这条语句, chromium也将停留在 debugger 模式.
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开发概述
chrome devtools团队维护这个库, 同时欢迎大家的参与!
这个项目的目标是:
我们采用chromium职责来帮助我们驱动产品做决定:
不是, 这两个项目因为一些不同的原因都是有价值的.
puppeteer作为 chromium 不可分割的一部分. 每个版本的puppeteer绑定于一个特定版本的 chromium以保证 puppeteer工作.
着并不是通过人工来约束,许多puppeteer工作确实在 chromium 仓库里.下面时典型故事:
然而,通常人们更愿意将puppeteer 和官方的google chrome一同使用.这种情况下需要选择特定版本的puppeteer以使chromium版本接近chrome.
在puppeteer相关版本的package.json文件里查看.
在puppeteer观点中, '导航(navigation)' 是所有改变页面url的事物. 除了常规的导航外,在浏览器中点击网络从web服务器中获取新文档, 包含a标签导航和history api
在这个navigation定义中, puppeteer和单页面应用无缝衔接.
在浏览器中输入事件被分为两大类: 信任的和不被信任的.
网站能够区分这两类事件:
event.istrusted事件标志.为了自动化的目的, 生成可信任事件是比较重要的. 通过puppeteer生成的输入事件都是可信任事件和触发适当的伴随事件.如果需要非信任事件,需要通过page.evaluate 在页面上下文中生成模拟事件:
await page.evaluate(() => {
document.queryselector('button[type=submit]').click();
})
你也许会发现当puppeteer控制包含audio和video的页面时一些行为不是预期的.(例如, 视频播放时截图会失败), 这有以下两个原因:
我们有一份针对不同操作系统的排错指南需求列表.
npm i --save puppeteer@next
提示: 提前版本可能不稳定和包含bugs.
这里有许多关于puppeteer帮助的路径:
确保在提交你的问题之前在这些频道里搜索问题.
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论