如何使用ChromeHeadLess 技术实现后台对前台页面截屏

1 chrome headless

1.1 什么是chrome headless

Chrome Headless 是 Chrome 浏览器的无界面形态，是Google 针对 Chrome 浏览器 59版
新增加的一种模式，可以在不打开浏览器的前提下，使用所有 Chrome 支持的特性运行你的程序。相比于现代浏览器，Headless
Chrome 更加方便测试 web 应用，获得网站的截图，做爬虫抓取信息等。相比于出道较早的 PhantomJS，SlimerJS
等，Headless Chrome 则更加贴近浏览器环境。

1.2 chrome headless的作用

①可以加快UI自动化测试的执行时间，对于UI自动化测试，少了真实浏览器加载css，js以及渲染页面的工作。无头测试要比真实浏览器快的多。
②可以在无界面的服务器或CI上运行测试，减少了外界的干扰，使自动化测试更稳定。
③在一台机器上可以模拟运行多个chrome headless无头浏览器，方便进行并发测试。

1.3 chrome headless和PhantomJs的对比

自2017年中以来，Chrome用户可以选择以headless模式运行浏览器。此功能非常适合运行前端浏览器测试，而无需在屏幕上显示操作过程。在此之前，这主要是PhantomJS的领地，但Headless Chrome正在迅速取代这个由JavaScript驱动的WebKit方法。Headless Chrome浏览器的测试运行速度要快得多，而且行为上更像一个真正的浏览器，虽然我们的团队发现它比PhantomJS使用更多的内存。有了这些优势，用于前端测试的Headless Chrome基本已成为事实上的标准。
Headless Chrome对比PhantomJS的优点：
1、PhantomJs无法对动态页面进行截图，而chrome headless可以时实现
2、Headless Chrome加载速度比PhantomJS快55%
3、Headless Chrome消耗内存比PhantomJS少38%
4、Headless Chrome比phantomjs有更快更好的性能。Headless Chrome出自Google,可以避免出现类似phantomjs近2k问题没人维护的尴尬局面。
5、chrome对ECMAScript 2017 (ES8)支持，同样headless随着chrome更新，意味着我们也可以使用最新的js语法来编写的脚本，例如async，await等。
6、完全真实的浏览器操作，chrome headless支持所有chrome特性.

2 使用chrome headless在服务端实现对页面截图

2.1 下载ChromeDriver

前提是已安装谷歌浏览器，根据谷歌浏览器的版本，下载相应版本的ChromeDriver，无对应版本时可选择相近版本。
ChromeDriver下载地址：http://npm.taobao.org/mirrors/chromedriver/

2.2 引入selenium-server-standalone.jar

方法1 Maven配置pom文件引入：

<dependency>
    <groupId>org.seleniumhq.selenium</groupId>
    <artifactId>selenium-java</artifactId>
    <version>3.6.0</version>
</dependency>

方法2下载jar包导入：
下载地址：http://selenium-release.storage.googleapis.com/index.html
选择合适版本下载到本地，在项目中导入即可。

2.3 代码实现示例

示例代码如下，其功能是将https://www.baidu.com 百度页面在后台截图并保存为”D:\headless\cut1.png”。

// 设置驱动地址
System.setProperty("webdriver.chrome.driver",
"D:\\headless\\chromedriver.exe");
ChromeOptions options = new ChromeOptions();
// 设置谷歌浏览器exe文件所在地址
options.setBinary("C:\\Program Files (x86)\\Google\\Chrome\\Application
\\chrome.exe");
// 这里是要执行的命令，如需修改截图页面的尺寸，修改--window-size的参数即可
options.addArguments("--headless", "--disable-gpu", "--window-size=1920,1200", "--ignore-certificate-errors");
WebDriver driver = new ChromeDriver(options);
// 访问页面
driver.get("https://www.baidu.com");
// 页面等待渲染时长，如果你的页面需要动态渲染数据的话一定要留出页面渲染的时间，单位默认是秒
Wait<WebDriver> wait = new WebDriverWait(driver