在线上进行一些研究后，我遇到了多个工具，但没有值得自动化，因为它们只是网络工具，手动检查不同的屏幕尺寸。
一些例子 –
> Device Testing for Resonsive CSS Layouts (Manual)
> Responsinator
> Responsive.is
> Responsivepx(更好的控制)
但是我也可以使用sel2 / ruby轻松使用Selenium
@driver.manage.window.resize_to(480,725) #iphone potrait
需要帮助
>如何实际测试css是否“自动”？
>什么是通常使用的属性/方面检查页面是否响应窗口大小调整？
有没有人使用Selenium进行QA响应CSS？
解决方法
一个 – 对于每个网页元素，您可以检查其大小，位置，可见性等。每次调整大小后，您可以将这些参数与一些先前指定的值进行比较，以检查布局是否已更改。
二维图像比较。每次调整大小后，您可以拍摄该页面的屏幕截图，并将其与先前保存的模式进行比较。有各种图像比较库来实现。在我们公司，我们使用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
