2019.4.10 初識puppeteer

時間 2019-11-17

標籤 2019.4.10 puppeteer 简体版

原文原文鏈接

注：原地址：https://www.cnblogs.com/paris-test/p/9705075.html

1、Puppeteer 介紹

Puppeteer 翻譯是操縱木偶的人，利用這個工具，咱們能作一個操縱頁面的人。Puppeteer是一個Nodejs的庫，支持調用Chrome的API來操縱Web，相比較Selenium或是PhantomJs,它最大的特色就是它的操做Dom能夠徹底在內存中進行模擬既在V8引擎中處理而不打開瀏覽器，並且關鍵是這個是Chrome團隊在維護，會擁有更好的兼容性和前景。html

`2、Puppeteer` 用處

利用網頁生成PDF、圖片
爬取SPA應用，並生成預渲染內容（即「SSR」服務端渲染）
能夠從網站抓取內容
自動化表單提交、UI測試、鍵盤輸入等
幫你建立一個最新的自動化測試環境（chrome），能夠直接在此運行測試用例6.捕獲站點的時間線，以便追蹤你的網站，幫助分析網站性能問題

3、puppeteer環境準備

一、Puppeteer環境要求

1.一、Puppeteer要求node版本不低於v6.4.0，可是async/await只在Node v7.6.0或更高的版本支持。node

1.二、須要最近版本的Chromium瀏覽器chrome

二、Puppeteer環境準備

1.Node.js 安裝配置shell

2.Puppeteer安裝npm

經過npm安裝：npm install puppeteer --saveapi

因爲封網，直接下載 Chromium 會失敗，能夠先阻止下載 Chromium 而後再手動下載它瀏覽器

手動下載 Chromium，下載完後將壓縮包解壓，會有個 ，將其放在你喜歡的目錄下，例如 。正常安裝包後  會在 中

# 安裝命令 npm i puppeteer --save # 錯誤信息 ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download. # 設置環境變量跳過下載 Chromium set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 # 或者能夠這樣幹，只下載模塊而不build npm i --save puppeteer --ignore-scripts # 成功安裝模塊 + puppeteer@0.13.0 added 1 package in 1.77s

Chromium.app/Users/huqiyang/Documents/project/z/chromium/Chromium.appChromium.app.local-chromium

Tip：下載 Chromium 失敗解決辦法app

更換國內Chromium源

PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org npm i puppeteer

或者用 cnpm 安裝

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

二、jest環境

安裝 Jest：npm install --save-dev jestless

4、puppeteer自動化初試

初試 `Puppeteer`，截個圖吧

知識點async

puppeteer.launch 啓動瀏覽器實例
browser.newPage() 建立一個新頁面
page.goto 進入指定網頁
page.screenshot 截圖

 
          const  
          puppeteer = require( 
          'puppeteer' 
          ); 
         
          (async () => { 
         
          const  
          browser = await (puppeteer.launch({ 
         
          // 如果手動下載的chromium須要指定chromium地址, 默認引用地址爲 /項目目錄/node_modules/puppeteer/.local-chromium/ 
         
          executablePath:  
          '/Users/huqiyang/Documents/project/z/chromium/Chromium.app/Contents/MacOS/Chromium' 
          , 
         
          //設置超時時間 
         
          timeout: 15000, 
         
          //若是是訪問https頁面 此屬性會忽略https錯誤 
         
          ignoreHTTPSErrors:  
          true 
          , 
         
          // 打開開發者工具, 當此值爲true時, headless總爲false 
         
          devtools:  
          false 
          , 
         
          // 關閉headless模式, 不會打開瀏覽器 
         
          headless:  
          false 
         
          })); 
         
          const  
          page = await browser.newPage(); 
         
          await page. 
          goto 
          ( 
          'https://www.jianshu.com/u/40909ea33e50' 
          ); 
         
          await page.screenshot({ 
         
          path:  
          'jianshu.png' 
          , 
         
          type:  
          'png' 
          , 
         
          // quality: 100, 只對jpg有效 
         
          fullPage:  
          true 
          , 
         
          // 指定區域截圖，clip和fullPage二者只能設置一個 
         
          // clip: { 
         
          //   x: 0, 
         
          //   y: 0, 
         
          //   width: 1000, 
         
          //   height: 40 
         
          // } 
         
          }); 
         
          browser.close(); 
         
          })();