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 });
原文地址:https://www.cnblogs.com/wuweiblogs/p/12913193.html