概述

前面章节我们从场景出发，初步了解利用Puppeteer可以解决我们实际哪些问题。后续我们将分两个大的部分来介绍Puppeteer技术。

• 第一个部分介绍Puppeteer基本的使用技术，重点就是如何使用page对象，对实际的网页进行操作等。
• 第二个部分我们将介绍一个实际的工具，基于可视化方式完成puppeteer脚本的生成。我们将从零开始介绍如何实现这样的小工具。

基本概念

我们可以简单看下官网（https://zhaoqize.github.io/puppeteer-api-zh_CN/#/）提供的资料，Puppeteer提供几个关键概念，可以直观从字面上就可以理解的：

• browser：对应浏览器对象。

当 Puppeteer 连接到一个 Chrome 实例的时候就会创建一个 Browser 对象，有以下两种方式：

Puppeteer.launch 和 Puppeteer.connect.

我们在前面章节中已经看到使用launch方法就可以在本地进程中实例化一个Chrome浏览器，Puppeteer会自动建立与这个实例的连接，并生成Browser对象。同样，我们可以不希望在本地进程中启动浏览器，而是希望连接单独启动的浏览器或远程启动的浏览器，则我们可以使用connect来建立连接，连接成功后也会生成一个browser对象。

const puppeteer = require('puppeteer');

let browser = await puppeteer.launch()

如果我们希望使用connect连接已有的浏览器，则需要在启动浏览器时开启连接端口：

chrome.exe  --remote-debugging-port=9222

这个浏览器启动后，我们需要获取其websocket连接信息，可以在浏览器地址中输入如下地址来获取：

http://localhost:9222/json/version 

使用如下的命令我们就可以获得browser对象

const browser = await puppeteer.connect({
    browserWSEndpoint: webSocketDebuggerUrl
});

• page：对应我们打开的一个网页。

显然，一个浏览器对象，可以包含多个page对象。

我们可以简单地使用如下的代码，来生成page对象

const puppeteer = require('puppeteer');

let browser = await puppeteer.launch()
let page = await browser.newPage();//生成一个空白page
await page.goto('https://www.163.com');//加载一个网页
await page.screenshot({path: 'screenshot.png'});//把当前的网页可视区域导出成图片
await browser.close();//关闭浏览器对象

• keyboard：键盘对象

每一个页面对象都有一个键盘对象。通过键盘对象，我们可以模拟出键盘的操作：

await page.keyboard.type('Hello World!');
await page.keyboard.press('ArrowLeft');

await page.keyboard.down('Shift');
for (let i = 0; i < ' World'.length; i++)
  await page.keyboard.press('ArrowLeft');
await page.keyboard.up('Shift');

await page.keyboard.press('Backspace');
// 结果字符串最终为 'Hello!'

上述代码直观上是比较容易理解的。

• mouse：鼠标对象

同样，一个页面对象也拥有一个mouse对象，通过这个对象我们可以模拟鼠标的各种操作。

// 使用 ‘page.mouse’ 追踪 100x100 的矩形。
await page.mouse.move(0, 0);
await page.mouse.down();
await page.mouse.move(0, 100);
await page.mouse.move(100, 100);
await page.mouse.move(100, 0);
await page.mouse.move(0, 0);
await page.mouse.up();

• frame对象

frame对象可以看做是page访问一个网页后形成的对象。这个说法也不准确。一个page对象会包含一个主Frame，如页面包含iframe标签，将会产生childFrame。其生命周期由三个事件控制：

1. frameattached
2. framenavigated
3. framedetached

我们通过下面的例子来看看mainFrame和childFrame具体内容：

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.goto('http://www.163.com');
  page.frames().map(f=>{
  	console.log(f)
  })
  await browser.close();

});

一个复杂的例子

自动登录

自动登录在很多应用场景中都是必须的一个环节。从人工操作视角看，登录需要做如下几个事情：

访问登录页面

输入用户名称

输入用户密码

点击登录按钮

对于需要验证码的情况，需要某种破解技术，我们在此不考虑。

const puppeteer = require('puppeteer');
let myUserName="XXX"
let myPassword="XXX"
(async ()=>{

        let browser = await puppeteer.launch({headless: false});//打开有界面的浏览器
        let page = await browser.newPage()
        await page.goto('https://juejin.cn')
        await page.waitFor(1000)

        var login = await page.$('.login-button')
        await login.click()
        var login1 = await page.$('div[class=prompt-box]>span[class=clickable]')
        await login1.click()
        await page.waitFor(1000)
        var loginPhoneOrEmail = await page.$("input[name=loginPhoneOrEmail]")
        //console.log('loginPhoneOrEmail:', loginPhoneOrEmail);
        await loginPhoneOrEmail.click()
        await loginPhoneOrEmail.type(myUsername, {delay: 20})

        var password = await page.$('[placeholder=请输入密码]')
        //console.log('password:', password);
        await password.click()
        await password.type(myPassword, {delay: 20})

        var authLogin = await page.$('button[class=btn]')
        console.log('authLogin:', authLogin);
        await authLogin.click()

})()

有几个地方需要说明：

1. 在启动浏览器时，我们增加一个参数headless: false，目的是让Puppeteer启动一个可视的浏览器，便于我们看到自动化操作过程
2. 我们在几个地方专门调用await page.waitFor(1000)，目的是让浏览器完成相关加载
3. page.$()函数是一个查询选择器，返回第一个满足查询条件的element
4. 这个element对象是ElementHandle类型对象，ElementHandle可以看做就是DOM对象，我们获得这个对象后，可以调用其方法click、type等。click就是点击事件，type就是输入。

当我们看到界面上出现滑窗验证码时，表明我们上述代码正确执行了。