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

我公司的开发人员已经实现了我们的网站对CSS的响应，我不知道如何利用Selenium来测试他们的工作。在其他方面，我一直在将SeleniumWebDriver（Selenium2）与Ruby结合使用

在网上做了一些研究之后，我发现了多种工具，但都不值得自动化，因为它们。。aaa。。。只是一些web工具，可以手动检查不同的屏幕大小

一些例子-

（更好地控制）

但是使用Selenium和sel2/ruby，我可以很容易地实现上述目标

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

---

需要帮助吗

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

---

我可以想出两种方法
一个-对于每个web元素，您可以检查其大小、位置、可见性等。每次调整大小后，您可以将这些参数与以前指定的一些值进行比较，以检查布局是否已更改
第二，图像比较。每次调整大小后，您可以拍摄页面的屏幕截图，并将其与以前保存的模式进行比较。有各种图像比较库可以实现这一点。在我们公司，我们使用。但是，图像比较不适用于正在开发的页面，也不适用于内容不断变化的页面。您可以通过使用javascript隐藏页面中易于更改的部分来解决这个问题（这在WebDriver中是可行的）
我必须承认，我从来没有机会测试响应页面，无论是手动测试还是自动测试，所以以上只是我的想法。我确实使用图像比较来测试“正常”页面，我不确定它是否也适用于响应页面
编辑
不幸的是，我不认识鲁比。下面是一个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);
}

org.openqa.selenium.Point；
org.openqa.selenium.Dimension维度；
List elementsList=driver.findElements（By.xpath（“//some/xpath”）；
for（WebElement:elementsList）
{
point=element.getLocation（）；
维度=元素。getSize（）；
System.out.println（“元素名称：”+Element.getTagName（））；
System.out.println（“元件尺寸：+尺寸.高度+“x”+尺寸.宽度）；
System.out.println（“元素位置：+点x+”：“+点y”）；
}

请注意，每次调用getLocation（）和getSize（）都会导致执行js（以获取值），并且会花费时间。这就是为什么您应该只对每个元素进行一次调用，而不要使用类似element.getSize（）.height+“x”+element.getSize（）.width的东西-与上面的示例相比，这将花费两倍的时间

---

在Ruby中，上述方法称为element.location和element.size
现在有了一个响应式设计自动测试的解决方案-Galen框架。 我一直在开发一个工具，它可以测试网页的响应性设计以及网站的跨浏览器兼容性布局。该工具在此处可用
它使用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方法（测试驱动开发）
我们可以通过多种方式实现这一点
1。屏幕截图比较：使用selenium webdriver转到给定的网站url，将浏览器更改为不同大小并比较屏幕截图。如果两个屏幕截图相同，则给定的网站没有响应。如果两个屏幕截图不同，则给定的网站有响应。这种方法不好，因为假设在拍摄该网站的截图时，给定网站中存在幻灯片，给定网站中的幻灯片图像可能会发生变化，我们会得到不同的截图，因此，如果我们比较截图，我们将得到结果，因为两个截图不同，我们可能会得到响应，因为给定网站是响应的
2。文档宽度：使用selenium webdriver转到给定的网站url，将浏览器更改为移动设备大小，并执行javascript以获得文档宽度。如果宽度小于移动设备的最大宽度，我们可以假设给定的网站是响应的
3。屏幕截图宽度：使用selenium webdriver转到给定的网站url，将浏览器更改为移动设备大小，拍摄屏幕截图并获取屏幕截图图像的宽度。如果宽度小于移动设备的最大宽度，我们可以假设给定的网站是响应的。我用这种方法测试了多个站点，得到了检查给定站点是否响应的预期结果步骤。



---

有关编码的更多信息，请访问：
如果您的主要目的是测试UI中的更改，并且selenium不是绝对的要求，那么您可以使用BBC Wraith-非常易于设置和使用
谢谢你的回复。你有一些关于大小和位置方面的示例代码吗？嘿@JacekM，让我试着用Ruby实现它，然后再给你回复。图像比较很重要