More Related Content Similar to 前端测试之淘宝实践 (20) 2. who am I ?
• ( )
• 2008 ~ 2011 @
• @chenchengpro
• www.chencheng.org
13. I’m a
Driver
http://www.flickr.com/photos/jwlphotography/541946201/in/faves-brendaleann/
22. ?
• JavaScript
•
• Jasmine
23. ?
• JavaScript
•
• Jasmine
QUnit,YUITest, ...
34. Yeti TestSwarm
Tutti
JSTestDriver
35. Yeti TestSwarm
Tutti
JSTestDriver
Selenium AutoMan
Watir
Editor's Notes \n\n\n\n\n\n\n大家好，我是来自淘宝 UED 的云谦，下面我会分享淘宝在前端测试方面的一些经验。/* 正如背景图里的飞机在正式上天飞行之前，要做风洞测试一样，我觉得前端代码在正式上线前也应该做相应的测试。*/\n==\n1. 注意节奏、自信、气场、声音大点、关闭手机\n2. 关闭所有额外程序，打开视频文件夹\n 先自我介绍下，我在淘宝的花名是云谦，真名是陈成。目前为止在淘宝待了三年，然后在今年上半年花了很多时间研究前端方面的测试，下面还有我的推特和博客，非常欢迎各种形式的交流。\n 在我正式开始之前，我想先作个了解。不知道在座的各位朋友有没有这样的经历? 当你负责一个非常重要的页面或是应用的时候，(点) 会不会有上线恐惧症？也就是说，当你把一切都做好，并且也都检查过了之后，会不会还是在上线的时候还是比较担心，担心一上线，啪，一个意料不到的地方出错了。。。有没有这样经历的同学? 请举手。(恩，还不少。谢谢！) 其实我也有过类似的经历，之前在维护淘宝首页的时候，每次上线都提心吊胆的，特别是淘宝首页是没有测试人员支持的，全靠我们自己测试。一个不小心，就可能会出现类似这样的情况。\n 比如有一次是这个浮出层里的文字乱了，这个地方很隐蔽，非常容易会被我们忽略；还是一次是第一张焦点图出错，大家都知道淘宝首页的焦点图很值钱，当时因为改的是另一个功能点，信心满满的，就没仔细检查广告，结果就是一个线上故障，造成了客户的损失。。(停顿) 那我们应该如果避免类似这种情况的发生呢? 其中一个方法大家应该都知道，就是我们今天的主题 —— 前端测试。但总不能还停留在手工测试的那个时代，所以就需要一些自动化的测试工具。\n 比如有一次是这个浮出层里的文字乱了，这个地方很隐蔽，非常容易会被我们忽略；还是一次是第一张焦点图出错，大家都知道淘宝首页的焦点图很值钱，当时因为改的是另一个功能点，信心满满的，就没仔细检查广告，结果就是一个线上故障，造成了客户的损失。。(停顿) 那我们应该如果避免类似这种情况的发生呢? 其中一个方法大家应该都知道，就是我们今天的主题 —— 前端测试。但总不能还停留在手工测试的那个时代，所以就需要一些自动化的测试工具。\n 好，这就是我今天要分享的内容，包含三个方面，分别是 CloudyRun, UI 测试，以及 iCapt 。其中 CloudyRun 和 iCapt 是我们自己开发的两个工具，CloudyRun 用于驱动测试的运行，iCapt 是一个跨平台、跨浏览器的截图工具，UI 测试部分我会分享我们在这方面所用到的两种方法。 (点) 这三部分的时间大致是这样安排的，22 分钟、10 分钟和 4 分钟。\n 我先来介绍 CloudyRun，/*CloudyRun 的前身其实是 CloudyTest，后来我们觉得叫 Test 会限制扩展他的思维，(点) 除了 Run 测试之外，他应该还可以 Run 更多的东西。(停顿) 虽然他现在在做着 Test 的事情，但是却有着一颗 Run 的心。*/\n 首先，CloudyRun 是一个测试的驱动工具，而不是测试框架。测试驱动工具和测试框架的区别，简单来说，测试框架是用来帮助我们写测试用例的，而测试驱动工具则是用来让测试用例在各个平台跑起来。\n \n 这是 CloudyRun 的界面，如果大家有带手机或电脑的话，可以输入下面的地址 cloudyrun.com 进行现场体验。(因为没有进行过压力测试，所以很有可能会被大家跑挂。。) (停顿) 这是命令输入框、已连接的浏览器客户端、输出信息、查看任务详情，以及任务队列。\n 这是 CloudyRun 的界面，如果大家有带手机或电脑的话，可以输入下面的地址 cloudyrun.com 进行现场体验。(因为没有进行过压力测试，所以很有可能会被大家跑挂。。) (停顿) 这是命令输入框、已连接的浏览器客户端、输出信息、查看任务详情，以及任务队列。\n 这是 CloudyRun 的界面，如果大家有带手机或电脑的话，可以输入下面的地址 cloudyrun.com 进行现场体验。(因为没有进行过压力测试，所以很有可能会被大家跑挂。。) (停顿) 这是命令输入框、已连接的浏览器客户端、输出信息、查看任务详情，以及任务队列。\n 这是 CloudyRun 的界面，如果大家有带手机或电脑的话，可以输入下面的地址 cloudyrun.com 进行现场体验。(因为没有进行过压力测试，所以很有可能会被大家跑挂。。) (停顿) 这是命令输入框、已连接的浏览器客户端、输出信息、查看任务详情，以及任务队列。\n 这是 CloudyRun 的界面，如果大家有带手机或电脑的话，可以输入下面的地址 cloudyrun.com 进行现场体验。(因为没有进行过压力测试，所以很有可能会被大家跑挂。。) (停顿) 这是命令输入框、已连接的浏览器客户端、输出信息、查看任务详情，以及任务队列。\n 我现在来介绍下他具体都能做什么，先看一个视频 Demo。因为考虑到会场的网速可能会不给力，所以提前直接录制成了视频。。\n==\n1. 介绍界面\n2. 先来看 CloudyRun 能做的第一件事，就是 JavaScript 命令的测试。\n3. 我们再来看下 CloudyRun 能做的第二件事，指定返回值的测试。\n4. 然后，因为淘宝的同学用 Jasmine 框架比较多，所以 CloudyRun 对 Jasmine 做了额外的一层封装。\n\n 所以，CloudyRun 能做什么呢? 正如刚才我们所看到的，CloudyRun 可以跑 JavaScript 命令测试，指定返回值的测试、Jasmine 测试框架的用例测试。当然，他不仅限于 Jasmine 框架，其他的比如 QUnit, YUITest 等框架只需稍作开发，就可以很好的支持进来，大家有兴趣的话，欢迎一起参与进来。(停顿) 那我们还有看到一个他的特性，就是跨平台，无需任何额外开发，就可以在 iPhone，Andriad 等等的平台上来执行测试。\n 那么他还能做什么呢？请看第二个视频 Demo。\n==\n1. 因为我们在淘宝的全局脚本里部署了 cloudyrun 的客户端脚本，所以就可以通过在 url 里加参数的形式指定要执行的测试用例。\n 这是现在我每天会收到的测试结果邮件。\n 每天早上来过一遍应用的状态，会让我们心里更加踏实。\n \n \n \n 这是 CloudyRun 的原理图，大家用过 Socket.IO 的话应该会觉得他的实现其实非常简单。分成 3 个部分，控制台负责任务的输入输出等各种操作，客户端直接是各种平台的浏览器，然后服务器端则处在中间，通过 Socket 把他们连接起来。任务是在控制台发起的，依次传递给服务器端和客户端，客户端会打开一个 iframe 或者新开一个窗口去执行。\n 这是 CloudyRun 的原理图，大家用过 Socket.IO 的话应该会觉得他的实现其实非常简单。分成 3 个部分，控制台负责任务的输入输出等各种操作，客户端直接是各种平台的浏览器，然后服务器端则处在中间，通过 Socket 把他们连接起来。任务是在控制台发起的，依次传递给服务器端和客户端，客户端会打开一个 iframe 或者新开一个窗口去执行。\n 其实说到这里，大家可能还会有疑问：为什么要做 CloudyRun，业界的工具难道不能满足你的需求吗? 其实我们也考察过一些工具，我把他们分成两类，(点) 一类是以 Yeti 为代表的工具，客户端直接是浏览器，他们现在执行的更多的是单元测试；(点) 另一类是以 Selenium 为代表的工具，客户端是 ruby 或者 python 脚本，调用浏览器去执行测试，他们现在执行的更多的是功能测试；CloudyRun 其实是把他们的一些优点集合起来，做功能测试，做单元测试，做测试自动化，并且测试脚本都是用我们熟悉的 JS 来写。\n\n==\n\n我们来比较下业界现有的测试驱动工具，首先是这些，JSTestDriver, ...., 他们的客户端其实都直接是浏览器，驱动浏览器来跑网页的测试，这种方式有个突出的优点，就是天生的跨平台，跨浏览器。而从现有情况来看，他们执行的更多的是单元测试。\n另一组，Selenium, Watir 还有淘宝测试团队研发的 AutoMan，他们的客户端是机器上的 ruby 或 python 等脚本，通过脚本驱动浏览器的打开和关闭来执行页面测试，此外他们还有定时执行\\测试集等功能。目前来看，他们执行的更多的是功能测试，即模拟用户点击，然后进行值的校验。\n而 CloudyRun 则是将他们的功能组合到了一起。\n 其实说到这里，大家可能还会有疑问：为什么要做 CloudyRun，业界的工具难道不能满足你的需求吗? 其实我们也考察过一些工具，我把他们分成两类，(点) 一类是以 Yeti 为代表的工具，客户端直接是浏览器，他们现在执行的更多的是单元测试；(点) 另一类是以 Selenium 为代表的工具，客户端是 ruby 或者 python 脚本，调用浏览器去执行测试，他们现在执行的更多的是功能测试；CloudyRun 其实是把他们的一些优点集合起来，做功能测试，做单元测试，做测试自动化，并且测试脚本都是用我们熟悉的 JS 来写。\n\n==\n\n我们来比较下业界现有的测试驱动工具，首先是这些，JSTestDriver, ...., 他们的客户端其实都直接是浏览器，驱动浏览器来跑网页的测试，这种方式有个突出的优点，就是天生的跨平台，跨浏览器。而从现有情况来看，他们执行的更多的是单元测试。\n另一组，Selenium, Watir 还有淘宝测试团队研发的 AutoMan，他们的客户端是机器上的 ruby 或 python 等脚本，通过脚本驱动浏览器的打开和关闭来执行页面测试，此外他们还有定时执行\\测试集等功能。目前来看，他们执行的更多的是功能测试，即模拟用户点击，然后进行值的校验。\n而 CloudyRun 则是将他们的功能组合到了一起。\n \n \n \n \n \n 大家在小时候，父母有这样给你量过身高吗? 今天在墙壁上划条线，这条线就是基准线，然后过段时间再去比比看有没有长高。 对于布局固定的页面来说，他们的布局很少会有变化，这样我们就可以应用这个基准的概念，生成一份基准布局，然后过段时间执行测试的时候，拿当前页面的布局去和基准布局进行比较，看一下两者之间有没有差异，这就是这种布局类型的测试方法的原理。(停顿) 掌握这个原理之后，之后的就比较简单了。/*那布局数据应该怎么生成呢? 我们知道页面是有一个个 DOM 元素组成的，而要定位一个元素在页面的位置，只要知道他在那里以及他自身的宽高即可。*/(点)\n\n==\n\n对淘宝首页进行 UI 测试：\n1. 生成布局数据 (exclude div[id*=iCast])\nhttp://www.taobao.com/?__cloudyrun__=ui/build\n2. 复制数据到测试用例(test/test-shop.js)，并调用 jasmine 扩展执行测试\nhttp://www.taobao.com/?__cloudyrun__=http://test.taobao.com/code/test/cloudyrun/fp.js\n\n 这是布局数据里的最小单元，然后很多这样的单元就组成了页面的布局数据。\n 我们再来看一个 视频 DEMO。\n==\n1. 我在 CloudyRun 里写了一个小工具，用来生成布局的基准数据。\n2. 我们来看下淘宝首页的例子。对于淘宝首页来说，我们只要确保 body 下两层的元素布局 ok，就可以说淘宝首页的布局总体上没有问题。\n3. 好，那我们现在就把这个基准数据复制到测试用例里，然后用一个 Jasmine 的扩展方法去执行比较。\n4. 但是呢，我们知道，IE6 和 Chrome 下的布局肯定会有偏差，我们现在就来模拟这个偏差。\n5. (结尾)，这个就是布局固定这种类型的一个测试方法。\n 对于不固定的布局，我们的测试方法也要灵活一点。比如说，对于这样的上中下三层布局，(点) 我们保证这三层在左边界的一条线上，并且他们的宽度相等，是否就可以说这个布局是 OK 了呢?\n 对于不固定的布局，我们的测试方法也要灵活一点。比如说，对于这样的上中下三层布局，(点) 我们保证这三层在左边界的一条线上，并且他们的宽度相等，是否就可以说这个布局是 OK 了呢?\n 同理，对于这种左右两栏式的布局，是否也可以说，(点) 只要保证左右两栏的上边界在同一条线上，就可以说明这个布局没有乱呢? (点) 比如这种情况的出现。。\n 同理，对于这种左右两栏式的布局，是否也可以说，(点) 只要保证左右两栏的上边界在同一条线上，就可以说明这个布局没有乱呢? (点) 比如这种情况的出现。。\n 我们来看一个具体的例子，这是淘宝的一个宝贝详情页。我们现在就用刚才所说的方法来写一下测试用例的代码。(点) 这里我们可以看到，有两个 Jasmine 的扩展方法，一个是水平据顶对齐，一个是垂直居左对齐，当然还是一些其他的扩展。然后在这个例子里，我们期望 id 为 bd 的元素下面的侧边栏和主栏是水平居顶对齐的，并且期望侧边栏下的 class 为 box 的元素垂直居左对齐。(停顿) 这样，就可以确保这个页面的整体布局是 ok 的。(停顿) 这就是我要介绍的两种布局的两种测试方法。\n 下面再来看一个视频 Demo 。\n 好，我们最后再花点时间来看下一个小工具，叫 iCapt 。我想大家如果有做过页面的话，可能都有这样的经历，每当你写玩页面之后，都需要确保在所有浏览器下展示正常后，才能发布上线。这时候，大家会不会很希望有个工具，能让你只输入一个 URL，就返回所有浏览器下的截图呢? (停顿) 我不知道现在线上有没有这种工具，但是我没有找到简单易用的，(大家如果有这方面的信息请告诉我) 那所以呢，就和另外一个同事 季札 一起花了几个下午的时间写了这个工具。。(停顿)，他本身很简单，部署也很简单，只需要在客户机上跑一个 Python 脚本。\n\n最后，我花一点时间介绍一个很小的工具，是我和另一位同事季札一起花了几个下午的时间写的。\n 不多说，来最后一个视频 Demo 吧。\n OK，这些就是我今天要介绍的全部内容。(停顿) 不知道大家有没有什么问题，请举手。\n\n==\n\n我觉得这个问题问得非常好，其实这个也是一个比较困难的问题。\n
