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

Question

我公司的开发人员已经将我们的网站实现为CSS响应,我很困惑如何利用Selenium来测试他们的工作.我一直在使用Selenium WebDriver(Selenium 2)与Ruby一起用于其他方面.

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

一些例子 -

1. Resonsive CSS布局的设备测试(手动)
2. Responsinator
3. Responsive.is
4. Responsivepx(更好的控制)

但我可以使用selenium以及使用sel2/ruby​​轻松实现上述目的

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

---

需要帮助

• 如何实际测试css是否自动 "响应" ？
• 检查页面是否响应窗口大小调整的常用属性/方面是什么？
• 有没有人使用Selenium来QA响应式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

稍后您可以在单个命令中运行测试,或者您也可以创建一个单独的测试套件,您可以执行更多操作(例如,注入自定义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-自动化测试-的-网站布局换不同的设备/

Answer 2

我可以想到两种方法.

一个 - 对于每个Web元素,您可以检查其大小,位置,可见性等.每次调整大小后,您可以将这些参数与一些先前指定的值进行比较,以检查布局是否已更改.

第二 - 图像比较.每次调整大小后,您都可以截取页面的屏幕截图并将其与之前保存的模式进行比较.有各种图像比较库来实现这一点.在我们公司,我们使用ImageMagick.但是,图像比较不适用于正在开发的页面,也不适用于内容不断变化的页面.您可以通过使用javascript隐藏易于更改的页面部分来解决此问题(这可以使用WebDriver).

我必须承认,我从未有机会手动或自动测试响应式页面,所以上面只是我的想法.我使用图像比较来测试"普通"页面,我不确定它是否也适用于响应式页面.

编辑

不幸的是我不认识Ruby.下面是Java中的一个例子我希望你能理解它并以某种方式转换为Ruby.代码只是打印列表中每个元素的大小和位置.

org.openqa.selenium.Point point;
org.openqa.selenium.Dimension dimension;

List<WebElement> elementsList = driver.findElements(By.xpath("//some/xpath"));

for (WebElement element : elementsList)
{
    point = element.getLocation();
    dimension = element.getSize();
    System.out.println("Element name: " + element.getTagName());
    System.out.println("Element size: " + dimension.height + "x" + dimension.width);
    System.out.println("Element location: " + point.x + ":" + point.y);
}

请注意,每次调用getLocation()和getSize()都会导致执行js(为了获取值),并且需要花费时间.这就是为什么你应该只为每个元素调用一次,不要使用像element.getSize().height +"x"+ element.getSize().width - 这将比上面的例子花费两倍的时间.

在Ruby中,上面提到的方法称为element.location和element.size