写点什么

UI 自动化截图之 chrome&Firefox 篇

  • 2022 年 9 月 27 日
    北京
  • 本文字数:1292 字

    阅读完需:约 4 分钟

在 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

用户头像

社区:ceshiren.com 微信:ceshiren2021 2019.10.23 加入

微信公众号:霍格沃兹测试开发 提供性能测试、自动化测试、测试开发等资料,实时更新一线互联网大厂测试岗位内推需求,共享测试行业动态及资讯,更可零距离接触众多业内大佬。

评论

发布
暂无评论
UI自动化截图之chrome&Firefox篇_霍格沃兹测试开发学社_InfoQ写作社区