[Puppeteer]3分钟入门Puppeteer

什么是Puppeteer

Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行，但是可以通过修改配置文件运行“有头”模式

能做什么

• 截图，生成PDF
• 自动化登录签到，给ido打榜
• 做爬虫，爬取页面信息
• 做端到端自动化测试
• 做性能测试，使用timeline trace

优缺点

优点

• Puppeteer可以使用Chrome性能分析工具测时间，做性能测试
• Puppeteer更多对Chrome浏览器的控制
• Puppeteer减轻对测试外部驱动程序的依赖
• Puppeteer可以更改无头有头模式，监控测试情况

缺点

1. 只能用chrome
2. 目前仅仅支持JS 语言 ，Selenium支持多种语言
3. 社区比Selenium小

怎么使用

安装

1. 安装NodeJs，官网下载安装
   需要支持 async, await，Nodejs 的版本不能低于 v7.6.0

2. 安装puppeteer,安装的时候会自动下载chrominu

   npm i puppeteer //自动下载chrominu
   npm install puppeteer@2.1.1 //指定版本，试了下最新版老出错，用老的
   
   

知识点

大部分知识点，官网还有参考链接都有提到，我这里写的是我常用的几个。

1. puppeteer.launch 启动浏览器实例

   • 无头模式=》就是说只运行代码，不打开chrome浏览器

     const browser = await puppeteer.launch({headless: false}); // default is true
     

   2. 使用指定路径下的chrome，如果上面安装puppeteer时chrome下载失败，先设置环境变量跳过下载，然后自己下载chrome安装包，然后指定路径

      set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 
      

      npm install -g cnpm --registry=https://registry.npm.taobao.org
      

      const browser = await puppeteer.launch({executablePath: '/path/Chrome'});
      

   3. slowMo 指定时间减慢Puppeteer的操作

      const browser = await puppeteer.launch({
        headless:false,
        slowMo:250
      });
      

   4. timeout: 15000 设置超时时间
      等待 Chrome 实例启动的最长时间

   5. 可以debug用

         const browser = await puppeteer.launch({devtools: true});
      

2. browser.newPage() 创建一个 Page 实例，我按它理解成一个新的页面

3. browser.close() 关闭浏览器

4. page.goto 进入指定网页

5. page.screenshot 截图

6. page.evaluate(pageFunction, …args)

   page.evaluate(pageFunction, …args) 返回一个可序列化的普通对象，pageFunction 表示要在页面执行的函数， args 表示传入给 pageFunction 的参数， 下面的 pageFunction 和 args 表示同样的意思。

7. page.pdf({ path: ‘doc/baidu.pdf’ });
   此方法不支持有头模式,想用需要设置无头模式为true

Demo

示意图

代码

把打开百度，获取页面的宽高，然后截图

1. 创建一个js文件
2. 在当前目录安装puppeteer(npm install puppeteer@2.1.1)
3. 代码,直接执行node 1.js就好

   const puppeteer = require('puppeteer');
   (async () => {
       const browser = await puppeteer.launch({ headless: false, timeout: 15000 });
       const page = await browser.newPage();
       await page.goto('https://baidu.com');
   
       // PDF
       // await page.pdf({ path: 'doc/baidu.pdf' });
       // get width/height
       const dimensions = await page.evaluate(() => {
           return {
               width: document.documentElement.clientWidth,
               height: document.documentElement.clientHeight,
               deviceScaleFactor: window.devicePixelRatio
           };
       });
       console.log('Dimensions:', dimensions);
       // Screenshot
       await page.screenshot({ path: 'doc/baidu.png', clip: { x: 0, y: 0, width: dimensions.width, height: dimensions.height } });
   
       await browser.close();
   })();
   

4. 目录结构
   
5. 其他实战
   Puppeteer实现自动网赚?
   Puppeteer+Mocha+Chai实现端到端测试

本节代码地址

参考链接

https://zhaoqize.github.io/puppeteer-api-zh_CN/#/ （中文官方）
http://www.r9it.com/20171106/puppeteer.html
https://www.jianshu.com/p/aa2159356fbd （eval）
https://www.jianshu.com/p/223bf1e7e159 （firefox）
https://www.w3school.com.cn/cssref/css_selectors.asp (css)