测试响应网站是一个艰难的任务。 直到目前,达成跨浏览器的一个稳定的和可维护的智能化解决方法和跨设施测试响应的布局已经几乎不可能。 但假如大家有哪些 一个机会写视觉响应测试网站 吗? 假如大家能描述应用程序的外观和感觉,这直接进入大家的测试?
也在考虑这个问题,我决定看看另一个有趣的视觉测试。 在相当长的一段时间我一直的粉 测试驱动开发(TDD)办法。 它帮助我在平时的编程工作。 TDD使我可以形式化的任务,以确保所有是依据需要来达成的。
更要紧的是,它帮助我抓住不少bug才上线。 在过去的7年,我的主要焦点一直在测试智能化的大企业项目。 伴随时间的推移,我沉迷于应用智能化测试的想法用TDD办法响应网站的外观和感觉。 在多年的研究之后,我想出了 盖伦框架 ——一种工具和一种特殊的语言视觉测试。 这已经运行了一段时间,一旦语言变得足够成熟,我决订做一个实验与视觉测试驱动开发。
01-responsive-design-opt
在这篇文章中,我将详细描述这个实验并提出TDD作为前端开发的办法。 大家将着眼于新的视觉测试技术,研究怎么样充分借助它。
介绍盖伦框架
尽管新技术,盖伦框架已经被一些大公司,如eBay,SkyScanner,Gumtree和畅销书。 问,它也被用于测试 华盛顿邮报》 的网站。 除去企业公司,它也被运用于互联网工作室,等 ADCI解决方法 。 框架是开源和承载 GitHub ,所以其他人都可以参与项目和贡献代码。
在加伦的基本测试定义框架中心检查所有页面元素的地方和大小相对于彼此。 通过这种方法,你可以描述任何浏览器窗口的大小的布局,你不必用绝对定位。
A concept of visual testing with Galen framework
视觉测试和加伦的定义框架( 查询大版本 )
的 盖伦规格 语言是为了像自然英语尽量,百度竞价推广i-Markdown的方法达成的。 因此,它看着像什么? 好了,假设你想检查一个“登录”按钮坐落于一个“取消”按钮,从右侧标记的优势,他们是一致的水平。 大家可以把这句话变成盖伦规格:
login-button near: cancel-button 10px right aligned horizontally all: cancel-button
考虑另一个例子。 假如大家想要检查一个标志应该坐落于左上角的头,大约20像素的优势吗? 这是你怎么样做:
logo inside: header 17 to 22px TOP left
大家甚至可以用快捷键:
logo inside: header ~ 20 px TOP left
不少其他检查种类存在,他们的详细描述 官方文档 。 不是非常陡峭的学习曲线。 盖伦规格的结构非常简单,一旦你理解它,测试变得容易。 大家将回到我开始时提到的实验,但第一让我给你一些见解TDD作为一个整体。
测试驱动开发
TDD已经用了很久和已被证明是一个强大的办法构建坚实的应用程序。 刚开始,你或许会感觉你这是在费时撰写测试,但将来你会花更少的时间找到问题的根源。 更要紧的是,你可以专注于小单位的代码,并确保每一个单元水平好。 测试的数目将增长的主要代码,并从本质上讲,你会得到早期反馈任何问题在你的应用程序。
一个定义的视觉测试驱动开发
那样,大家怎么样为HTML和CSS TDD方法吗? 显然,这有点不同于传统TDD,测试达成 白盒 。 这就是为何我说“视觉”这个词,与盖伦框架:大家正在测试一个网站是怎么样在浏览器中呈现,而大家不是特别关心它的内部结构。 所以,这听起来更像是黑盒或灰箱测试。 在这篇文章中,我将向你展示怎么样构建一个迅速响应的web页面,撰写布局测试之前大家甚至有任何页面。 要记住的一件事是,大家的测试也将作为一个源文档,说明页面应该在任何设施。 记住这所有,让大家澄清的过程。
1.设计和测试 想象应该的页面。 写一个示意图,撰写一个测试。
2.代码 达成了HTML和CSS代码,通过测试。
3.重构 提升代码和测试。
一个基本的TDD计划( 查询大版本 )
A basic TDD scheme
大家要将整个开发过程分解成小的迭代。 另一个要紧的规则:每一个迭代中,大家将只达成所需的代码测试。 这种方法,大家将确保大家的测试覆盖率一直接近100%,大家不要分心于事情不是目前迭代中声明。 本文基于视觉TDD实验 车间购物车 。 它是一个GitHub的项目,因此你可以跟踪所有些代码更改。
这个实验
想象一下,大家决定打造一个购物车页面,大家期望它可以响应。 页面的功能在任何在线商店是一样的:用户应该可以评估他们的购物项目,进行支付或返回。
阶段1:画的需要
大家坐下来,考虑所有些细节,大家想出了这个草图:
Initial sketch of design
刚开始的草图设计( 查询大版本 )
目前看着好。 正如你可以看到的,大家有三类型型的草图:桌面,平板电脑和手机。 目前大家可以开始推行测试。
第二阶段:项目配置
对于本课程,大家无需任何特殊的IDE——任何文本编辑器都可以。 这将是很简单的。 让大家创造大家的项目文件夹, 购物车,在它创建两个文件夹: 网站和 galen-tests。 当然,当地互联网服务器配置会更好,如此大家可以通过访问该页面 http://localhost在大家的测试。 但由于大家只有一个页面,大家可以用普通文件目前,通过访问它们 文件:/ / /…url。
下载 盖伦框架和 安装它 。 盖伦框架已经为Linux和Mac安装脚本。假如你是一个Windows用户,看一看” 配置盖伦框架窗口 ”。
创建所有些文件夹,大家上面所讨论的:
shopping-cart/ |-- website/ `-- galen-tests/
目前就是如此。
3.1阶段:撰写测试
让大家想到大家怎么样分割成小的迭代工作。 大家第一会想到的是打造一个基本的页面框架:
Page skeleton sketch
页面框架草图( 查询大版本 )
这意味着,现在,大家只有五个页面上的对象:“头”,“主要”,“导航”“旗帜面板”和“页脚。 “让大家开始撰写盖伦测试骨架。 在文件夹 galen-tests,创建另一个文件夹命名 规格。 在这篇文章中,大家将保留所有盖伦规范本件。
文章整理来自互联网，转载请注明北京网站制作公司-博久网络，翻译不好，请见谅！
文章题目：响应网站网站建设及草图。转载注明
网站制作、网络营销推广公司-博久网络，是专注品牌与成效的网站建设，网络推广营销网站优化公司；服务项目有网站建设等
