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

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

http://www.aseoe.com/ true 响应式网站Gilt.com之三:Selenium Edition! http://www.aseoe.com/show-27-397-1.html report <?php echo strlen($content) / 2; ?> 在本系列的第二篇文章中,我的同事Greg Mazurek讲了为什么在项目使用在选择器内使用媒体查询。采用这种模式的好处就是在未来开发中代码可维护性更强。那么,接下来我将讨论我们如何把相同的原则应用到测试实践中
TAG:网站
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-27-397-1.html

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)