Question

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

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

一些例子 -

Device Testing for Resonsive CSS Layouts (Manual)
Responsinator
Responsive.is
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-automate-testing-of-website-layout-for-different-devices/

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

Answer 3

如果你的主要目的是测试用户界面和硒的变化并不是绝对的要求，你可以使用BBC Wraith - https://github.com/BBC-News/wraith非常容易设置和使用。

Answer 4

我们可以通过多种方式实现这一目标

<强> 1。截图比较：使用selenium webdriver转到给定的网站URL并将浏览器更改为不同的大小并比较屏幕截图。如果两个截图相同则给定的网站没有响应。如果两个截图不同，那么给定的网站是响应。这种方法并不好，因为Lets假设如果幻灯片显示在给定网站上同时获取该网站的屏幕截图，则给定网站中显示的幻灯片图像可能会发生变化，我们将获得不同的屏幕截图，因此如果我们比较屏幕截图，我们将得到结果为两个截图都不同，我们可能会得到响应，因为给定的网站是响应

<强> 2。文档宽度：使用selenium webdriver转到给定的网站URL并将浏览器更改为移动设备大小并执行javascript以获取文档宽度。如果宽度小于移动设备的最大宽度，我们可以假设给定的网站是响应式的

第3。屏幕截图宽度：使用selenium webdriver转到给定的网站网址并将浏览器更改为移动设备大小并获取屏幕截图并获取屏幕截图图像的宽度。如果宽度小于移动设备的最大宽度，我们可以假设给定的网站是响应的。我用这种方法测试了多个站点并得到了预期的结果检查给定站点的步骤是否响应。

有关编码的详情，请参阅：http://jagadeeshmanne.blogspot.in/2014/03/checking-website-is-responsive-or-not.html

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

4 个答案: