Puppeteer無頭瀏覽器：開啟自動化之門，掌握瀏覽器世界的無限可能

發表於2023-09-21
瀏覽器

大概還是入門期，我曾用Puppeteer做爬蟲工具以此來繞過某網站的防爬機制。近期有需求要做任意連結網頁截圖，像這種場景非常適合用Puppeteer完成。無頭瀏覽器我已知的還有Selenium。

完成截圖需求踩的最大的坑不是具體的邏輯程式碼，而是Docker部署Puppeteer到伺服器總是缺少某個包。踩坑過程我想另外寫一篇文章分享，所以這篇就單純給讀者介紹Puppeteer無頭瀏覽器。

什麼是Puppeteer？

Puppeteer是由Google開發和維護的一款強大的Node.js庫，它為開發人員提供了高階API，以程式設計方式操控Chromium瀏覽器。與傳統的瀏覽器自動化工具相比，Puppeteer的獨特之處在於它可以執行無頭瀏覽器，即在沒有UI介面的情況下執行瀏覽器例項。這意味著你可以在後臺執行瀏覽器，執行各種任務，而無需手動操作瀏覽器介面。

Puppeteer的背後是Chromium瀏覽器，這是一款開源的瀏覽器專案，也是Google Chrome瀏覽器的基礎。因此，Puppeteer具備了與Chrome相同的功能和相容性。

Puppeteer的設計目標是為開發者提供一種簡單而直觀的方式來自動化瀏覽器操作。它提供了豐富的API，可以輕鬆地進行頁面導航、元素查詢、表單填寫、資料提取等操作。你可以編寫指令碼來模擬使用者在瀏覽器中的操作，從而實現自動化測試、網頁截圖、資料爬取等任務。

此外，Puppeteer還支援無頭模式，這意味著瀏覽器在後臺執行，不會顯示介面。這使得Puppeteer非常適合在伺服器環境中執行，例如自動化測試的CI/CD流水線、資料探勘和網路爬蟲等場景。

Puppeteer的應用場景

  1. 模擬使用者操作：Puppeteer可以模擬使用者在瀏覽器中的各種操作，如點選、輸入表單、頁面導航等。你可以透過編寫程式碼來自動化執行這些操作，輕鬆模擬使用者行為；
  2. 螢幕截圖和PDF生成：Puppeteer可以幫助你捕獲網頁的螢幕截圖或生成PDF檔案；
  3. 網頁內容抓取：Puppeteer可以載入網頁並提取其中的文字、影像、連結等內容；
  4. 表單自動填充和提交：Puppeteer可以模擬使用者的互動操作，自動填寫表單欄位並觸發提交操作；
  5. 效能監測和分析：Puppeteer可以幫助你評估網頁的效能指標，如載入時間、資源使用情況等。你可以使用這些工具來發現效能瓶頸、進行最佳化並監測改進效果；
  6. 網頁自動化測試：Puppeteer可以模擬使用者的操作並與網頁進行互動，你可以編寫測試指令碼，讓Puppeteer自動載入網頁、執行操作，並驗證網頁的行為和結果是否符合預期。

以上是Puppeteer的一些常見的應用場景，由於其強大的功能和靈活性，你可以使用Puppeteer完成各種與網頁操作和自動化相關的任務。

Puppeteer的安裝

首先，node -v檢查本地Node.js版本，官方要求版本在14以上。不滿足要求的同學參考Node.js版本管理工具，我選擇n 選擇合適的工具切換Node.js版本。

然後要有心理準備，當我們npm i puppeteer安裝Puppeteer時，它會順帶將Chromium瀏覽器安裝。Chromium瀏覽器幾百MB，下載相對慢，而且經常性出錯下載失敗。如果失敗，嘗試執行些命令再次下載：

node node_modules/puppeteer/install.js

下載前，建議將切換npm倉庫源至國內：

npm config set registry https://registry.npm.taobao.org

Puppeteer的使用

不考慮複雜的網頁，簡單實現的截圖：

const puppeteer = require('puppeteer');
const path = require('path');
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url, { waitUntil: "domcontentloaded" });
await page.setViewport({ width: 1280, height: 720 });
await page.screenshot({
    path: path.resolve(__dirname, `./${Date.now()}.png`),
    type: 'png',
    fullPage: true
})
await browser.close()

幾行程式碼，基本就能實現截圖，當然沒有考慮網頁圖片等非同步載入的資源情況。執行它就能得到一張截圖。

如果執行報錯：Could not find Chrome (ver. 116.0.5845.96). This can occur if either說明Chromium沒有安裝。執行上述安裝命令node node_modules/puppeteer/install.js

總結

Puppeteer是一款無頭瀏覽器工具，它為開發者們提供了一種強大而靈活的方式來控制瀏覽器。透過模擬使用者行為、擷取螢幕截圖、攔截網路請求和進行自動化測試，Puppeteer能夠輕鬆應對各種開發任務。

如果我的文章對你有幫助，您的?就是對我的最大支援^_^。

歡迎圍觀朋友圈、加我微信拉您加入人類高質量前端交流群

相關文章