css - 有没有办法用 Selenium 测试响应式 CSS？

Question

我公司的开发人员已将我们的网站实现为 CSS 响应式，但我对如何利用 Selenium 来测试他们的工作感到困惑。我一直在将 Selenium WebDriver (Selenium 2) 与 Ruby 一起用于其他方面。

在网上做了一些研究后，我遇到了多种工具，但没有一个值得自动化，因为它们..aaa...只是用于手动检查不同屏幕尺寸的网络工具。

一些例子-

1. Device Testing for Resonsive CSS Layouts (Manual)
2. Responsinator
3. Responsive.is
4. Responsivepx (控制越多越好)

但我可以使用 Selenium 以及使用 sel2/ruby 非常轻松地实现上述目标

@driver.manage.window.resize_to(480, 725) #iphone potrait

---

需要帮助

• 如何实际测试 css 是否自动“响应”？
• 检查页面是否响应窗口大小调整的常用属性/方面有哪些？
• 有人使用过 Selenium 来对响应式 CSS 进行质量检查吗？

Answer 1

现在有一个响应式设计自动化测试的解决方案——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/