Puppeteer笔记（二）：Puppeteer安装及实例Demo

Puppeteer系列

1、Puppeteer笔记（一）：Puppeteer简介

2、Puppeteer笔记（二）：Puppeteer安装及实例Demo

3、Puppeteer笔记（三）：Puppeteer获取元素及元素属性 

4、Puppeteer笔记（四）：Puppeteer模拟键盘 

5、Puppeteer笔记（五）：Puppeteer文件上传

6、Puppeteer笔记（六）：Puppeteer切换frame操作 

7、Puppeteer笔记（七）：Puppeteer切换浏览器TAB页 

8、Puppeteer笔记（八）：Puppeteer执行自定义Javascript方法 

 一、Puppeteer环境准备

1、Puppeteer环境要求：

查看 Puppeteer 的官方 API 你会发现满屏的 async, await 之类，这些都是 ES7 的规范，所以你需要：

（1）Nodejs 的版本不能低于 v7.6.0, 需要支持 async, await.

（2）需要最新的 chrome driver, 这个你在通过 npm 安装 Puppeteer 的时候系统会自动下载的

2、Puppeteer环境准备

（1）安装node，官网地址：https://nodejs.org/zh-cn/

并校验node是否安装成功：node -v

（2）安装Puppeteer：npm install puppeteer --save
安装puppeteer时会自带安装内置Chromium，如Chromium下载失败，可手动下载Chromium。

二、快速上手实例Demo

测试功能：打开百度首页，输入“hello world”，搜索查询并截图。

创建Test.js，输入以下代码： 

 1 //引入puppeteer
 2 const puppeteer = require('puppeteer');
 3 /*
 4 创建一个Browser浏览器实例，并设置浏览器实例相关参数
 5 headless: 是否在无头模式下运行浏览器，默认是true
 6 defaultViewport：设置页面视口大小，默认800*600，如果为null的话就禁用视图口
 7 args：浏览器实例的其他参数
 8 defaultViewport: null, args: ['--start-maximized']：最大化视图窗口展示
 9 ignoreDefaultArgs: ['--enable-automation']:
10 禁止展示chrome左上角有个Chrome正受自动软件控制，避免puppeteer被前端JS检测到
11 */
12 puppeteer.launch({
13     headless: false,
14     defaultViewport: null,
15     args: ['--start-maximized'],
16     ignoreDefaultArgs: ['--enable-automation']
17 }).then(async browser => {
18     //创建一个Page实例
19     const page = await browser.newPage();
20     //打开百度首页
21     await page.goto('https://www.baidu.com');
22     //定位输入框元素
23     const input_area = await page.$('#kw');
24     //在输入框元素中输入"hello world"
25     await input_area.type("hello world");
26     //定位搜索按钮元素
27     const search_btn = await page.$('#su');
28     //点击按钮元素
29     await search_btn.click();
30     //等待3s
31     await page.waitFor(3000);
32     //截图并在根目录保存
33     await page.screenshot({
34         path: 'baidu.png'
35     });
36     //关闭Chromium
37     await browser.close();
38 });