重點摘要
Headless Chrome 將於 Chrome 59 版推出。這是在無頭環境中執行 Chrome 瀏覽器的方式。 基本上,在不使用 Chrome 的情況下執行 Chrome!它可將 Chromium 和 Blink 轉譯引擎提供的所有新式網路平台功能導入指令列。
為什麼覺得很實用?
無頭瀏覽器非常適合用於自動化測試和伺服器環境,因為這類環境不需要可見的 UI 殼層。舉例來說,您可以對實際網頁執行一些測試、建立 PDF 檔案,或只檢查瀏覽器如何轉譯網址。
開始無頭 (CLI)
如要開始使用無頭模式,最簡單的方法是透過指令列開啟 Chrome 二進位檔。如果您已安裝 Chrome 59 以上版本,請在 Chrome 中使用 --headless
標記來啟動:
chrome \
--headless \ # Runs Chrome in headless mode.
--disable-gpu \ # Temporarily needed if running on Windows.
--remote-debugging-port=9222 \
https://www.chromestatus.com # URL to open. Defaults to about:blank.
chrome
應指向您安裝的 Chrome。確切位置會因平台而異。由於我是 Mac 使用者
所以我為每個安裝的 Chrome 版本建立了便利的別名
如果使用的是 Chrome 的穩定版,卻無法取得 Beta 版,建議您使用 chrome-canary
:
alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
alias chrome-canary="/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary"
alias chromium="/Applications/Chromium.app/Contents/MacOS/Chromium"
按這裡下載 Chrome Canary。
指令列功能
在某些情況下,您可能不需要透過程式編寫指令碼。有一些實用的指令列旗標可用來執行常見工作。
列印 DOM
--dump-dom
旗標會將 document.body.innerHTML
列印至 stdout:
chrome --headless --disable-gpu --dump-dom https://www.chromestatus.com/
建立 PDF
--print-to-pdf
旗標會建立網頁的 PDF 檔案:
chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/
擷取螢幕畫面
如要擷取頁面的螢幕截圖,請使用 --screenshot
標記:
chrome --headless --disable-gpu --screenshot https://www.chromestatus.com/
# Size of a standard letterhead.
chrome --headless --disable-gpu --screenshot --window-size=1280,1696 https://www.chromestatus.com/
# Nexus 5x
chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.chromestatus.com/
使用 --screenshot
執行時,會在目前的工作目錄中產生名為 screenshot.png
的檔案。如果找的是整頁螢幕截圖,具體流程更複雜。還有這篇來自 David Schnurr 的
優質網誌文章供您參考請參閱「使用無頭 Chrome 做為自動擷取畫面工具 」。
REPL 模式 (讀取-eval-列印迴圈)
--repl
旗標會在無頭模式中執行,讓您直接在瀏覽器中評估 JS 運算式:
$ chrome --headless --disable-gpu --repl --crash-dumps-dir=./tmp https://www.chromestatus.com/
[0608/112805.245285:INFO:headless_shell.cc(278)] Type a Javascript expression to evaluate or "quit" to exit.
>>> location.href
{"result":{"type":"string","value":"https://www.chromestatus.com/features"}}
>>> quit
$
要在不使用瀏覽器使用者介面的情況下對 Chrome 進行偵錯嗎?
使用 --remote-debugging-port=9222
執行 Chrome 時,系統會啟動已啟用開發人員工具通訊協定的執行個體。通訊協定用於與 Chrome 通訊,並驅動無頭瀏覽器執行個體。以及 Sublime、VS Code 和 Node 等工具進行遠端偵錯應用程式。#synergy
由於您沒有瀏覽器 UI 來查看頁面,因此請在其他瀏覽器中開啟 http://localhost:9222
,確認一切運作正常。系統會顯示可檢查的網頁清單,您可以點閱其中的內容,查看無頭介面轉譯的內容:
您可以在這裡使用熟悉的開發人員工具,照常檢查、偵錯及微調頁面。如果是透過程式輔助方式使用無頭介面,本頁也是功能強大的偵錯工具,可用來查看所有原始 DevTools 通訊協定指令,並通過線路與瀏覽器的通訊。
透過程式輔助方式 (節點)
布偶操作員
Puppeteer 是由 Chrome 團隊開發的節點程式庫。其中提供高階 API,讓您控制無頭 (或完整版) Chrome。這類似於 Phantom 和 NightmareJS 等其他自動化測試程式庫,但只能搭配最新版的 Chrome 使用。
Puppeteer 還能用於輕鬆擷取螢幕截圖、建立 PDF、瀏覽頁面,以及擷取這些網頁的相關資訊。如要快速自動執行瀏覽器測試,建議您使用這個程式庫它隱藏了開發人員工具通訊協定的複雜性,可處理多餘的工作,例如啟動 Chrome 偵錯執行個體。
安裝:
npm i --save puppeteer
範例 - 列印使用者代理程式
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
console.log(await browser.version());
await browser.close();
})();
範例 - 擷取頁面的螢幕截圖
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.chromestatus.com', {waitUntil: 'networkidle2'});
await page.pdf({path: 'page.pdf', format: 'A4'});
await browser.close();
})();
如要進一步瞭解完整 API,請參閱 Puppeteer 的說明文件。
CRI 程式庫
chrome-remote-interface 是低於 Puppeteer API 的層級程式庫。建議您直接使用開發人員工具通訊協定,不要使用金屬。
正在啟動 Chrome
chrome-remote-interface 無法啟動 Chrome,因此您必須自行處理。
在 CLI 部分中,我們使用 --headless --remote-debugging-port=9222
手動啟動 Chrome。不過,如要全面自動執行測試,建議您「從」應用程式產生 Chrome。
其中一種方法是使用 child_process
:
const execFile = require('child_process').execFile;
function launchHeadlessChrome(url, callback) {
// Assuming MacOSx.
const CHROME = '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome';
execFile(CHROME, ['--headless', '--disable-gpu', '--remote-debugging-port=9222', url], callback);
}
launchHeadlessChrome('https://www.chromestatus.com', (err, stdout, stderr) => {
...
});
不過,如果您希望的可攜式解決方案能跨越多個平台運作,事情將不易操作。只要看看以硬式編碼方式寫入 Chrome 的路徑即可 :(
使用 Chrome 啟動器
Lighthouse 是測試網頁應用程式品質的強大工具。用於啟動 Chrome 的強大模組已開發在 Lighthouse 中,現在則是獨立使用。chrome-launcher
NPM 模組會找出 Chrome 的安裝位置、設定偵錯執行個體、啟動瀏覽器,並在程式結束時終止它。最棒的是,這可藉由 Node 跨平台運作!
根據預設,chrome-launcher
會嘗試啟動 Chrome Canary (如果已安裝),但您可以變更這項設定,改為手動選取要使用的 Chrome。如要使用,請先從 npm 安裝:
npm i --save chrome-launcher
範例 - 使用 chrome-launcher
啟動無頭介面
const chromeLauncher = require('chrome-launcher');
// Optional: set logging level of launcher to see its output.
// Install it using: npm i --save lighthouse-logger
// const log = require('lighthouse-logger');
// log.setLevel('info');
/**
* Launches a debugging instance of Chrome.
* @param {boolean=} headless True (default) launches Chrome in headless mode.
* False launches a full version of Chrome.
* @return {Promise<ChromeLauncher>}
*/
function launchChrome(headless=true) {
return chromeLauncher.launch({
// port: 9222, // Uncomment to force a specific port of your choice.
chromeFlags: [
'--window-size=412,732',
'--disable-gpu',
headless ? '--headless' : ''
]
});
}
launchChrome().then(chrome => {
console.log(`Chrome debuggable on port: ${chrome.port}`);
...
// chrome.kill();
});
執行這個指令碼的步驟並不多,但您應該會在已載入 about:blank
的工作管理員中看到 Chrome 執行個體觸發。請注意,我們不會提供任何瀏覽器 UI。我們是無頭版。
如要控管瀏覽器,我們需要開發人員工具通訊協定!
擷取網頁相關資訊
開始安裝程式庫:
npm i --save chrome-remote-interface
範例
範例 - 列印使用者代理程式
const CDP = require('chrome-remote-interface');
...
launchChrome().then(async chrome => {
const version = await CDP.Version({port: chrome.port});
console.log(version['User-Agent']);
});
搜尋結果顯示類似「HeadlessChrome/60.0.3082.0
」的內容
範例:檢查網站是否有網頁應用程式資訊清單
const CDP = require('chrome-remote-interface');
...
(async function() {
const chrome = await launchChrome();
const protocol = await CDP({port: chrome.port});
// Extract the DevTools protocol domains we need and enable them.
// See API docs: https://chromedevtools.github.io/devtools-protocol/
const {Page} = protocol;
await Page.enable();
Page.navigate({url: 'https://www.chromestatus.com/'});
// Wait for window.onload before doing stuff.
Page.loadEventFired(async () => {
const manifest = await Page.getAppManifest();
if (manifest.url) {
console.log('Manifest: ' + manifest.url);
console.log(manifest.data);
} else {
console.log('Site has no app manifest');
}
protocol.close();
chrome.kill(); // Kill Chrome.
});
})();
範例 - 使用 DOM API 擷取網頁的 <title>
。
const CDP = require('chrome-remote-interface');
...
(async function() {
const chrome = await launchChrome();
const protocol = await CDP({port: chrome.port});
// Extract the DevTools protocol domains we need and enable them.
// See API docs: https://chromedevtools.github.io/devtools-protocol/
const {Page, Runtime} = protocol;
await Promise.all([Page.enable(), Runtime.enable()]);
Page.navigate({url: 'https://www.chromestatus.com/'});
// Wait for window.onload before doing stuff.
Page.loadEventFired(async () => {
const js = "document.querySelector('title').textContent";
// Evaluate the JS expression in the page.
const result = await Runtime.evaluate({expression: js});
console.log('Title of page: ' + result.result.value);
protocol.close();
chrome.kill(); // Kill Chrome.
});
})();
使用 Selenium、WebDriver 和 ChromeDriver
Selenium 目前開啟了完整的 Chrome 執行個體,換句話說,這是自動化解決方案 但並非完全無頭不過,只要再花一點工夫,您就能將 Selenium 設為執行無頭 Chrome。如需自行設定的完整操作說明,建議您利用「透過 Headless Chrome 執行 Selenium」,但以下提供一些範例,協助您快速上手。
使用 ChromeDriver
ChromeDriver 2.32 採用 Chrome 61,能夠與無頭 Chrome 搭配使用。
安裝:
npm i --save-dev selenium-webdriver chromedriver
示例:
const fs = require('fs');
const webdriver = require('selenium-webdriver');
const chromedriver = require('chromedriver');
const chromeCapabilities = webdriver.Capabilities.chrome();
chromeCapabilities.set('chromeOptions', {args: ['--headless']});
const driver = new webdriver.Builder()
.forBrowser('chrome')
.withCapabilities(chromeCapabilities)
.build();
// Navigate to google.com, enter a search.
driver.get('https://www.google.com/');
driver.findElement({name: 'q'}).sendKeys('webdriver');
driver.findElement({name: 'btnG'}).click();
driver.wait(webdriver.until.titleIs('webdriver - Google Search'), 1000);
// Take screenshot of results page. Save to disk.
driver.takeScreenshot().then(base64png => {
fs.writeFileSync('screenshot.png', new Buffer(base64png, 'base64'));
});
driver.quit();
使用 WebDriverIO
WebDriverIO 是高階 WebDriver 的高階 API,
安裝:
npm i --save-dev webdriverio chromedriver
範例:在 chromestatus.com 上篩選 CSS 功能
const webdriverio = require('webdriverio');
const chromedriver = require('chromedriver');
const PORT = 9515;
chromedriver.start([
'--url-base=wd/hub',
`--port=${PORT}`,
'--verbose'
]);
(async () => {
const opts = {
port: PORT,
desiredCapabilities: {
browserName: 'chrome',
chromeOptions: {args: ['--headless']}
}
};
const browser = webdriverio.remote(opts).init();
await browser.url('https://www.chromestatus.com/features');
const title = await browser.getTitle();
console.log(`Title: ${title}`);
await browser.waitForText('.num-features', 3000);
let numFeatures = await browser.getText('.num-features');
console.log(`Chrome has ${numFeatures} total features`);
await browser.setValue('input[type="search"]', 'CSS');
console.log('Filtering features...');
await browser.pause(1000);
numFeatures = await browser.getText('.num-features');
console.log(`Chrome has ${numFeatures} CSS features`);
const buffer = await browser.saveScreenshot('screenshot.png');
console.log('Saved screenshot...');
chromedriver.stop();
browser.end();
})();
其他資源
以下提供幾項實用資源,協助您快速上手:
文件
- DevTools 通訊協定檢視器 - API 參考文件
工具
- chrome-remote-interface - 包裝 DevTools 通訊協定的節點模組
- Lighthouse - 用於測試網頁應用程式品質的自動化工具;大量使用通訊協定
- chrome-launcher - 用於啟動 Chrome 的節點模組,可進行自動化作業
試聽帶
- 「The Headless Web」(The Headless Web) - Paul Kinlan 的優質網誌文章,說明如何搭配 api.ai 使用 Headless。
常見問題
我需要使用 --disable-gpu
旗標嗎?
僅在 Windows 系統上提供。其他平台不再需要使用這項資訊。--disable-gpu
旗標可以暫時解決幾個錯誤。在日後的 Chrome 版本中,您不需要使用這個旗標。詳情請參閱 crbug.com/737678。
所以我還需要 Xvfb 嗎?
否。無頭 Chrome 不會使用視窗,因此不再需要 Xvfb 等顯示伺服器。您不需要這樣做,也能執行自動化測試。
什麼是 Xvfb?Xvfb 是適用於 Unix 系統的記憶體內顯示伺服器,可讓您在不連接實體螢幕的情況下執行圖形應用程式 (例如 Chrome)。許多人會使用 Xvfb 執行舊版 Chrome,進行「無頭」測試。
如何建立執行 Headless Chrome 的 Docker 容器?
請試試 lighthouse-ci。其中包含的 Dockerfile 範例,使用 node:8-slim
做為基本映像檔,並在 App Engine Flex 上安裝 + 執行 Lighthouse。
可以與 Selenium / WebDriver / ChromeDriver 搭配使用嗎?
可以,請參閱使用 Selenium、WebDriver 和 ChromeDriver。
這和 PhantomJS 有什麼關係?
無頭 Chrome 與 PhantomJS 等工具類似。在無頭環境中,兩者都可用於自動化測試。兩者的主要差異在於,Phantom 使用舊版 WebKit 做為轉譯引擎,而 Headless Chrome 則使用最新版本的 Blink。
目前 Phantom 也提供比開發人員工具通訊協定更高的 API。
該在哪裡回報錯誤?
如果您對 Headless Chrome 發生錯誤,請前往 crbug.com 進行回報。
如果您在開發人員工具通訊協定中發現錯誤,請前往 github.com/ChromeDevTools/devtools-protocol 進行回報。