puppeteer 完整教程常用api

喜欢ヅ旅行 2021-11-01 13:16 584阅读 0赞

## 目标 ##

将 常用api 与相关完整api链接推荐

## 链接推荐 ##

#### 1.puppeteer api ####

中文 https://zhaoqize.github.io/puppeteer-api-zh\_CN/  
内部开发api https://chromedevtools.github.io/devtools-protocol/tot/Page

#### 2.puppeteer 开源项目地址 ####

https://github.com/GoogleChrome/puppeteer

#### 3. xpath语法教程 ####

https://www.runoob.com/xpath/xpath-functions.html

#### 4. css语法 ####

https://www.runoob.com/cssref/css-selectors.html

#### 5. puppeteer教程相关代码 ####

https://gitee.com/hugo110/puppeteer-demo

## 个人常用api 与猿友常用api ##

#### ps: https://zhaoqize.github.io/puppeteer-api-zh\_CN/ 介绍的很全面，所以我就是提示一下常用的方法和大概解释+个人经验了 ####

### 1.Browser ###

<table> 
 <thead> 
  <tr> 
   <th>方法名称</th> 
   <th>方法说明</th> 
   <th>个人经验</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>browser.newPage()</td> 
   <td>创建一个 Page 实例</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>browser.close()</td> 
   <td>关闭浏览器</td> 
   <td>注意catch住异常关闭，避免浏览器进程没有关闭掉，耗费系统资源</td> 
  </tr> 
  <tr> 
   <td>browser.pages()</td> 
   <td>获取所有打开的 Page 实例</td> 
   <td>打开多个tab页处理时切换page特别有用</td> 
  </tr> 
 </tbody> 
</table>

### 2.page 常用 ###

<table> 
 <thead> 
  <tr> 
   <th>方法名称</th> 
   <th>方法说明</th> 
   <th>个人经验</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>puppeteer.launch</td> 
   <td>启动浏览器</td> 
   <td>调试时推荐slowMo，headless，devtools 这三个参数</td> 
  </tr> 
  <tr> 
   <td>page.goto(url)</td> 
   <td>打开指定网站</td> 
   <td>注意使用它的waitUntil参数，默认是load，有时会超时</td> 
  </tr> 
  <tr> 
   <td>page.screenshot</td> 
   <td>把当前页面截图</td> 
   <td>不但可以截图也可以截取元素的图片奥</td> 
  </tr> 
  <tr> 
   <td>Page.$(selector)</td> 
   <td>获取单个元素，底层是调用的是 document.querySelector()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>Page.$$(selector)</td> 
   <td>获取一组元素，底层调用的是 document.querySelectorAll()</td> 
   <td>注意返回的参数经过Array.form了，可能有些参数不能够使用</td> 
  </tr> 
  <tr> 
   <td>Page.$eval()</td> 
   <td>此方法在页面内执行 document.querySelector，然后把匹配到的元素作为第一个参数传给 pageFunction</td> 
   <td>是在在浏览器实例上下文中要执行的方法</td> 
  </tr> 
  <tr> 
   <td>page.$$eval(selector, pageFunction[, …args])</td> 
   <td>此方法在页面内执行 Array.from(document.querySelectorAll(selector))，然后把匹配到的元素数组作为第一个参数传给 pageFunction</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>page.click()</td> 
   <td>点击一个元素</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>Page.emulate</td> 
   <td>修改模拟器(客户端)运行配置，模拟设备，参数设备对象，比如 iPhone, Mac, Android 等</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

### 3.page waitFor 系列 API ###

很重要，所以拿出来单独列一下

<table> 
 <thead> 
  <tr> 
   <th>方法名称</th> 
   <th>方法说明</th> 
   <th>个人经验</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>page.waitFor</td> 
   <td>下面四个个的综合 API，不写就类似于java的Thread.sleep</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>page.waitForFunction(pageFunction[, options[, …args]])</td> 
   <td>等待 pageFunction 执行完成之后</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>page.waitForNavigation(options)</td> 
   <td>等待页面基本元素加载完之后，比如同步的 HTML, CSS, JS 等代码</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>page.waitForSelector(selector[, options])</td> 
   <td>css语法，等待某个选择器的元素加载之后，这个元素可以是异步加载的</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>page.waitForXPath(xpath[, options])</td> 
   <td>xpath语法，等待某个选择器的元素加载之后，这个元素可以是异步加载的</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

### 3.page 进阶 ###

<table> 
 <thead> 
  <tr> 
   <th>方法名称</th> 
   <th>方法说明</th> 
   <th>个人经验</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>page.evaluate(pageFunction, …args)</td> 
   <td>返回一个可序列化的普通对象，pageFunction 表示要在页面执行的函数， args 表示传入给 pageFunction 的参数， 下面的 pageFunction 和 args 表示同样的意思。</td> 
   <td>注意是在浏览器页面执行</td> 
  </tr> 
  <tr> 
   <td>Page.evaluateHandle(pageFunction, …args)</td> 
   <td>在 Page 上下文执行一个 pageFunction, 返回 JSHandle 实体</td> 
   <td>Page 上下文执行</td> 
  </tr> 
  <tr> 
   <td>page.evaluateOnNewDocument(pageFunction, …args),</td> 
   <td>在文档页面载入前调用 pageFunction, 如果页面中有 iframe 或者 frame, 则函数调用 的上下文环境将变成子页面的，即iframe 或者 frame, 由于是在页面加载前调用，这个函数一般是用来初始化 javascript 环境的，比如重置或者 初始化一些全局变量</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>Page.exposeFunction</td> 
   <td>此方法添加一个命名为 name 的方法到页面的 window 对象 当调用 name 方法时，在 node.js 中执行 puppeteerFunction，并且返回 Promise 对象，解析后返回 puppeteerFunction 的返回值</td> 
   <td>使用时会变成全局的，也可以引用你的类库</td> 
  </tr> 
 </tbody> 
</table>

## 参考博客 ##

1.Puppeteer 入门教程  
http://www.r9it.com/20171106/puppeteer.html  
2.puppeteer学习笔记（五）–API问题解决–使用功能强大的“ eval ”函数  
https://www.jianshu.com/p/aa2159356fbd  
3.puppeteer自动化测试系列之二—puppeteer常用方法  
https://www.cnblogs.com/paris-test/p/9707852.html  
4.puppeteer自动化测试系列之三—端对端测试中常用的 Puppeteer 操作  
https://www.cnblogs.com/paris-test/p/9711423.html  
5.puppeteer自动化测试系列之 五—常见问题  
https://www.cnblogs.com/paris-test/p/9713782.html