【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

posted @ 2019-01-05 16:59  WANG-X  阅读(1364)  评论(0编辑  收藏  举报