什么是無頭瀏覽器——Headless Browser？

在如今的數(shù)字世界中，無頭瀏覽器已經(jīng)成為開發(fā)人員和測試人員不可或缺的工具。無頭瀏覽器指的是一系列無界面的瀏覽器，這種瀏覽器能夠以編程方式與網(wǎng)頁進(jìn)行交互，可以減少甚至替代手動處理任務(wù)。 

無頭瀏覽器的應(yīng)用場景有哪些？

(1) 數(shù)據(jù)提取

無頭瀏覽器擅長網(wǎng)頁內(nèi)容抓取，能夠在沒有界面的環(huán)境下，導(dǎo)航網(wǎng)頁、解析HTML和檢索數(shù)據(jù)，從而有效地從網(wǎng)站中提取信息。

(2) 自動化測試

無頭瀏覽器在自動化測試領(lǐng)域可以扮演關(guān)鍵角色。它們可以在無人工干預(yù)的情況下在Web應(yīng)用程序上執(zhí)行測試腳本，實現(xiàn)對Web的功能和性能測試。這種方式加速了測試過程，保證了最終產(chǎn)品質(zhì)量。

(3) 性能指標(biāo)優(yōu)化

無頭瀏覽器對于性能監(jiān)控也很有價值。它們可以測量網(wǎng)頁加載時間、執(zhí)行速度等關(guān)鍵指標(biāo)，從而深入了解網(wǎng)站的效率。這些基準(zhǔn)測試有助于識別瓶頸，提高用戶體驗。

(4) 創(chuàng)建網(wǎng)頁快照

無頭瀏覽器可以在任意時間以編程方式生成網(wǎng)頁截圖，用于幫助編制文檔、調(diào)試和驗證UI。

(5) 模擬用戶行為

實現(xiàn)用戶交互自動化是無頭瀏覽器最強(qiáng)大的功能之一。它們可以模擬點(diǎn)擊、表單提交和其他Web操作。通過模仿真實的用戶行為，對于測試復(fù)雜的工作流程以及確保流暢的用戶體驗至關(guān)重要。

下面重點(diǎn)推薦幾個比較優(yōu)秀的開源免費(fèi)的無頭瀏覽器，開發(fā)人員可以根據(jù)需要選型。

1.Puppeteer

https://github.com/puppeteer/puppeteer

GitHub Star： 88K

開發(fā)語言：Node/TypeScript/JavaScript

Puppeteer是一個開源的Node.js庫，它通過DevTools協(xié)議實現(xiàn)了一些API來控制Chrome或Chromium。它可以實現(xiàn)瀏覽器任務(wù)的自動化，例如：Web抓取、自動測試和性能監(jiān)控等。

Puppeteer支持無頭模式，允許它在沒有圖形界面的情況下運(yùn)行，并提供生成屏幕截圖或者PDF，可以模擬用戶交互和捕獲性能指標(biāo)等。它因其功能強(qiáng)大且易于與Web項目集成而被廣泛使用。

安裝：

npm i puppeteer

使用：

import puppeteer from 'puppeteer';

(async () => {
  // Launch the browser and open a new blank page
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Navigate the page to a URL
  await page.goto('https://developer.chrome.com/');

  // Set screen size
  await page.setViewport({width: 1080, height: 1024});

  // Type into search box
  await page.type('.devsite-search-field', 'automate beyond recorder');

  // Wait and click on first result
  const searchResultSelector = '.devsite-result-item-link';
  await page.waitForSelector(searchResultSelector);
  await page.click(searchResultSelector);

  // Locate the full title with a unique string
  const textSelector = await page.waitForSelector(
    'text/Customize and automate'
);
  const fullTitle = await textSelector?.evaluate(el => el.textContent);

  // Print the full title
  console.log('The title of this blog post is "%s".', fullTitle);

  await browser.close();
})();

2.Selenium WebDriver

https://github.com/SeleniumHQ/selenium

GitHub Star：30K

開發(fā)語言：支持Java、Python、Javascript、Ruby、.Net、C++、Rust...

Selenium是一個封裝了各種工具和庫的瀏覽器自動化框架和生態(tài)系統(tǒng)。用于實現(xiàn)Web瀏覽器自動化。Selenium專門根據(jù)W3C WebDriver規(guī)范提供了一個能夠與所有主要Web瀏覽器兼容，并且支持跨語言的編碼接口。

3.Playwright

https://github.com/microsoft/playwright-python

GitHub Star：11.4K+

開發(fā)語言：Python

Playwright是一個用于實現(xiàn)Web瀏覽器自動化的Python庫。支持端到端測試，提供強(qiáng)大的功能，支持多瀏覽器，包括：Chromium、Firefox和WebKit。

Playwright可以實現(xiàn)Web爬蟲、自動化表單提交和UI測試等任務(wù)，提供了用戶交互行為模擬和屏幕截圖等工具。提供了強(qiáng)大的API，能夠有效地支持各種Web應(yīng)用程序測試需求。

安裝python依賴：

pip install pytest-playwright playwright

Demo：

import re
from playwright.sync_api import Page, expect

def test_has_title(page: Page):
    page.goto("https://playwright.dev/")

    # Expect a title "to contain" a substring.
    expect(page).to_have_title(re.compile("Playwright"))

def test_get_started_link(page: Page):
    page.goto("https://playwright.dev/")

    # Click the get started link.
    page.get_by_role("link", name="Get started").click()

    # Expects page to have a heading with the name of Installation.
    expect(page.get_by_role("heading", name="Installation")).to_be_visible()

4.Chromedp

https://github.com/chromedp/chromedp

GitHub Star：10.8K+

開發(fā)語言：Golang

Chromedp是一個可以快速驅(qū)動Chrome DevTools協(xié)議的瀏覽器的Golang庫。無需外部依賴。

可以查看Golang 的各種應(yīng)用案例：

https://github.com/chromedp/examples

5.Headless Chrome Crawler

https://github.com/yujiosaka/headless-chrome-crawler

GitHub Star：5.5K

開發(fā)語言：JavaScript

這項目提供了一個由無頭Chrome驅(qū)動的分布式爬蟲功能。

項目主要特征包括：

• 支持分布式爬行
• 可配置并發(fā)、延遲和重試
• 同時支持深度優(yōu)先搜索和廣度優(yōu)先搜索算法
• 支持Redis緩存
• 支持CSV和JSON導(dǎo)出結(jié)果
• 達(dá)到最大請求時暫停，并隨時恢復(fù)
• 自動插入jQuery進(jìn)行抓取
• 保存截圖作為抓取證據(jù)
• 模擬設(shè)備和用戶代理
• 根據(jù)優(yōu)先級隊列提高爬行效率
• 服從 robots.txt 

6.Splash

https://github.com/scrapinghub/splash

GitHub Star：4.1K

開發(fā)語言：Python

Splash是一個支持JavaScript渲染的HTTP API服務(wù)。是一個輕量級的瀏覽器，具有HTTP API，在Python 3中使用Twisted和QT5實現(xiàn)。

得益于它的快速、輕量級和無狀態(tài)等特性，使其易于使用和推廣。

7.Splinter

https://github.com/cobrateam/splinter

GitHub Star：2.7K

開發(fā)語言：Python

Splinter是一個基于Python的Web應(yīng)用程序測試工具，可用于Web應(yīng)用程序自動化，提供了簡單且一致的API。

它可以自動執(zhí)行瀏覽器操作，例如：導(dǎo)航到URL、填寫表格以及與頁面元素交互。Splinter支持各種Web驅(qū)動程序，包括Selenium WebDriver、Google Chrome和Firefox等。

它提供了非常友好的API來控制瀏覽器，簡化了自動化測試過程的開發(fā)，使其成為Web應(yīng)用程序的開發(fā)人員和測試人員的寶貴工具。

主要特點(diǎn)包括：

• 易于學(xué)習(xí)：API的設(shè)計是直觀和快速拿起。
• 更快的編碼：快速且可靠地與瀏覽器自動交互，而無需與工具發(fā)生沖突。
• 強(qiáng)大：專為真實的世界用例而設(shè)計，可防止常見的自動化怪癖。
• 靈活：對較低級別工具的訪問從不隱藏。
• 強(qiáng)大：支持多個自動化驅(qū)動程序（Selenium，Django，F(xiàn)lask，ZopeTestBrowser）。

8.Serverless-chrome

https://github.com/adieuadieu/serverless-chrome

Github Star：2.9K

開發(fā)語言：JavaScript

這是一個無服務(wù)器Chrome 。這個項目的目的主要是為在無服務(wù)器函數(shù)調(diào)用期間使用Headless Chrome提供框架。Serverless-chrome負(fù)責(zé)構(gòu)建和捆綁Chrome二進(jìn)制文件，并確保在執(zhí)行無服務(wù)器函數(shù)時Chrome正在運(yùn)行。此外，該項目還提供了一些常見模式的服務(wù)，例如：對頁面進(jìn)行屏幕截圖、打印到PDF、頁面抓取等。

9.Ferrum

https://github.com/rubycdp/ferrum

GitHub Star：1.7K

開發(fā)語言：Ruby

Ferrum是一個用于實現(xiàn)Chrome自動化的Ruby庫。它提供了一種控制瀏覽器的方法，而不需要像Selenium這樣的驅(qū)動程序。Ferrum可以處理諸如瀏覽網(wǎng)頁、與元素交互以及捕獲屏幕截圖等任務(wù)。

它對于Web抓取、自動化測試和模擬用戶交互非常有用。Ferrum支持在無頭和非無頭模式下運(yùn)行，使其能夠滿足各種自動化需求。

10.Surf

https://github.com/headzoo/surf

GitHub Star：1.5K

Surf是一個Golang庫，Surf不僅僅是一個Web內(nèi)容提取的Go解決方案，還實現(xiàn)了一個可以用于編程控制的虛擬Web瀏覽器。

Surf被設(shè)計成像Web瀏覽器一樣，功能包括：cookie管理、歷史記錄、書簽、用戶代理、表單提交、通過jQuery樣式的CSS選擇器選擇和遍歷DOM、抓取圖像、樣式表等。安裝：

go get gopkg.in/headzoo/surf.v1

Demo：

package main

import (
  "gopkg.in/headzoo/surf.v1"
  "fmt"
)

func main() {
  bow := surf.NewBrowser()
  err := bow.Open("http://golang.org")
  if err != nil {
    panic(err)
  }

  // Outputs: "The Go Programming Language"
  fmt.Println(bow.Title())
}