转载

【开源访谈】源创会美女嘉宾司晓静谈UI自动测试

【嘉宾介绍】

司晓静，ThoughtWorks 高级咨询师，曾在多个项目中担任 UI 开发及前端架构师。

【正文】

1. 请简单地介绍一下你自己（技术背景、学习经历、工作经历）。

大家好，我叫司晓静，2012年 4月于西安电子科技大学硕士毕业，从此加入ThoughtWorks，成为了一名咨询师。在毕业之前，连前端开发是什么都不清楚，到现在3年多的时间，不仅成为了前端高级开发工程师，给其它知名公司做前端培训，也学习了很多后台语言像ruby和scala，还有一些部署的知识，也认识了开源中国还有这么多技术大牛们 ;-)。这一切都要感谢ThoughtWorks开放的环境和这么多学习的机会，让我一步步成长。

2. 和手工 UI 测试相比，UI 自动化测试的难点在哪？

UI 测试中包含对页面内容、交互和样式的测试，对于内容和交互的自动化已经有很多种做法，我这里主要想聊的是对样式的自动化 UI 测试。

大家都认为自动化 UI 测试是非常难的一件事，其实它是个纸老虎，当你真正去做它的时候，并没那么复杂。如果真要说有些坑，那应该是环境吧。

配置跑 UI 测试的环境。在本地搭 UI 测试开发环境时，会装一些依赖，中间会遇到各种问题，不同的电脑遇到的问题可能还不一样。就像装 ruby 或者其它工具也会遇到各种系统问题一样，这类问题是一次性的，解决了以后就没了。

搭一套一致的截图环境。在本地和 CI 上应该有一套一致的截图环境，保证在本地的截图和 CI 上的截图不会因环境的差异而不同。同时也要保证每个 developer 的截图环境是一致的。我们项目之前是用 vagrant 搭起来的虚拟机，里面只有一个 selenium server 和 firefox 27，专门用来给 UI 测试截图用，搭这个环境花了一些时间，之后写 UI 测试就非常快了。随着 Docker 技术的成熟，用 Docker 搭一套一致的环境变得更加容易，让自动化 UI 测试也变得更容易了。目前我还没有发现合适的工具去测试 IE。

3. 工具对于 UI 测试来讲是十分重要的，那如何在 UI 测试中选择合适的工具？

市面上有好多做自动化 UI 测试的工具，当选择工具时，有以下几点我会考虑：

看项目的技术框架。比如 Rails 项目，可以选择 rails 的 gem galting。如果项目中用了 grunt，可以用 webdrivercss。考量测试工具与项目集成的难易程度。如果为了集成它而在项目中加了一堆东西，那就得不偿失了。像galting 是基于 rspec 的，一般 rails 的项目中也都会有 rspec 测试，所以引入它就非常容易。
维护频率。去 github 上看这个工具最后提交的时间，如果很近至少说明还有人在维护它。
文档的清晰程度。好的文档可以节约学习成本，容易上手。

4. 有人认为，UI 自动化测试实施起来有诸多难点，成本比较高，所以要尽量避免使用 UI 自动化测试。对此你是怎样认为的？

首先我认为自动化 UI 测试的成本并没有大家想像的那么高。自动化 UI 测试被人传的很可怕，成本很高，那是很多人没有真正的去做过。也许在几年前可能没有合适的工具或者方法去做自动化UI测试，所以做起来很麻烦，实施和维护成本都很高，所以在大家的印象中自动化 UI 测试很复杂。但是近两年，出现了很多开源的做自动化 UI 测试的工具，也慢慢的都在成熟，所以自动化的 UI 测试不再那么神秘。

所以对新起的项目，我还是很建议写自动化的 UI 测试的，因为引入的成本远远小于手动测试 UI 的成本，并且也能帮你发现意想不到的问题，保证软件的交付质量。就比如今天发生的例子，项目中有个同事将 html5 改成了更为严格的 xhtml5，导致一个页面的不起眼角落出现了一个字符的乱码，还好在提交之前跑了一遍 UI 测试，否则这个 bug 就侥幸跑到产品环境上。

当项目变得越来越大，你会发现自动化 UI 测试的价值也越来越大，这是我以往自动化 UI 测试的实践经验。不过，如果你工作在遗留代码库上，要补 UI 测试确实要花费很大功夫，那么就要权衡所在项目人工测试成本和补 UI 测试的成本了

5.Webdrivercss 和其他测试工具相比有哪些优势？

我觉得 webdrivercss 没有比其它工具强或者弱，这些工具原理其实都一样，都是提供截图和做对比的能力。不同之处可能就在于基于不同的框架，应用不同的场景，适用不同的项目，所以我这里更想谈一下我接触过的 UI 测试工具以及它们的适用场景。

我目前接触到的 UI 测试工具有 webdrivercss, PhantomCSS, galting, viff, BackstopJS

其中 webdrivercss 和 PhantomCSS 都是基于 node 的，功能很类似，只是写测试的语法稍有不同，它们都是 javascript 语言写的 UI 测试，容易上手。当时选择 webdrivercss 就是看到它更新更频繁一些，我觉得没有好坏之分吧。galting 是1年前在 rails 项目中用的，它是 ruby 的语法，也很容易和 rspec 集成。

BackstopJS 是新出来的一个工具，是 PhantomCSS 的升级版，非常轻量，只需要配置一个 json 文件即可，而且提供了很友好的 report。

Viff + viffReport 是 ThoughtWorks 开发的开源工具，其中我还贡献了一些代码 ;-) 。它们是比较同一个网站不同环境(比如 staging 和 production 环境)下界面的差异，不像前面介绍的几个工具是比较同一个环境两次构建的差异。

6. 你觉得如何才能做出更好的 UI 测试？

怎么算是一个好的 UI 测试，这在业界应该没有一个标准吧。我这里也给不了一个标准答案，不过结合我在 ThoughtWorks 经历的几个项目，可以说下我的实践经验。

我们一般都是用自动化 UI 测试 cover 60% 左右的 UI 测试，剩下40%还是靠人工。毕竟自动化的 UI 测试有它自己的局限性，比如不太适合测动态的，也不太适合在每个浏览器上跑 UI 测试（虽然它有能力做到，但不建议这样做，成本会大大增加）。我们一般的做法是选一个用户使用相对较多的浏览器，比如 firefox，那么会基于它写自动化的 UI 测试，包含responsive。我们假设 firefox 如果没有问题，那么其它浏览器出现问题的可能性也比较小，而且我们首先也保证了大部分用户的体验是好的。剩下的浏览器我们也会人工测一下，对IE尤其会单独小心的测一下。

7. 对于从事 UI 设计和测试的人员，你有什么建议给他们？

对于 UI 设计，建议他们学些 html 和 css，这样设计的时候就能考虑到有些效果实现的复杂性及可能性了。

对于测试人员，在测试 UI 的时候，容易因为一个 pixel 与开发人员较劲。比如在测试 responsive 的页面时，开发人员根本无法做到100%还原设计。只要兼容性好，页面好看，就不要纠结是不是少了一个 pixel 了。在必要的时候，测试，开发，设计可以坐在一起讨论。

8. 你对开源中国有何意见和建议？

在西安源创会那天看到阿娇和几个妹子在那儿抬桌子，布置会场，我感觉她们好辛苦啊。以后能不能给她们配几个汉子干体力活;-) 。那天会后才得知那么一场大型的近400人的源创会，幕后只有5，6个人在操办，突然对这几个女子刮目相看，每月都要在不同的城市举办源创会，感觉弱小的身影背后确有股强大的力量，这种力量应该就是让开源走进更多城市，受益更多人的愿望吧。从活动中看到了你们的坚持和拼劲儿，相信开源中国会越来越好，祝福你们！

9. 请聊聊任何你想谈的话题。

按照我们公司的传统，新人都要做两真一假，我在这里算是个新人，也来一个吧。下面是3条关于我自己的事情，大家猜一下哪个是假的。我保证只有一条是假的。

我2012年在印度参加台球比赛，夺得冠军(DDAOWA INDOOR GAMES TOURNAMENT POOL WINNER)。
我2012年开始玩英雄联盟，在黑色玫瑰区打到白金III段位，擅长ADC，有时也打辅助。
我会 ruby、scala、javascript、html、css 等13种开发语言，还擅长跳肚皮舞，SALSA，Bachata，爵士，交谊舞等18种舞蹈（算上广场舞就19种啦）。