Headless Chrome实战：动态渲染、页面抓取与端到端测试

笔者往往是使用PhantomJS或者Selenium执行动态页面渲染，而在Chrome 59之后Chrome提供了Headless模式，其允许在命令行中使用Chromium以及Blink渲染引擎提供的完整的现代Web平台特性。需要注意的是，Headless Chrome仍然存在一定的局限，相较于Nightmare或Phantom这样的工具，Chrome的远程接口仍然无法提供较好的开发者体验。我们在下文介绍的代码示例中也会发现，目前我们仍需要大量的模板代码进行控制。

环境配置

在Chrome安装完毕后我们可以利用其包体内自带的命令行工具启动：

$ chrome --headless --remote-debugging-port=9222 https://chromium.org

笔者为了部署方便，使用 Docker镜像来进行快速部署，如果你本地存在Docker环境，可以使用如下命令快速启动：

docker run -d -p 9222:9222 justinribeiro/chrome-headless

如果是在Mac下本地使用的话我们还可以创建命令别名：

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"

如果是在Ubuntu环境下我们可以使用deb进行安装：

# Install Google Chrome
# https://askubuntu.com/questions/79280/how-to-install-chrome-browser-properly-via-command-line
sudo apt-get install libxss1 libappindicator1 libindicator7
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo dpkg -i google-chrome*.deb# Might show "errors", fixed by next line
sudo apt-get install -f

chrome命令行也支持丰富的命令行参数，--dump-dom 参数可以将 document.body.innerHTML 打印到标准输出中：

chrome --headless --disable-gpu --dump-dom https://www.chromestatus.com/

而 --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/

如果我们需要更复杂的截图策略，譬如进行完整页面截图则需要利用代码进行远程控制。