在web的UI自动化中,小伙伴们经常遇到的一个问题是,IE的截屏非常好实现(一个save_screenshot即可满足),而chrome和Firefox的全屏截图就让人很是头疼了。今天作者来给大家分享下自己实例中使用的chrome和Firefox浏览器全屏截图方法。
1.chrome
1)可以利用phantomjs,截取基于webkit内核的无界面浏览器页面全图。代码如下:
实现非常简单,用PhantomJS()创建浏览器,打开截图即可。
开始作者用phantomjs用的很开心。
**突然某天,**程序就抛出了问题:
UserWarning: Selenium support for PhantomJS has been deprecated, please use headless versions of Chrome or Firefox instead
查明原因,发现是phantomjs不再更新,新版的selenium不支持phantomjs了。T^T
没有办法,只能另辟新径了0o0
2)使用chrome的headless属性+js脚本进行截图
话不多说,上代码–
i)声明两个属性:headless和disable-gpu
–headless:使用headless模式打开chrome浏览器
–disable-gpu:临时需要
ii)在webdriver打开chrome前加载属性即可
js脚本解读:
- Document.body.scrollwidth——body对象宽度- document.body.offsetWidth——网页可见区域的宽(包括边线的宽)- document.documentElement.clientWidth——浏览器视口的宽度(不包括工具栏和滚动条)- document.documentElement.scrollWidth——获取html元素对象内容的实际宽度(即html元素对象的滚动宽度)- document.documentElement.offsetWidth——获取DOM文档的根节点html元素对象的宽度(即offsetWidth=width+padding+border,不包括margin)
高度同理。
==================================================
为什么要区分document.documentElement.***和document.body.***呢?虽然看起来功能类似,但是一定要做好区别,前者是对标准模式下的IE和其他浏览器而言,后者是对于怪异模式下的浏览器而言的。
===========================================
2.Firefox
1)利用Firefox自带插件,screengrab进行页面截图
i.去附加组件处,安装screengrab
ii.安装后,自定义快捷键。此次编码,采用的是Ctrl+z 组合键。
此处应注意,不要产生热键冲突。设置后,可以在Firefox页面,用组合键试用一下,查看结果。
iii.利用selenium中的webdriver自带keys键,进行组合键调用。话不多说,上代码。
代码解析:
>>extension_path为firefox的配置目录。在启动浏览器前,需要加载对应的配置。不然直接由下面代码启动起来的Firefox是不带任何配置和插件的。
>>firefox_options即利用webdriver将配置导入到即将启动的浏览器中。
>>browser 带配置地启动Firefox
>>14、15行 打开并放大浏览器
>>16行,定位一个元素
>>17行,模拟发送组合键:Ctrl+z,调用screengrab进行截屏
>>18、19行,缓冲几秒后,关闭浏览器
2)当然,Firefox也可以用headless方式,具体方法与chrome大同小异,可以参考文末链接。
这只是作者自己动手过程中的一个小实例。对于UI截图方面,大家有更好的方法,也请不吝赐教让交流促进我们共同进步~