Gauge
Gauge，一个用于用户体验测试的框架。
演讲者：Scott Davis。邮箱：scott.davis@thoughtworks.com. Twitter：@scottdavis99。
使用介绍
| 快捷键 | 功能 |
|---|---|
| → 或 [空格] | 下一张幻灯片 |
| ← | 前一张幻灯片 |
| f | 全屏视图（开/关） |
| t | 演讲字幕（新窗口打开） |
| p | 播放/暂停当前幻灯片的演讲音频 |
| a | 自动播放音频并在结束后进入下一张幻灯片（开/关） |
下面这些快捷键可以帮您更好的使用此幻灯片：
- 按“右”或“空格”键跳到下一张幻灯片。
- 按“左”键跳到前一张幻灯片。
- 按“f”切换全屏模式。
- 按“t”在新窗口打开演讲字幕。
- 按“p”播放或暂停当前幻灯片的演讲音频。
- 按“a”自动播放音频并在结束后进入下一张幻灯片
演讲者简介
大家好！我叫Scott Davis。我现在是ThoughtWorks的首席工程师。在此之前，我在科罗拉多州丹佛市经营一家名为ThirstyHead的软件咨询公司。
我多年来一直在撰写有关Web开发的文章：比如发表在IBM的文章，出版在O'Reilly和Pragmatic Bookshelf的书籍，以及最近在O'Reilly的视频。
https://gauge.org/
今天，我想和大家谈谈Gauge，一个免费、开源的验收测试框架。
但在这之前，我认为有必要更清晰地定义一些术语。您会听到我将验收测试称为“用户体验测试”，我认为这是对我们使用Gauge想达成的目标的更好的描述。无论如何，如果您是典型的前端开发人员，这种测试将与您现在使用或编写的测试有很大的不同。
框架和单元测试
大多数现代Web框架都附带了自己的单元测试库。如果您是React的拥趸，那么您可能非常熟悉Jest。Angular开发人员使用自带的库Jasmine进行单元测试。
测试金字塔
单元测试是质量等式的关键部分。它们构成了测试金字塔的基础。 由于大多数Web开发人员自己编写代码，因此这些单元测试能让他们测试自己的代码。 它们通常运行速度快且易于编写，因为它们旨在与应用程序的其他更复杂的部分隔离运行（比如数据库和Web服务）。
我经常说单元测试是在“测试砖块，而不是建筑”。毕竟，如果您不相信砖块，您就没法相信建筑。
测试金字塔越往上，您将离源代码越远，并更接近应用程序的实际用户。 （当我们开始讨论用户体验测试时，请记住这一点。）您往里面加入的功能越多，那么相应地，测试可能会失败的地方也就越多。
如果您的组织没有可靠的测试或集成环境（前者是尽可能与生产环境一致的环境，后者是在运行集成测试时很容易反复搭建和删除的环境）， 那么这种情况下测试会变得越来越少。并不是因为测试不重要，很遗憾，这是因为它们更难可靠地运行。
单元测试
我见过太多单元测试可能或多或少并不是最严格意义上的“单元”测试。 但是任何测试都比没有测试好，所以在这里我不想批评那些隔离地不太好的测试（在理想情况下）。
但我希望我们能对单元测试的定义达成共识：单元测试是为开发人员而不是用户编写的。 从来没有一个用户问我正在演示的网站代码覆盖率有多少（尽管我希望如此），或者我为空指针异常测试了多少边界情况。 虽然用户肯定会从有可靠覆盖率的单元测试中间接获益，但我认为开发人员是单元测试最直接、最主要的受益者。
React 单元测试
这就是我说的一个例子。如果您在React中编写一个自定义的“sum”函数， 您几乎肯定有一个相应的单元测试来确保您自定义的函数能够准确地完成它所承诺的功能。 请注意，这个“sum”函数与用户可以看到的Web视图完全隔离，甚至与您其他依赖于“1加2等于3”的函数隔离。
Angular 单元测试
这是Angular中另一个稍微更实际一点的例子。 开发人员创建了一个叫“Lightswitch”的组件（component），并像所有负责任的开发人员一样，他们创建了一组相应的单元测试来单独测试这个组件。
从最终用户的角度来看，当他们勾选屏幕上“使用默认送货地址”的小组件（widget），或者“使用保存的信用卡付款”时， 他们肯定会受益于一个表现良好的Lightswitch组件，但是这些测试很明显是为了下一个接触到这部分代码库的开发人员编写的， 而不是实际上直接与Lightswitch交互的用户。
https://gauge.org/
那么，还记得Gauge吗？这就是我们开始这段对话的原因，对吧？
现在我们已经对什么是单元测试以及它们编写的对象有了更好地了解。 可以这样说：Gauge不会替换您当前选择的单元测试库。 Gauge是用于编写以用户为中心的测试，而不是以开发人员为中心的测试。 Gauge用于编写用户体验测试。
用户体验测试
用户体验测试使用的是最终用户的语言来编写，而不是使用开发人员的语言（无论是程序语言还是口语）。 用户通常会说“我想将西红柿添加到我的购物车”，而不是“我想将所选项目的UPC字符串添加到Cart组件中的那个字符串数组中。”
虽然可能有些只会从字面意义去思考的开发人员会嗤之以鼻地想，“嗯，只要测试了相应的功能，测试的语言真的重要吗？”
事实是：它确实如此，尤其是当我们谈到用户体验测试的时候。您可以将它们称为“验收”测试， 因为我们想要弄清楚的是对用户来说“可接受的”网站是什么样的：如果您不能将商品添加到购物车，这可以接受吗？ 如果您无法提交订单并实际购买物品，这可以接受吗？
因此，通过将这些测试称为“用户体验测试”，它将用户带回到对话的第一线。测试使用用户的语言来编写。 完成项目的验收最终取决于用户，而不是开发人员。
设计思维始于同理心
如果您向一个典型的开发人员询问新项目的第一步是什么，那么他们很可能会说“选择一个Web框架”或者“设置一个新的代码库”。
如果您问“设计思维”的拥趸，新项目的第一步是什么，他们会说“移情”。 把自己置身于用户的心态，了解他们在使用您的应用时想要完成的任务。
因为如果您开始用用户的语言编写测试，它会帮助您像用户一样思考。 然后，它在您大脑的一个完全不同的部分开辟了创造力。 “嗯，如果我每周都买西红柿，那要是可以重新购买上周那个装满了我常买的食物的购物车，那会不会很酷？”， “我已经将预先编写的购物清单上传到我的购物车中进行自动化单元测试 - 我想如果用户可以做同样的事情的话，他们的生活是不是会更轻松一些呢？”
GroceryWorks
这是一个虚构的杂货店的网站，它叫GroceryWorks。 当您点击时，您会看到左侧的菜单会显示不同类型的食物——豆类，坚果，意大利面，农产品等。 点击食物可以将其添加到右侧的购物车中。再次点击食物可以将其从购物车中移除。点击“购买”可以下订单或者取消订单。
Gauge Specs
Gauge中的用户体验测试由两个互补的部分组成：用Markdown编写的规范（Specification）; 和用您选择的编程语言编写的测试（等下会来具体讲测试）。
Markdown基本上是带有一些简单样式的纯文本，比如用带“#”号的标题（代表规范的名称）和带星号的列表（代表要采取的各个步骤）。 Markdown使您可以灵活地使用最终用户的语言来描述这些步骤。
Gauge 实现
您可以使用各种流行的编程语言来实现测试：JavaScript，C＃，Java，Python或者Ruby。 您在这里看到的测试用的是ThoughtWorks开发的名为Taiko的JavaScript库。我对它印象非常深刻——看看这个语法有多轻量并且可读。
您可能已经想到了，JavaScript的每一步都通过执行简单的字符串比较在Markdown中找到相应的步骤。简单的就是聪明的，不是吗？
Gauge 报告
当您运行测试时，最终会得到一个漂亮的报告，告诉您有多少规范通过了测试，有多少没有通过（如果有的话）。
结论
所以，我们学到了什么呢？
框架和单元测试
单元测试库仍然是任何负责任的开发人员工具包里的关键部分。我们希望您继续使用您选择的库。 Gauge对您使用的单元测试库没有任何意见，因为Gauge用于编写完全不同类型的测试。
设计思维始于同理心
Gauge希望您做到的第一步是移情。Gauge希望您像用户一样思考，因为他们最终将决定您的Web应用程序是否会被接受。
https://gauge.org/
Gauge用于编写用户体验测试。 把最终用户使用的语句和他们所采取的步骤记录到简单的英语Markdown文件中， 以您选择的语言实现测试，向他们展示易于阅读的报告，向他们证明您的Web应用程序完全符合他们的要求。
如果您已经在编写单元测试，那么这会帮您更进一步并开始像用户（而不是开发人员）一样思考。您准备好接受挑战了吗？
参考资料
| https://thirstyhead.com/introducing-gauge | |
| 本幻灯片 | |
| https://thirstyhead.com/groceryworks | |
| GroceryWorks：一个虚构的杂货店的网站 | |
| https://github.com/thirstyhead/groceryworks | |
| GroceryWorks的源代码 | |
| https://github.com/thirstyhead/groceryworks-test | |
| 用 Gauge 和 Taiko 为 GroceryWorks 编写的用户体验测试 | |
以下是此幻灯片的链接和GroceryWorks的源代码，以及相关的用 Gauge 和 Taiko 写的用户体验测试。
Gauge
我希望您能将 Gauge 和 Taiko 添加到您的测试工具包中。感谢您的宝贵时间！
演讲者：Scott Davis。邮箱：scott.davis@thoughtworks.com. Twitter：@scottdavis99。