如何使用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