测试响应网站是一个艰难的任务。 直到现在,实现跨浏览器的一个稳定的和可维护的自动化解决方案和跨设备测试响应的布局已经几乎不可能。 但是如果我们有什么 一个机会写视觉响应测试网站 吗? 如果我们能描述应用程序的外观和感觉,这直接进入我们的测试?
也在考虑这个问题,我决定看看另一个有趣的视觉测试。 在相当长的一段时间我一直的粉丝 测试驱动开发(TDD)方法。 它帮助我在日常的编程工作。 TDD使我能够形式化的任务,以确保一切是根据需求来实现的。
更重要的是,它帮助我抓住很多bug才上线。 在过去的7年,我的主要焦点一直在测试自动化的大企业项目。 随着时间的推移,我沉迷于应用自动化测试的想法使用TDD方法响应网站的外观和感觉。 在多年的研究之后,我想出了 盖伦框架 ——一种工具和一种特殊的语言视觉测试。 这已经运行了一段时间,一旦语言变得足够成熟,我决定做一个实验与视觉测试驱动开发。
01-responsive-design-opt
在这篇文章中,我将详细描述这个实验并提出TDD作为前端开发的方法。 我们将着眼于新的视觉测试技术,研究如何充分利用它。
介绍盖伦框架
尽管新技术,盖伦框架已经被一些大公司,如eBay,SkyScanner,Gumtree和畅销书。 问,它也被用于测试 华盛顿邮报》 的网站。 除了企业公司,它也被运用于网络工作室,等 ADCI解决方案 。 框架是开源和承载 GitHub ,所以任何人都可以参与项目和贡献代码。
在加伦的基本测试概念框架中心检查所有页面元素的位置和大小相对于彼此。 通过这种方式,您可以描述任何浏览器窗口的大小的布局,你不必使用绝对定位。
A concept of visual testing with Galen Framework
视觉检测和加伦的概念框架( 查看大版本 )
的 盖伦规格 语言是为了像自然英语尽可能,semi-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,创建另一个文件夹命名 规格。 在这篇文章中,我们将保留所有盖伦规范文件。
文章整理来自网络，转载请注明北京网站建设公司-北京传诚信，翻译不好，请见谅！
