Puppeteer無頭瀏覽器：開啓自動化之門，掌握瀏覽器世界的無限可能詳情 - 前端,node.js,puppeteer,截圖凌覽博客

大概還是入門期，我曾用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的應用場景

模擬用户操作：Puppeteer可以模擬用户在瀏覽器中的各種操作，如點擊、輸入表單、頁面導航等。你可以通過編寫代碼來自動化執行這些操作，輕鬆模擬用户行為；
屏幕截圖和PDF生成：Puppeteer可以幫助你捕獲網頁的屏幕截圖或生成PDF文件；
網頁內容抓取：Puppeteer可以加載網頁並提取其中的文本、圖像、鏈接等內容；
表單自動填充和提交：Puppeteer可以模擬用户的交互操作，自動填寫表單字段並觸發提交操作；
性能監測和分析：Puppeteer可以幫助你評估網頁的性能指標，如加載時間、資源使用情況等。你可以使用這些工具來發現性能瓶頸、進行優化並監測改進效果；
網頁自動化測試：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能夠輕鬆應對各種開發任務。

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

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

凌覽博客

凌覽博客

博客 / 詳情