TL;DR
Chrome không có giao diện người dùng sẽ được cung cấp trong Chrome 59. Đây là một cách để chạy trình duyệt Chrome trong môi trường không có giao diện người dùng. Về cơ bản, bạn sẽ chạy Chrome mà không cần Chrome! Công cụ này mang tất cả các tính năng hiện đại của nền tảng web do Chromium và công cụ kết xuất Blink cung cấp đến dòng lệnh.
Tại sao điều đó hữu ích?
Trình duyệt không có giao diện người dùng là một công cụ tuyệt vời để kiểm thử tự động và môi trường máy chủ mà bạn không cần giao diện người dùng hiển thị. Ví dụ: bạn có thể muốn chạy một số thử nghiệm trên một trang web thực, tạo tệp PDF của trang web đó hoặc chỉ kiểm tra cách trình duyệt hiển thị một URL.
Khởi động chế độ không có giao diện người dùng (CLI)
Cách dễ nhất để bắt đầu sử dụng chế độ không có giao diện người dùng là mở tệp nhị phân Chrome từ dòng lệnh. Nếu bạn đã cài đặt Chrome 59 trở lên, hãy khởi động Chrome bằng cờ --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 sẽ trỏ đến vị trí cài đặt Chrome. Vị trí chính xác sẽ khác nhau tuỳ theo nền tảng. Vì đang dùng máy Mac, nên tôi đã tạo các bí danh thuận tiện cho từng phiên bản Chrome mà tôi đã cài đặt.
Nếu bạn đang sử dụng kênh ổn định của Chrome và không thể tải phiên bản Beta, bạn nên sử dụng 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"
Tải Chrome Canary tại đây.
Tính năng dòng lệnh
Trong một số trường hợp, bạn có thể không cần viết tập lệnh theo phương thức lập trình cho Chrome không có giao diện người dùng. Có một số cờ dòng lệnh hữu ích để thực hiện các tác vụ phổ biến.
In DOM
Cờ --dump-dom in document.body.innerHTML vào stdout:
chrome --headless --disable-gpu --dump-dom https://www.chromestatus.com/
Tạo tệp PDF
Cờ --print-to-pdf tạo một tệp PDF của trang:
chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/
Chụp ảnh màn hình
Để chụp ảnh màn hình của một trang, hãy sử dụng cờ --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/
Việc chạy bằng --screenshot sẽ tạo ra một tệp có tên screenshot.png trong thư mục đang hoạt động. Nếu bạn muốn chụp ảnh toàn trang, thì mọi thứ sẽ phức tạp hơn một chút. David Schnurr có một bài đăng tuyệt vời trên blog về vấn đề này. Hãy xem bài viết Sử dụng Chrome không có giao diện người dùng làm công cụ chụp ảnh màn hình tự động .
Chế độ REPL (vòng lặp đọc-đánh giá-in)
Cờ --repl chạy Headless ở chế độ mà bạn có thể đánh giá biểu thức JS trong trình duyệt, ngay từ dòng lệnh:
$ 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
$
Gỡ lỗi Chrome mà không có giao diện người dùng trình duyệt?
Khi bạn chạy Chrome bằng --remote-debugging-port=9222, Chrome sẽ khởi động một thực thể đã bật giao thức DevTools. Giao thức này được dùng để giao tiếp với Chrome và điều khiển thực thể trình duyệt không có giao diện người dùng. Đây cũng là những gì các công cụ như Sublime, VS Code và Node sử dụng để gỡ lỗi từ xa một ứng dụng. #synergy
Vì bạn không có giao diện người dùng trình duyệt để xem trang, hãy chuyển đến http://localhost:9222 trong một trình duyệt khác để kiểm tra xem mọi thứ có hoạt động hay không. Bạn sẽ thấy danh sách các trang có thể kiểm tra mà bạn có thể nhấp vào để xem nội dung mà Headless đang hiển thị:
Tại đây, bạn có thể sử dụng các tính năng quen thuộc của Công cụ cho nhà phát triển để kiểm tra, gỡ lỗi và điều chỉnh trang như bình thường. Nếu bạn đang sử dụng Headless theo phương thức lập trình, trang này cũng là một công cụ gỡ lỗi mạnh mẽ để xem tất cả các lệnh giao thức DevTools thô được truyền qua mạng, giao tiếp với trình duyệt.
Sử dụng theo phương thức lập trình (Node)
Puppeteer
Puppeteer là một thư viện Node do nhóm Chrome phát triển. API này cung cấp một API cấp cao để kiểm soát Chrome không có giao diện người dùng (hoặc đầy đủ). Thư viện này tương tự như các thư viện kiểm thử tự động khác như Phantom và NightmareJS, nhưng chỉ hoạt động với các phiên bản Chrome mới nhất.
Ngoài ra, bạn có thể sử dụng Puppeteer để dễ dàng chụp ảnh màn hình, tạo tệp PDF, di chuyển giữa các trang và tìm nạp thông tin về các trang đó. Bạn nên sử dụng thư viện này nếu muốn tự động hoá nhanh quá trình kiểm thử trình duyệt. Công cụ này ẩn đi sự phức tạp của giao thức DevTools và xử lý các tác vụ thừa như khởi chạy một phiên bản gỡ lỗi của Chrome.
Cách cài đặt:
npm i --save puppeteer
Ví dụ – in tác nhân người dùng
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
console.log(await browser.version());
await browser.close();
})();
Ví dụ – chụp ảnh màn hình trang
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();
})();
Hãy xem tài liệu về Puppeteer để tìm hiểu thêm về toàn bộ API.
Thư viện CRI
chrome-remote-interface là một thư viện cấp thấp hơn so với API của Puppeteer. Bạn nên sử dụng tính năng này nếu muốn tiếp cận trực tiếp với mã nguồn và sử dụng giao thức DevTools.
Khởi chạy Chrome
chrome-remote-interface không chạy Chrome cho bạn, vì vậy, bạn sẽ phải tự xử lý việc đó.
Trong phần CLI, chúng ta đã bắt đầu Chrome theo cách thủ công bằng cách sử dụng --headless --remote-debugging-port=9222. Tuy nhiên, để tự động hoá hoàn toàn các chương trình kiểm thử, bạn có thể tạo Chrome từ ứng dụng của mình.
Một cách là sử dụng 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) => {
...
});
Tuy nhiên, mọi thứ sẽ trở nên phức tạp nếu bạn muốn có một giải pháp di động hoạt động trên nhiều nền tảng. Hãy xem đường dẫn được mã hoá cứng đó đến Chrome :(
Sử dụng ChromeLauncher
Lighthouse là một công cụ tuyệt vời để kiểm tra chất lượng của ứng dụng web. Một mô-đun mạnh mẽ để khởi chạy Chrome đã được phát triển trong Lighthouse và hiện đã được trích xuất để sử dụng độc lập.
Mô-đun NPM chrome-launcher sẽ tìm nơi cài đặt Chrome, thiết lập một thực thể gỡ lỗi, khởi chạy trình duyệt và tắt trình duyệt khi chương trình của bạn hoàn tất. Điều tuyệt vời nhất là ứng dụng này hoạt động trên nhiều nền tảng nhờ Node!
Theo mặc định, chrome-launcher sẽ cố gắng chạy Chrome Canary (nếu bạn đã cài đặt), nhưng bạn có thể thay đổi chế độ này để chọn Chrome sẽ sử dụng theo cách thủ công. Để sử dụng, trước tiên, hãy cài đặt từ npm:
npm i --save chrome-launcher
Ví dụ – sử dụng chrome-launcher để khởi chạy Headless
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();
});
Việc chạy tập lệnh này không làm được gì nhiều, nhưng bạn sẽ thấy một thực thể của Chrome khởi động trong trình quản lý tác vụ đã tải about:blank. Hãy nhớ rằng sẽ không có giao diện người dùng trình duyệt nào. Chúng ta đang ở chế độ không có giao diện người dùng.
Để kiểm soát trình duyệt, chúng ta cần giao thức DevTools!
Truy xuất thông tin về trang
Hãy cài đặt thư viện:
npm i --save chrome-remote-interface
Ví dụ
Ví dụ – in tác nhân người dùng
const CDP = require('chrome-remote-interface');
...
launchChrome().then(async chrome => {
const version = await CDP.Version({port: chrome.port});
console.log(version['User-Agent']);
});
Kết quả sẽ là: HeadlessChrome/60.0.3082.0
Ví dụ – kiểm tra xem trang web có tệp kê khai ứng dụng web hay không
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.
});
})();
Ví dụ – trích xuất <title> của trang bằng các API DOM.
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.
});
})();
Sử dụng Selenium, WebDriver và ChromeDriver
Hiện tại, Selenium mở một phiên bản đầy đủ của Chrome. Nói cách khác, đây là một giải pháp tự động nhưng không hoàn toàn không có giao diện người dùng. Tuy nhiên, bạn có thể định cấu hình Selenium để chạy Chrome không có giao diện người dùng mà không tốn nhiều công sức. Bạn nên Chạy Selenium bằng Chrome không có giao diện người dùng nếu muốn xem hướng dẫn đầy đủ về cách tự thiết lập. Tuy nhiên, tôi đã đưa ra một số ví dụ bên dưới để bạn có thể bắt đầu.
Sử dụng ChromeDriver
ChromeDriver 2.32 sử dụng Chrome 61 và hoạt động tốt với Chrome không có giao diện người dùng.
Cài đặt:
npm i --save-dev selenium-webdriver chromedriver
Ví dụ:
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();
Sử dụng WebDriverIO
WebDriverIO là một API cấp cao hơn trên Selenium WebDriver.
Cài đặt:
npm i --save-dev webdriverio chromedriver
Ví dụ: lọc các tính năng CSS trên chromestatus.com
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();
})();
Tài nguyên khác
Dưới đây là một số tài nguyên hữu ích để bạn bắt đầu:
Tài liệu
- Trình xem giao thức DevTools – Tài liệu tham khảo API
Công cụ
- chrome-remote-interface – mô-đun nút đóng gói giao thức DevTools
- Lighthouse – công cụ tự động để kiểm tra chất lượng ứng dụng web; sử dụng nhiều giao thức
- chrome-launcher – mô-đun nút để khởi chạy Chrome, sẵn sàng cho quá trình tự động hoá
Bản thu thử
- "Trang web không có giao diện người dùng" – Bài đăng tuyệt vời trên blog của Paul Kinlan về cách sử dụng Headless với api.ai.
Câu hỏi thường gặp
Tôi có cần cờ --disable-gpu không?
Chỉ có trên Windows. Các nền tảng khác không còn yêu cầu điều này. Cờ --disable-gpu là một giải pháp tạm thời cho một số lỗi. Bạn sẽ không cần cờ này trong các phiên bản Chrome trong tương lai. Hãy xem crbug.com/737678 để biết thêm thông tin.
Vậy tôi vẫn cần Xvfb?
Không. Chrome không có giao diện người dùng không sử dụng cửa sổ nên bạn không cần máy chủ hiển thị như Xvfb nữa. Bạn có thể chạy kiểm thử tự động mà không cần đến tính năng này.
Xvfb là gì? Xvfb là một máy chủ hiển thị trong bộ nhớ cho các hệ thống giống Unix, cho phép bạn chạy các ứng dụng đồ hoạ (như Chrome) mà không cần màn hình thực tế được đính kèm. Nhiều người sử dụng Xvfb để chạy các phiên bản Chrome cũ hơn nhằm kiểm thử "không có giao diện người dùng".
Làm cách nào để tạo một vùng chứa Docker chạy Chrome không có giao diện người dùng?
Hãy xem lighthouse-ci. Ứng dụng này có một Dockerfile mẫu sử dụng node:8-slim làm hình ảnh cơ sở, cài đặt và chạy Lighthouse trên App Engine Flex.
Tôi có thể sử dụng tính năng này với Selenium / WebDriver / ChromeDriver không?
Có. Xem phần Sử dụng Selenium, WebDriver và ChromeDriver.
Mối liên hệ giữa điều này với PhantomJS là gì?
Chrome không có giao diện người dùng tương tự như các công cụ như PhantomJS. Bạn có thể sử dụng cả hai để kiểm thử tự động trong môi trường không có giao diện người dùng. Điểm khác biệt chính giữa hai công cụ này là Phantom sử dụng phiên bản WebKit cũ hơn làm công cụ hiển thị, trong khi Chrome không có giao diện người dùng sử dụng phiên bản Blink mới nhất.
Hiện tại, Phantom cũng cung cấp API cấp cao hơn giao thức DevTools.
Tôi có thể báo cáo lỗi ở đâu?
Đối với các lỗi liên quan đến Headless Chrome, hãy báo cáo lỗi trên crbug.com.
Đối với các lỗi trong giao thức DevTools, hãy gửi lỗi tại github.com/ChromeDevTools/devtools-protocol.