什麼是無頭瀏覽器

平時我們上網查閱資訊、觀看影片等活動，一般都是透過瀏覽器完成的，IE、chrome、火狐等都是我們經常使用的瀏覽器，它們都擁有非常好用的視覺化操作介面，配合滑鼠就可以進行網上活動。

而無頭瀏覽器也叫做無介面瀏覽器，它可以執行在伺服器端，也具有普通瀏覽器的能力，只是它沒有介面，

常見的框架有Puppeteer、Phantomjs等

無頭瀏覽器的特點

1、使用方式

我們以Phantomjs為例，既可以以cli方式使用，也可以在程式碼中require進去，它甚至可以提供一個類似於node那樣的REPL環境。

2、載入網路資源

既然是瀏覽器，載入網路資源顯然是其基本的能力，resourceReceived和resourceRequested這兩個回撥函式可以監控載入的資源，利用它們就可以做一些網路監控。既然能獲取網頁的內容，那麼就可以用來做爬蟲！

3、截圖

既然是無介面的，那如果我們想看載入的頁面是什麼樣子的，怎麼辦？它提供了截圖功能，使用render方法就可以生成頁面快照，還提供了設定網頁大小等功能。

4、插入外部資源

它可以向頁面中插入外部資源，比如插入一個js，這一點上比較像chrome外掛。

5、生成自定義網頁

它既能獲取人家的網頁，同時也能生成自己的網頁，設定content屬性就行。

6、提供document和window物件

在伺服器中是不存在document和window物件的，但是Phantomjs提供了這兩個變數。

7、操作頁面

既然Phantomjs提供了document和window這兩大物件，那麼我們就可以像在普通瀏覽器裡面一樣使用它們的方法，比如操作dom元素、傳送dom事件等。

8、測試

Phantomjs本身並不是測試框架，但是它可以配合jasmine等測試框架進行自動化測試。

無頭就是headless 的中文，所謂無頭瀏覽器就是沒有使用者介面的瀏覽器。

它可以執行在伺服器端，透過命令列的方式呼叫，比如需要擷取任意網站的截圖，網址由使用者輸入，那就需要在伺服器端裝一個headless瀏覽器，可以命令呼叫來截圖。

除了截圖，還能操作DOM，做一些爬蟲的事情，在伺服器端完成自動化操作。

常用的有三個：Selenium，PhantomJS，Chrome-headless 。

使用舉例：

/opt/google/chrome/chrome --headless --disable-gpu --screenshot http://baidu.com

這樣就實現了擷取百度這個網站的頁面。

更復雜的操作就要看手冊了

引言

如何知道你正在開發的網站的使用者介面(UI)是否正常工作，以及該網站作為一個整體是否提供了最佳的使用者體驗(UX)?無頭瀏覽器為您提供了一種快速、輕量級的方式來自動化高階操作，並瞭解您的站點在常見場景中的執行情況。

無頭瀏覽器基本知識

無頭瀏覽似乎是一個奇怪的術語，但它只是一個沒有可識別的圖形介面的瀏覽器或瀏覽器模擬的名稱。與使用熟悉的圖形元素測試站點或執行常見操作不同，用例是自動化的，並使用命令列介面進行測試。

無頭瀏覽器通常用於以下場景:

網站及應用測試

JavaScript庫測試

JavaScript模擬與互動

在後臺執行一個或多個自動化UI測試

這些操作可以幫助開發人員確認常見的網站活動是否順利進行，並能夠識別使用者介面和使用者體驗方面的潛在問題。

在當今高度個性化的web環境中，終端使用者的體驗是至關重要的，因此在釋出站點的公共版本之前，解決儘可能多的bug是至關重要的。

無頭測試的常用用例

你應該用無頭瀏覽器測試哪些用例?考慮使用者在任何給定頁面上可能採取的最頻繁的操作。使用者鍵入、單擊或以其他方式與頁面元素互動的每個點都是可能出錯的點，您最好在測試階段發現並修復問題，而不是在幾周甚至幾個月後發現故障，那時投訴就會蜂擁而至。

在一個無頭測試環境，你可以編寫和執行指令碼:

測試基本流程和可選流程

自動填寫和提交表格

測試SSL效能

嘗試不同的伺服器負載

獲取關於頁面響應時間的報告

獲取有用的網站程式碼

截圖檢視結果

測試這些用例為您提供了站點UI執行情況的可靠概述，併為您提供了在部署之前進行更改的基本資訊。

選擇一款無頭瀏覽器

今天的網站呈現了許多複雜的用例，開發人員在過去不需要考慮這些用例。

對使用者參與的更多關注創造了更多使用者可以互動的元素，特別是電子商務網站，可能需要複雜的多級流來進行適當的導航。

任何妨礙使用者順利體驗的問題都會破壞站點的成功。

在評估流行的無頭瀏覽器時，請記住這一點。

您需要一個輕量級的解決方案，它很少佔用資源，這樣您就可以在後臺執行它，而不會減慢開發工作，但是相同的解決方案必須允許您執行每一個必要的測試，以模擬目標使用者的預期操作。

並不是所有的無頭瀏覽器都適合相同的測試場景，所以您可能需要嘗試幾個不同的選項來找到適合您的開發需求的工具組合。

讓我們來看看這六個web開發人員的流行選擇。

Firefox無頭模式

隨著Firefox 56版本的釋出，Mozilla開始提供對無頭測試的支援。開發人員現在可以連線幾個不同的api來以headless模式執行Firefox，並測試各種用例，而不是使用其他工具來模擬瀏覽器環境。

無頭火狐的驅動可以是:

SeleniumSlimmerJSW3C WebDriver

許多開發人員似乎更喜歡將Selenium作為無頭Firefox測試和自動化的API，但是您可以使用最適合編寫指令碼和執行基本單元測試的選項。

考慮到使用者在現代網站上可以進行的所有潛在互動，使用Firefox headless深入到各個元素是開發過程中非常有用的一部分。雖然使用者可能會在複雜的流程中遇到問題，並在試圖識別和報告錯誤的過程中感到沮喪，但是您可以使用無頭模式的Firefox來解決每個人的問題。

Headless Chrome

熟悉Chrome的開發人員可以在headless模式下啟動59或更高版本，利用Chromium和Blink渲染引擎提供的所有可能性。這個輕量級的，節省記憶體的無頭瀏覽器給你的工具:

測試多級導航

收集頁面資訊

截圖

建立pdf文件

導航是現代網站環境中一個特別重要的部分，隨著移動使用者的不斷增加，導航變得越來越重要。嘗試無頭Chrome當你想要確保使用者可以很容易地移動整個網站。收集關於站點如何響應的報告和影象，並使用這些資訊進行更改以改進UI。

PhantomJS

複雜性在現代internet環境中很常見，而PhantomJS的構建就是為了使用基本的命令列測試來處理這一切。這個無頭的WebKit可以透過JavaScript API編寫指令碼，並使用CasperJS來處理測試。PhantomJS能夠模擬完整的導航場景，可以顯示使用者在瀏覽時可能遇到錯誤的所有地方。

對多種web標準的支援使得PhantomJS非常靈活和強大。頁面自動化、網路監控和其他重要特性允許您模擬一切，從最基本的使用者互動到包含多個輸入的流。可供使用的無頭選項:

測試頁面導航

模擬使用者行為

使用斷言測試

截圖

PhantomJS的另一個好處是它的開源狀態。該程式於2011年釋出，目前仍在由專門的開發人員進行更新。

Zombie.js

Zombie.js是另一個輕量級框架，用於在沒有瀏覽器的模擬環境中測試客戶端JavaScript。當前版本的Zombie (Zombie 5.x)經過測試，可以與Node.js版本4-6一起工作。

Zombie.js

的一些特性：

執行在Node.js，使它很容易與您的專案整合

功能齊全的API

變態的快

Zombie JS還提供了一組斷言，你可以直接從瀏覽器物件訪問這些斷言。例如，可以使用斷言檢查頁面是否成功載入。除了斷言之外，Zombie JS還提供了處理cookie、選項卡、身份驗證等的方法。

HtmlUnit

HtmlUnit是用Java編寫的，它允許你使用Java程式碼來自動化使用者與網站互動的許多基本方式。

可以用來測試如下功能：

填寫和提交表格

網站重定向

HTTP身份驗證

HTTPS頁面效能

HTTP頭的效能

該工具能夠模擬幾種不同的瀏覽器，這進一步擴充套件了它的功能。使用HtmlUnit，你可以在Chrome、Firefox 38及以後版本、Edge、IE8和IE11中建立指令碼化用例。這涵蓋了大量的新瀏覽器和舊瀏覽器，幫助確保每個使用者在網站上線後都能獲得更好的體驗。電子商務網站很大程度上依賴於HtmlUnit允許你測試的大部分元素。

表單提交、站點安全和導航都是電子商務UI的組成部分，對轉換和銷售有重要影響。糟糕的使用者介面意味著糟糕的使用者體驗，在快節奏的網路世界裡，消費者會放棄這樣的網站，轉而在競爭對手的平臺進行購物。HtmlUnit是一個有用的朋友，特別是你的工作，以打造一個業務網站與優越的效能為主。

Splash

在Splash的文件中，無頭瀏覽器被譽為輕量級瀏覽器，為開發人員提供了多種功能。這個“JavaScript呈現服務”使用HTTP API操作，在Python 3中使用Twisted和QT5實現。

如果你有如下需要，Splash可真是好工具：

瞭解HTML的效能

測試渲染和載入速度

關閉影象或使用AdBlock更快的載入

視覺化網站使用者體驗

使用Lua瀏覽指令碼

一次處理多個頁面

Splash以HAR格式提供渲染資訊，還允許你對結果進行螢幕截圖。這個無頭瀏覽器也可以與Scrapy整合，在你需要或想要從其他網站刮程式碼的情況下。由於它的通用性，Splash對於那些為測試工具包尋找“萬能工具”的開發人員來說是一個非常有用的工具。

寫在最後

這些瀏覽器只代表了開發人員可以使用的少數測試環境。話雖如此，透過將本文中提到的前5個無頭瀏覽器與谷歌趨勢進行比較，可以明顯看出PhantomJS仍然是最流行的無頭瀏覽器工具之一。

因為有各種各樣的選擇，你可以為不同的用例嘗試多個，並確定哪一個最適合測試特定的場景。從簡單的互動到完全自動化的流程，無頭瀏覽器提供了最佳化每個開發站點的UI和UX所需的框架。