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

1 chrome headless
1.1 什么是chrome headless
1.2 chrome headless的作用
1.3 chrome headless和PhantomJs的对比
2 使用chrome headless在服务端实现对页面截图
2.1 下载ChromeDriver
2.2 引入selenium-server-standalone.jar
2.3 代码实现示例
2.4 运行及截图效果
3 服务端使用chrome headless获取网页信息
3.1获取当前浏览器的信息
3.2 执行js脚本
3.3获取单个元素
3.4获取多个元素
3.5定位层级元素
3.6获取当前的窗口
3.7处理弹出框
3.8处理下拉列表
3.9处理cookie
3.10模拟鼠标和键盘操作

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, 3);
wait.until(new ExpectedCondition<WebElement>() {public WebElement apply(WebDriver d) {//等待前台页面中 id为“kw”的组件渲染完毕，后截图
//若无需等待渲染，return true即可。 不同页面视情况设置idreturn d.findElement(By.id("kw"));}
});
// 获取到截图的文件
File screenshotFile = ((TakesScreenshot) driver)
.getScreenshotAs(OutputType.FILE);
if ((screenshotFile != null) && screenshotFile.exists()) {//截取到的图片存到本地FileOutputStream out = null;FileInputStream in = null;try {in = new FileInputStream(screenshotFile);out = new FileOutputStream("D:\\headless\\cut1.png");byte[] b = new byte[1024];while (true) {int temp = in.read(b, 0, b.length);// 如果temp = -1的时候，说明读取完毕if (temp == -1) {break;}out.write(b, 0, temp);}} catch (Exception e) {//TODO异常处理}
}

2.4 运行及截图效果

后台运行效果

截图效果

3 服务端使用chrome headless获取网页信息

3.1获取当前浏览器的信息

System.out.println("Title:" + driver.getTitle());
System.out.println("currentUrl:" + driver.getCurrentUrl());

3.2 执行js脚本

 String jString = "alert('122')";
((JavascriptExecutor) driver).executeScript(jString);

3.3获取单个元素

 WebElement element = driver.findElement(By.id("wrapper"));
System.out.println(element.getAttribute("class"));

3.4获取多个元素

List<WebElement> elList = driver.findElements(By.tagName("input"));
for (WebElement e : elList) {System.out.println("获取多个元素:" + e.getAttribute("name"));
}

3.5定位层级元素

WebElement e = driver.findElement(By.cssSelector("#qrcode-item qrcode-item-1"));List<WebElement> list = e.findElements(By.tagName("div"));for (WebElement e1 : list) {System.out.println("定位层级元素:"+e1.getAttribute("class"));}

3.6获取当前的窗口

String currentWindow = driver.getWindowHandle();
Set<String> handles = driver.getWindowHandles();
// 遍历窗口
Iterator<String> iterator = handles.iterator();
while (iterator.hasNext()) {if (currentWindow == iterator.next())continue;// 跳转到弹出的窗口WebDriver driver2 = driver.switchTo().window(iterator.next());driver2.getTitle();
}

3.7处理弹出框

Alert alert = driver.switchTo().alert();
alert.getText();
alert.dismiss();// 相当于点击取消
Alert confirm = driver.switchTo().alert();
confirm.getText();
confirm.accept();// 相当于点击确认
Alert prompt = driver.switchTo().alert();
prompt.getText();
prompt.accept();
prompt.sendKeys("测试1");// 输入值

3.8处理下拉列表

Select select = new Select(driver.findElement(By.id("select")));select.selectByIndex(1);select.selectByValue("湖北");select.selectByVisibleText("咸宁");//获取下拉框的全部选项List<WebElement> list2 = select.getOptions();for (WebElement webElement : list2) {webElement.click();//点击下拉框        }

3.9处理cookie

//添加一个cookieCookie cookie = new Cookie("COOKIE", "NAME","D://COOKIES");driver.manage().addCookie(cookie);//获取cookies
Set<Cookie> set = driver.manage().getCookies();
Iterator<Cookie> iterator2 = set.iterator();while (iterator2.hasNext()) {Cookie c = iterator2.next();c.getName();c.getValue();c.getPath();}driver.manage().deleteAllCookies();driver.manage().deleteCookie(cookie);driver.manage().deleteCookieNamed("COOKIE");

3.10模拟鼠标和键盘操作

Actions action = new Actions(driver); action.click();action.dragAndDrop(element, e);action.sendKeys(element,"12222").perform();action.click(element);action.keyDown(currentWindow);

【转载说明】：转载请说明出处，谢谢合作！~