puppeteer（一）環境搭建——新Web自動化工具（同selenium）

1、簡介

https://github.com/GoogleChrome/puppeteer

Puppeteer是一個Node庫，它提供了一個高級API來控制DevTools協議上的 Chrome或Chromium 。

Puppeteer 默認運行無頭，但能夠配置爲運行完整（非無頭）Chrome或Chromium。

我能作什麼？

您能夠在瀏覽器中手動執行的大多數操做均可以使用Puppeteer完成！如下是一些能夠幫助您入門的示例：

• 生成頁面的屏幕截圖和PDF。
• 抓取SPA（單頁面應用程序）並生成預渲染內容（即「SSR」（服務器端渲染））。
• 自動化表單提交，UI測試，鍵盤輸入等。
• 建立最新的自動化測試環境。使用最新的JavaScript和瀏覽器功能直接在最新版本的Chrome中運行測試。
• 捕獲站點的時間線跟蹤，以幫助診斷性能問題。
• 測試Chrome擴展程序。

適用範圍：

　　目前僅支持chrome瀏覽器，不支持其餘如IE、firefox等。

2、環境搭建

1)因爲是nodejs的一個庫，首先須要安裝nodejs.我下載的是最新的10.13.0，安裝一直下一步到最後。

https://nodejs.org/zh-cn/

 

 這裏安裝路徑選到D盤，D:\Program Files\nodejs

 安裝完畢在命令行輸入如下命令測試是否安裝成功，正確會出現版本號

npm -v

 

2）改變原有的環境變量

  (1)咱們要先配置npm的全局模塊的存放路徑以及cache的路徑，例如我但願將以上兩個文件夾放在NodeJS的主目錄下，便在NodeJs下創建"node_global"及"node_cache"兩個文件夾，輸入如下命令改變npm配置

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

 

3)在系統環境變量添加系統變量NODE_PATH

輸入路徑D:\Program Files\nodejs\node_global\node_modules，此後所安裝的模塊都會安裝到改路徑下  

 

4）安裝淘寶npm（cnpm）

   (1) 輸入如下命令

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

   (2)添加系統變量path的內容

　　由於cnpm會被安裝到D:\Program Files\nodejs\node_global下，而系統變量path並未包含該路徑。在系統變量path下添加該路徑便可正常使用cnpm。

   (3) 輸入cnpm -v輸入是否正常

cnpm -v

5）安裝puppeteer

 執行以下命令，安裝成功後會在D:\Program Files\nodejs\node_global\node_modules下看到puppeteer目錄。

cnpm i puppeteer -g

 

6）npm相關命令

npm安裝模塊
 【npm install xxx】利用 npm 安裝xxx模塊到當前命令行所在目錄；
 【npm install -g xxx】利用npm安裝全局模塊xxx；

本地安裝時將模塊寫入package.json中：
【npm install xxx】安裝但不寫入package.json；
【npm install xxx –save】 安裝並寫入package.json的」dependencies」中；
【npm install xxx –save-dev】安裝並寫入package.json的」devDependencies」中。

npm 刪除模塊
【npm uninstall xxx】刪除xxx模塊； 
【npm uninstall -g xxx】刪除全局模塊xxx；

已安裝模塊查看
npm ls -g --depth 0 //查看全局模塊  depth 0 深度爲0，能夠根據需求改變深度
npm ls  --depth 0   //查看當前命令所在目錄