【佳宾引见】

司晓静（ID：sixiaojing1988），ThoughtWorks 初级征询师，曾在多个项目中担负 UI 开发及前端架构师。

【注释】

1. 请容易地引见一下你本人（技术布景、进修阅历、任务阅历）。

大师好，我叫司晓静，2012年 4月于西安电子科技大学硕士结业，今后参加ThoughtWorks，成了一位征询师。在结业之前，连前端开发是甚么都不明白，到如今3年多的时间，不 仅成了前端初级开发工程师，给其它着名公司做前端培训，也进修了非常多后台言语像ruby和scala，另有一些安排的常识，也看法了2KB开源另有这么多 技术大牛们 ;-)。这一切都要感激ThoughtWorks开放的情况和这么多进修的时机，让我一步步生长。

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

UI 测试中包括对页面内容、交互和款式的测试，关于内容和交互的主动化曾经有非常多种做法，我这里首要想聊的是对款式的主动化 UI 测试。

大师都以为主动化 UI 测试长短常难的一件事，实在它是个纸山君，当你真正去做它的时分，并没那末庞杂。假如真要说有点坑，那应当是情况吧。

设置装备摆设跑 UI 测试的情况。在当地搭 UI 测试开发情况时，会装一些依靠，中间会碰到各类问题，分歧的电脑碰到的问题可能还纷歧样。就像装 ruby 或者其它Tools也会碰到各类系统问题一样，这类问题是一次性的，处理了当前就没了。

搭 一套一致的截图情况。在当地和 CI 上应当有一套一致的截图情况，包管在当地的截图和 CI 上的截图不会因情况的差别而分歧。同时也要包管每一个 developer 的截图情况是一致的。 我们项目之前是用 vagrant 搭起来的虚拟机，外面只要一个 selenium server 和 firefox 27，专门用来给 UI 测试截图用，搭这个情况花了一些时间，以后写 UI 测试就十分快了。跟着 Docker 技术的成熟，用 Docker 搭一套一致的情况变得愈加轻易，让主动化 UI 测试也变得更轻易了。
今朝我还没有发明适宜的Tools去测试 IE。

3. Tools关于 UI 测试来说是非常主要的，那怎么在 UI 测试当选择适宜的Tools？

市道上有很多多少做主动化 UI 测试的Tools，中选择Tools时，有以下几点我会思索：

1. 看 项目标技术框架。比方 Rails 项目，可以选择 rails 的 gem galting。假如项目顶用了 grunt，可以用 webdrivercss。考量测试Tools与项目集成的难易水平。假如为了集成它而在项目中加了一堆工具，那就得失相当了。像galting 是基于 rspec 的，普通 rails 的项目中也都会有 rspec 测试，所以引入它就十分轻易。
2. 保护频率。去 github 上看这个Tools最初提交的时间，假如很近最少阐明另有人在保护它。
3. 文档的明晰水平。好的文档可以浪费进修本钱，轻易上手。

4. 有人以为，UI 主动化测试施行起来有诸多灾点，本钱比较高，所以要尽可能防止运用 UI 主动化测试。对此你是如何以为的？

首 先我以为主动化 UI 测试的本钱并没有大师想像的那末高。主动化 UI 测试被人传的很恐怖，本钱很高，那是非常多人没有真实的去做过。或许在几年前可能没有适宜的Tools或者办法去做主动化UI测试，所以做起来很费事，施行和保护 本钱都很高，所以在大师的印象中主动化 UI 测试很庞杂。可是近两年，呈现了非常多开源的做主动化 UI 测试的Tools，也渐渐的都在成熟，所以主动化的 UI 测试不再那末奥秘。

所以对新起的项目，我仍是很建议写主动化的 UI 测试的，由于引入的本钱远远小于手动测试 UI 的本钱，而且也能帮你发明意想不到的问题，包管软件的交付质量。就比方今日发作的例子，项目中有个同事将 html5 改成烈?为严格的 xhtml5，招致一个页面的不起眼角落呈现了一个字符的乱码，还幸亏提交之前跑了一遍 UI 测试，不然这个 bug 就幸运跑到产品情况上。

当项目变得愈来愈大，你会发明主动化 UI 测试的价值也愈来愈大，这是我以往主动化 UI 测试的理论经历。不外，假如你任务在遗留代码库上，要补 UI 测试的确要破费很大工夫，那末就要衡量地点项目人工测试本钱和补 UI 测试的本钱了

5.Webdrivercss 和其他测试Tools比拟有哪些优势？

我感到 webdrivercss 没有比其它Tools强或者弱 ，这些Tools道理实在都一样，都是供给截图和做比照的才能。分歧的地方可能就在于基于分歧的框架，使用分歧的场景，实用分歧的项目，所以我这里更想谈一下我接触过的 UI 测试Tools和它们的实用场景。

我今朝接触到的 UI 测试Tools有 webdrivercss, PhantomCSS, galting, viff, BackstopJS

其 中 webdrivercss 和 PhantomCSS 都是基于 node 的，功用很相似，只是写测试的语法稍有分歧，它们都是 javascript 言语写的 UI 测试，轻易上手。事先选择 webdrivercss 就是看到它更新更频仍一些，我感到没有黑白之分吧。galting 是1年前在 rails 项目顶用的，它是 ruby 的语法，也很轻易和 rspec 集成。

BackstopJS 是新出来的一个Tools，是 PhantomCSS 的升级版，十分轻量，只需求设置装备摆设一个 json 文件便可，并且供给了很友好的 report。

Viff + viffReport 是 ThoughtWorks 开发的开源Tools，此中我还奉献了一些代码 ;-) 。 它们是比较统一个网站分歧情况(比方 staging 和 production 情况)下界面的差别，不像后面引见的几个Tools是比较统一个情况两次构建的差别。

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. 你对2KB开源有何看法和建议？

在 西安源创会那天看到阿娇和几个妹子在那儿抬桌子，安排会场，我觉得她们好辛劳啊。当前能不能给她们配几个男人干膂力活;-) 。那天会后才得知那末一场大型的近400人的源创会，幕后只要5，6个人在筹办，忽然对这几个男子另眼相看，每个月都要在分歧的城市举行源创会，觉得弱小的 身影面前确有股弱小的力气，这类力气应当就是闪开源走进更多城市，受益更多人的欲望吧。从活动中看到了你们的保持和拼劲儿，置信2KB开源会愈来愈好，祝愿 你们！

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

依照我们公司的传统，新人都要做两真一假，我在这里算是个新人，也来一个吧。下面是3条关于我本人的工作，大师猜一下哪一个是假的。我包管只要一条是假的。

1. 我2012年在印度参与台球竞赛，独占鳌头(DDAOWA INDOOR GAMES TOURNAMENT POOL WINNER)。
2. 我2012年Start玩好汉同盟，在玄色玫瑰区打到白金III段位，善于ADC，有时也打辅佐。
3. 我会 ruby、scala、javascript、html、css 等13种开发言语，还善于跳肚皮舞，SALSA，Bachata，爵士，情谊舞等18种跳舞（算上广场舞就19种啦）。

关于开源交流

开源交流是2KB开源推出的一系列针对国际开源技术开展的访谈，以文字的方法记载并传达。我们盼望开源交流能全面的展示国际开源软件、开源软件作者的近况，实在推进国际开源软件的推行与使用。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务