【puppeteer】前端自动化初探（一）

1、前提

windows环境的puppeteer环境配置要简单点，mac环境坑居然有点多，这边稍微提下

2、开发环境

nodejs

puppeteer

mac

3、简单介绍下puppeteer

Puppeteer 核心功能
（1）利用网页生成PDF、图片
（2）爬取SPA应用，并生成预渲染内容（即“SSR” 服务端渲染）
（3）能够从网站抓取内容
（4）自动化表单提交、UI测试、键盘输入等
（5）帮你建立一个最新的自动化测试环境（chrome），能够直接在此运行测试用例
（6）捕获站点的时间线，以便追踪你的网站，帮助分析网站性能问题

4、环境准备

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