响应式网站Gilt.com之三：Selenium Edition!

来源 : 作者 : admin时间 : 2014-08-27 23:53:37 人气指数 :

导语在本系列的第二篇文章中，我的同事Greg Mazurek讲了为什么在项目使用在选择器内使用媒体查询。采用这种模式的好处就是在未来开发中代码可维护性更强。那么，接下来我将讨论我们如何把相同的原则应用到测试实践中

在本系列的第二篇文章中，我的同事Greg Mazurek讲了为什么在项目使用“在选择器内使用媒体查询”。采用这种模式的好处就是在未来开发中代码可维护性更强。那么，接下来我将讨论我们如何把相同的原则应用到测试实践中来。

我们曾认真思考过——如何减少代码量，甚至可以避免在未来发生的不利变化。Gilt开发团队使用自动化测试来测试所有的app，不幸的是，其中很多测试都已不再适用此时的响应式设计环境，因为一些页面元素已被移动、隐藏、改变或者添加。此外，如果开发人员想改变CSS属性来增强平板上体验，却又担心是否影响了手机用户的体验。修改类名称，js功能修改或者指定CSS修改都可能导致不好的后果。

为了解决这类问题，特别行动小组已经写了Selenium自动化测试来测试响应式页面——具体点，是去测试每个响应断点。（Selenium是一个允许你在浏览器里自动化应用的web测试框架，健壮的API能够像用户那样与你的页面做交互，并且能够处理大部分自动化情景）首先，要有一个预设某断点视图的浏览器作为测试——例如，iPhone竖屏的最大宽度为479px，然而当横屏时，视图最小宽度为480px，最大宽度为767px。Selenium通过web驱动对象是很容易做到的。

代码演示如下：

def resizeWindow(width: Int, height: Int)(implicit webDriver: WebDriver) = { webDriver.manage().window().setSize(new org.openqa.selenium.Dimension(width, height)) }

上面的代码块会在每个测试开始之前被执行。在页面被加载之前执行它,不是之后，会根据相应的断点（不进行缩放页面，但可能引起一些视图问题）进行适应。在初始页面被加载之前执行代码，有助于确保自动化在浏览器完成缩放之后启动。

举个例子

为了确保页面能够响应于屏幕或者设备的视窗，这里有一个基础的测试。它是用Selenium写的缩放测试，还有一些jQuery代码（其实有很多方法来测试，可我更喜欢这种）：

describe("When resizing the browser to 479px and navigating to product listing page") { 
    it("should fit all the elements within the 479px limit") { 
        val expectedPageWidth = 479 
        resizeWindow(width = expectedPageWidth, height = 800) 
        webDriver.navigate().to("http://www.gilt.com/sale/men") 
        // Using scrollWidth instead of width(), to get the true width of the html container 
        val actualPageWidth = 
        webDriver.asInstanceOf[JavascriptExecutor] 
        .executeScript("return $('html')[0].scrollWidth;").asInstanceOf[Long]
         actualPageWidth.toInt should be <= expectedPageWidth 
    } 
}

（备注：你的页面不应该可以向右滑动）

这就是我要讲的所有知识。如果你没有其他测试，至少这个还可以保证你的网站仍然是响应式的。但是我们还是强烈推荐添加更多对网站功能方面的测试。

英文原文：http://tech.gilt.com/post/91076463569/responsive-gilt-com-selenium-edition