20

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

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

一些例子 -

  1. 响应 CSS 布局的设备测试（手动）
  2. 负责人
  3. 响应式
  4. Responsivepx（更好的控制）

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

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

需要帮助

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

4 回答 4

11

现在有一个响应式设计自动化测试的解决方案——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 - 对不同设备的网站布局进行自动化测试/

于 2013-11-24T11:05:13.003 回答
5

我可以想到两种方法来做到这一点。

一 - 对于每个 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

于 2012-05-16T16:35:37.970 回答
1

如果您的主要目标是测试 UI 的变化并且 selenium 不是绝对要求，您可以使用 BBC Wraith - https://github.com/BBC-News/wraith非常易于设置和使用。

于 2014-07-16T14:08:56.070 回答
0

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

1. 截图比较：使用 selenium webdriver 转到给定的网站 url 并将浏览器更改为不同的大小并比较屏幕截图。如果两个屏幕截图相同，则给定网站没有响应。如果两个屏幕截图不同，则给定网站响应。这种方法不好，因为让我们假设如果在给定网站的屏幕截图中存在幻灯片，给定网站中存在的幻灯片图像可能会发生变化，我们会得到不同的屏幕截图，所以如果我们比较屏幕截图，我们会得到结果为两个屏幕截图都不同，我们可能会得到响应，因为给定的站点是响应式的

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

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

查看更多关于编码的信息：http: //jagadeeshmanne.blogspot.in/2014/03/checking-website-is-responsive-or-not.html

于 2014-03-07T05:09:20.657 回答