Puppeteer 学习笔记及基本用法

Puppeteer 安装

• 安装第三方库：puppeteer

  npm i puppeteer
  

• 安装谷歌 Chromium：若 npm 安装失败，需要手动下载 chromium 并解压至相应文件夹

语法

基本语法

API 分层结构

• Browser： 对应一个浏览器实例，一个 Browser 可以包含多个 BrowserContext
• BrowserContext： 对应浏览器一个上下文会话，就像我们打开一个普通的 Chrome 之后又打开一个隐身模式的浏览器一样，BrowserContext 具有独立的 Session(cookie 和 cache 独立不共享)，一个 BrowserContext 可以包含多个 Page
• Page：表示一个 Tab 页面，通过 browserContext.newPage()/browser.newPage() 创建，browser.newPage() 创建页面时会使用默认的 BrowserContext，一个 Page 可以包含多个 Frame
• Frame: 一个框架，每个页面有一个主框架（page.MainFrame()）,也可以多个子框架，主要由 iframe 标签创建产生的
• ExecutionContext： 是 javascript 的执行环境，每一个 Frame 都一个默认的 javascript 执行环境
• ElementHandle: 对应 DOM 的一个元素节点，通过该该实例可以实现对元素的点击，填写表单等行为，我们可以通过选择器，xPath 等来获取对应的元素
• JsHandle：对应 DOM 中的 javascript 对象，ElementHandle 继承于 JsHandle，由于我们无法直接操作 DOM 中对象，所以封装成 JsHandle 来实现相关功能
• CDPSession：可以直接与原生的 CDP 进行通信，通过 session.send 函数直接发消息，通过 session.on 接收消息，可以实现 Puppeteer API 中没有涉及的功能
• Coverage：获取 JavaScript 和 CSS 代码覆盖率
• Tracing：抓取性能数据进行分析
• Response： 页面收到的响应
• Request： 页面发出的请求

const puppeteer = require('puppeteer');

(async () => {
   
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.baidu.com');
    await page.close();
    await browser.close();
})();

puppeteer 提供了两种方法用于创建一个 Browser 实例：

• puppeteer.connect ：连接一个已经存在的 Chrome 实例
• puppeteer.launch ： 每次都启动一个 Chrome 实例

puppeteer.launch() 的参数解释：其使用字典进行配置输入

• headless： 是否使用浏览器界面启动，turn 和 false
  • 默认为 turn 无头浏览器，不展示浏览器页面
  • 设置 false 参数，展示浏览器页面
• **executablePath：**指定浏览器执行地址
• timeout： 等待浏览器实例启动的最长时间（以毫秒为单位）。默认为30000（30秒）。设置为 0 禁用超时
• slowMo： 放慢浏览器执行速度，方便测试观察
• args： 传递给浏览器实例的其余参数
  • 例如：窗口最大化：['--start-maximized']
• ignoreHTTPSErrors：false 表示忽略 https 报错

加载导航页面

• page.goto： 打开新页面

• page.goBack ： 回退到上一个页面

• page.goForward ： 前进到下一个页面

• page.reload： 重新加载页面

• page.waitForNavigation： 等待页面跳转

 Pupeeteer 中的基本上所有的操作都是异步的，以上几个 API 都涉及到关于打开一个页面，什么情况下才能判断这个函数执行完毕呢，这些函数都提供了两个参数 waitUtil 和 timeout ， waitUtil 表示直到什么出现就算执行完毕，timeout 表示如果超过这个时间还没有结束就抛出异常。

等待元素、请求、响应

• page.waitForXPath： 等待 XPath 对应的元素出现，返回对应的 ElementHandle 实例

• page.waitForSelector ： 等待选择器对应的元素出现，返回对应的 ElementHandle 实例

• page.waitForResponse ： 等待某个响应结束，返回 Response 实例

• page.waitForRequest： 等待某个请求出现，返回 Request 实例

自定义等待

• page.waitForFunction： 等待在页面中自定义函数的执行结果，返回 JsHandle 实例
• page.waitFor： 设置等待时间，实在没办法的做法

元素定位

• page.$('#uniqueId')： 获取某个选择器对应的第一个元素
• page.$$('div')： 获取某个选择器对应的所有元素
• page.$x('//img')： 获取某个 XPath 对应的所有元素
• page.waitForXPath('//img')： 等待某个 XPath 对应的元素出现
• page.waitForSelector('#uniqueId')： 等待某个选择器对应的元素出现

用户模拟操作

• elementHandle.click()： 点击某个元素
• elementHandle.tap()： 模拟手指触摸点击
• elementHandle.focus()： 聚焦到某个元素
• elementHandle.hover()： 鼠标 hover 到某个元素上
• elementHandle.type('hello')： 在输入框输入文本

请求拦截

我们可以在监听 Page 的 request 事件，并进行请求拦截，前提是要开启请求拦截 page.setRequestInterception(true)

(async () =>