在數位世界的深處，隱藏著一種不為普通人所知的瀏覽器形態—— 無頭瀏覽器 。對於大多數使用者而言，瀏覽器的存在就是為了瀏覽網頁、獲取資訊，而對於開發者來說，瀏覽器則是他們手中的魔法工具，可以用來測試程式碼、抓取數據，甚至控制網頁。那麽，無頭瀏覽器究竟是什麽？它又是如何滿足開發者的需求呢？本文就來一起探索這個看似神秘的瀏覽器。
無頭瀏覽器是什麽？
無頭瀏覽器是一種沒有圖形化使用者介面（GUI）的網路瀏覽器。它可以在背景執行，並透過 編程介面 進行控制和操作，而不需要顯示界面。通常，傳統的瀏覽器如 Chrome、Firefox 和 Safari 都具有圖形化使用者介面，但這些瀏覽器也提供了無頭模式的選項。
無頭瀏覽器提供了對瀏覽器引擎的完全控制，可以執行網頁的載入、渲染和互動操作，並提供了對 DOM 的存取和操作。透過編程介面，開發人員可以使用無頭瀏覽器來模擬使用者行為，填寫表單、點選按鈕、觸發事件等，以便進行自動化測試或數據采集等。
無頭瀏覽器的優勢在於它可以在背景執行，無需顯示瀏覽器視窗，這樣可以節省系統資源，並且可以在伺服器上進行批次處理和並行操作。常見的無頭瀏覽器包括 Puppeteer、Selenium WebDriver（使用Headless模式）、PhantomJS 等。其中：
PhantomJS，又被稱為「無頭瀏覽器之父」，已經停止維護。
Puppeteer 是 Google Chrome 團隊開發的一款 Node 庫，它提供了一個高級API，用於透過 Node.js控制Chrome或Chromium。Puppeteer 提供了很多有用的功能，如開啟頁面、生成PDF、等待頁面載入、處理 JavaScript 異步操作等。
雖然無頭瀏覽器具有許多優勢，但也有一些限制需要註意：
使用者互動模擬有限 ：由於無頭瀏覽器不渲染圖形界面，它們可能無法完全模擬使用者的滑鼠移動、捲動或復雜的觸摸手勢等互動。這可能會導致在測試依賴這些互動的網頁應用程式的某些方面時出現困難。
瀏覽器特定行為 ：無頭瀏覽器可能無法完全模仿您要測試的目標瀏覽器的特定行為。這可能導致誤報或漏報，並且可能需要在實際瀏覽器中進行額外的測試以確保相容性。
響應式設計測試不足 ：在測試響應式網頁設計時，無頭瀏覽器可能無法準確模擬不同裝置或螢幕尺寸的行為。因此，仍然需要在真實裝置上測試套用，以確保在各個平台上提供一致的使用者體驗。
驗證碼和機器人保護挑戰 ：許多網站使用驗證碼或其他機器人保護機制來防止機器人或爬蟲的自動存取。無頭瀏覽器可能難以繞過這些保護措施，使得執行某些任務（如網頁抓取）變得困難。
到這裏，相信你對無頭瀏覽器已經有了一定的了解，下面就來透過 Puppeteer 來看看無頭瀏覽器的使用案例吧。
Puppeteer 是什麽？
Puppeteer 是一個基於 Chrome DevTools 協定的 Node.js 庫，提供了對無頭 Chrome 或 Chrome 瀏覽器的控制。它廣泛套用於開發領域，以下是一些 Puppeteer 在開發中的套用場景的例資：
自動化測試 ：可以模擬使用者在瀏覽器中的行為，如點選按鈕、填寫表單、觸發事件等，因此在自動化測試中非常有用。
網頁截圖和PDF生成 ：可以載入網頁並生成截圖或PDF檔。這在需要生成頁面快照、生成報告或進行網頁內容的視覺化檢查時非常有用。
網頁爬蟲和數據采集 ：可以模擬使用者在瀏覽器中的行為，因此可以用於構建網路爬蟲和數據采集工具。
效能分析和最佳化 ：可以用於測量和分析網頁的效能指標，如載入時間、資源使用情況等。
UI互動測試 ：可以使用Puppeteer模擬使用者與網頁的互動，檢查UI元素的可見性、位置和樣式等，以確保頁面在不同場景下的正確顯示和互動。
Puppeteer API 可用於截取螢幕截圖、建立 PDF、導航頁面以及從頁面獲取資訊等。
Puppeteer 怎麽用？
下面來使用 Puppeteer 進行螢幕截圖、建立PDF、自動化操作。
首先，在終端中執行以下命令來安裝 puppeteer：
npm i puppeteer
螢幕截圖
接下來，建立一個 JavaScript 檔，將其命名為
puppeteer.js
，在其中添加以下程式碼：
const puppeteer =require('puppeteer');
(async()=>{
const browser =await puppeteer.launch();
const page =await browser.newPage();
await page.goto('https://www.yuque.com/cuggz');
await page.screenshot({path:'前端充電寶.png'});
browser.close();
})();
這段程式碼很簡單，大概流程如下：
引入Puppeteer庫 ：第一行引入了 Puppeteer
啟動瀏覽器 ：透過呼叫
puppeteer.launch()方法來啟動一個無頭瀏覽器例項。這將返回一個Browser物件，代表了一個瀏覽器例項。建立頁面 ：透過呼叫
browser.newPage()方法來建立一個新的頁面。這將返回一個Page物件，代表了一個網頁。開啟網頁 ：使用
page.goto()方法開啟指定的URL，瀏覽器將載入該網頁。截圖 ：使用
page.screenshot()方法對當前頁面進行截圖，並將截圖保存到指定的路徑。關閉瀏覽器 ：透過呼叫
browser.close()方法來關閉瀏覽器例項，釋放資源。
可以透過設定
fullPage: true
來實作全螢幕幕截圖：
await page.screenshot({path:'cuggz.png',fullPage:true})
這樣，螢幕截圖就完成了。
生成 PDF
接下來使用 Puppeteer 將頁面生成一個 PDF。先建立一個
puppeteerpdf.js
檔，在檔中添加以下程式碼：
const puppeteer =require('puppeteer');
(async()=>{
const browser =await puppeteer.launch();
const page =await browser.newPage();
await page.goto('https://www.yuque.com/cuggz',{waitUntil:'networkidle'});
await page.pdf({path:'前端充電寶.pdf',format:'A4'});
browser.close();
})();
這段程式碼和上面的例子差不多。這裏的
waitUntil: 'networkidle'
表示僅當網路活動保持「空閑」狀態至少達到 networkIdleTimeout 毫秒（預設為 1000 毫秒）時，才認為站點導航已完成，然後才會執行 PDF 生成操作。
自動化操作
下面來使用 Puppeteer 進行頁面導航、自動化表單送出和鍵盤輸入，並顯示表單送出結果。
const puppeteer =require('puppeteer');
(async()=>{
const browser =await puppeteer.launch();
const page =await browser.newPage();
await page.goto('https://google.com',{waitUntil:'networkidle'});
// 在搜尋欄中輸入查詢
await page.type('前端充電寶');
await page.click('input[type="submit"]');
// 等待結果顯示
await page.waitForSelector('h3 a');
// 從頁面中提取結果
const links =await page.evaluate(()=>{
const anchors =Array.from(document.querySelectorAll('h3 a'));
return anchors.map(anchor => anchor.textContent);
});
console.log(links.join('\n'));
browser.close();
})();
這裏使用
page.type()
函式定義要鍵入的查詢，並使用
page.click()
函式模擬單擊。
page.waitForSelector()
函式用於等待選擇器檢查是否載入了所需的內容。
page.evaluate()
函式允許在頁面上下文中執行指令碼。上面的函式從 Google 搜尋結果中獲取所有連結並將它們儲存在一個陣列中。
