【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

1. 下载好后puppeteer后，要下载Chromium，首先我们要找到对应的puppeteer对应的Chromium-version版本
2. 项目->node_modules->puppeteer->package.json->搜索一下chromiun_revision 查看当前支持的版本号
3. 打开：https://npm.taobao.org/mirrors/chromium-browser-snapshots/Mac/ ，找到chromium的历史版本，下载即可，直接解压放到puppeteer下面也可以，也可以单独建立一个文件夹

3.准备脚本，

1. Mac版本要定位到Chromium.app的包内容
2. 新建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