注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

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

2014-08-29 15:56:14|  分类: 移动客户端 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

本文由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 
    } 
} 

(备注:你的页面不应该可以向右滑动)

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

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

  评论这张
 
阅读(14)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017