本文由Spy根据tech.gilt.com的《Responsive Gilt.com: Selenium Edition!》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://tech.gilt.com/post/91076463569/responsive-gilt-com-selenium-edition。

——作者：tech.gilt.com

——译者：Spy

在本系列的第二篇文章中，我的同事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 
    } 
} 

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

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

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于Spy

原名吴建杰，常用昵称“间谍”，现居广州。目前不断学习CSS3,HTML5等前沿技术，巩固js基础知识。在进行前端开发的过程中，追求HTML便签语义化，CSS的重用性，js封装等很多性能优化的操作，一切以用户体验为基础，不断地追求性能优化。希望与更多的同行朋友一起共勉：个人博客,新浪微博。

如需转载，烦请注明出处：

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

中文译文：http://www.w3cplus.com/responsive/responsive-gilt-com-selenium-edition.html