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

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

nike free run 5.0 womens

如需转载,烦请注明出处:https://www.w3cplus.com/responsive/responsive-gilt-com-selenium-edition.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部