【puppeteer】前端自动化初探(一)
一、前提
windows环境的puppeteer环境配置要简单点,mac环境坑竟然有点多,这边稍微提下
二、开发环境
nodejs
puppeteer
mac
三、简单介绍下puppeteer
Puppeteer 核心功能
(1)利用网页生成PDF、图片
(2)爬取SPA应用,并生成预渲染内容(即“SSR” 服务端渲染)
(3)可以从网站抓取内容
(4)自动化表单提交、UI测试、键盘输入等
(5)帮你创建一个最新的自动化测试环境(chrome),可以直接在此运行测试用例
(6)捕获站点的时间线,以便追踪你的网站,帮助分析网站性能问题
四、环境准备
1.安装puppeteer
$:yarn add puppeteer 或者 $:npm i puppeteer"
这边一般会遇到无法下载Chromium的问题,解决办法:$:npm i --save puppeteer --ignore-scripts
2.下载Chromium
- 下载好后puppeteer后,要下载Chromium,首先我们要找到对应的puppeteer对应的Chromium-version版本
- 项目->node_modules->puppeteer->package.json->搜索一下chromiun_revision 查看当前支持的版本号
- 打开:https://npm.taobao.org/mirrors/chromium-browser-snapshots/Mac/ ,找到chromium的历史版本,下载即可,直接解压放到puppeteer下面也可以,也可以单独建立一个文件夹
3.准备脚本,
- Mac版本要定位到Chromium.app的包内容
- 新建baidu.js
const puppeteer = require('puppeteer'); (async () => { const brower = await puppeteer.launch({ executablePath:'/Users/wangxiao/Documents/wx_vue/nodejs/chromium/Chromium.app/Contents/MacOS/Chromium', headless:false }); const page = await brower.newPage(); await page.goto('http://www.baidu.com'); await page.screenshot({path:'baidu.png'}); await brower.close(); })().catch(error =>{console.log('error')});
说明:
- require:ES6语法,引入puppeteer包
- executablePath:运行Chromium或Chrome可执行文件的路径
- headless:是否运行在浏览器headless模式,true为不打开浏览器执行,默认为true
4.运行(简单的程序运行成功)
node baidu.js
5.经常报错的点
这个应该是权限问题,解决办法:sudo chmod a+x Chromium.app