了解Puppeteer

2018-02-27 11:02:39来源:https://juejin.im/post/5a8151a05188257a7349c6db作者:稀土掘金人点击

分享


Puppeteer
是 Google Chrome 团队官方的无界面(Headless)Chrome 工具。Chrome 作为浏览器市场的领头羊,Chrome Headless
将成为 web 应用自动化测试
的行业标杆。所以我们很有必要来了解一下它



无头浏览器是指没有窗口的浏览器


二、用它能做什么?


通过Puppeteer
我们可以让浏览器帮我们自动完成很多事情,例如 :


生成页面的截图或者PDF
自动表单提交,UI测试,键盘输入
创建自动化测试环境

三、如何安装Puppeteer
?


安装Puppeteer
很简单,如下:


npm i --save puppeteer
# or "yarn add puppeteer"


需要注意的是,由于用到了ES7的async/await
语法 ,node
版本最好是v7.6.0或以上


四、一些实例
1、屏幕截图
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://www.wangyulue.com');
await page.screenshot({path: 'wanger.png'});
await browser.close();
})();


需要注意的是,Puppeteer
将默认页面大小为800px
x600px
,该大小定义了屏幕截图的大小。我们可以通过Page.setViewport()
来设置截图页面大小。


2、将网页保存为PDF
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md', {waitUntil: 'networkidle2'});
await page.pdf({path: 'api.pdf', format: 'A4'});
await browser.close();
})();


关于page.pdf()
的更多可配置项,感兴趣的同学可以戳这里


3、模拟登录GitHub
/**
* @desc Logs into Github. Provide your username and password as environment variables when running the script, i.e:
* `GITHUB_USER=myuser GITHUB_PWD=mypassword node github.js`
*/
const puppeteer = require('puppeteer')
const screenshot = 'github.png';
(async () => {
const browser = await puppeteer.launch({headless: true})
const page = await browser.newPage()
await page.goto('https://github.com/login')
await page.type('#login_field', process.env.GITHUB_USER)
await page.type('#password', process.env.GITHUB_PWD)
await page.click('[name="commit"]')
await page.waitForNavigation()
await page.screenshot({ path: screenshot })
browser.close()
console.log('See screenshot: ' + screenshot)
})()


在GitHub上专门有一个puppeteer
的demo集合库,感兴趣的同学可以戳这里
了解


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台