在 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 截图方面，大家有更好的方法，也请不吝赐教_{让交流促进我们共同进步}~

点击下方链接免费领取：性能测试+接口测试+自动化测试+测试开发+测试用例+简历模板+测试文档

http://qrcode.testing-studio.com/f?from=infoQ&url=https://ceshiren.com/t/topic/22265