我公司的开发人员已将我们的网站实现为 CSS 响应式,但我对如何利用 Selenium 来测试他们的工作感到困惑。我一直在将 Selenium WebDriver (Selenium 2) 与 Ruby 一起用于其他方面。
在网上做了一些研究后,我遇到了多种工具,但没有一个值得自动化,因为它们..aaa...只是用于手动检查不同屏幕尺寸的网络工具。
一些例子-
但我可以使用 Selenium 以及使用 sel2/ruby 非常轻松地实现上述目标
@driver.manage.window.resize_to(480, 725) #iphone potrait
需要帮助
- 如何实际测试 css 是否自动“响应”?
- 检查页面是否响应窗口大小调整的常用属性/方面有哪些?
- 有人使用过 Selenium 来对响应式 CSS 进行质量检查吗?
最佳答案
现在有一个响应式设计自动化测试的解决方案——Galen Framework。 我一直在研究一种工具,该工具可以测试网页的响应式设计以及网站布局以实现跨浏览器兼容性。该工具可在此处获得 http://galenframework.com
它使用 Selenium 来在浏览器中打开网页,将浏览器窗口的大小调整为所需的大小,然后获取元素在页面上的位置。 它有一个特殊的语法来描述页面在不同设备(浏览器大小)上的外观
这是一个测试基本网页框架的小例子:
# Objects definition
=====================================
header id header
menu css #menu
content id content
side-panel id side-panel
footer id footer
=====================================
@ all
-------------------------------
header
inside: screen 0px top left right
menu
centered horizontally inside: screen
below: header 0px
content
below: menu 0px
inside:screen 0px left
@ desktop
--------------------------------
side-panel
below: menu 0px
inside: screen 0px right
width: 300px
near: content 0px right
aligned horizontally top: content
@ mobile
--------------------------------
content, side-panel
width: 100% of screen/width
side-panel
below: content 0px
稍后您可以在单个命令中运行测试,或者您也可以创建一个单独的测试套件,您可以在其中执行更多操作(例如注入(inject)自定义 javascript,或使用 WebDriver 等)。要使用单个命令运行上面的示例,您可以这样做:
galen check homepage.spec --url "http://example.com" --size "400x600" --include "mobile,all" --htmlreport "reports"
这只是基础知识。官网上有更多例子。
还有一篇介绍文章,解释了在设计网页时如何使用 TDD 方法(测试驱动开发)http://mindengine.net/post/2013-11-16-tdd-for-responsive-design-or-how-to-automate-testing-of-website-layout-for-different-devices/
关于css - 有没有办法用 Selenium 测试响应式 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10604606/