前端测试之淘宝实践

4,153 views

Published on

1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total views
4,153
On SlideShare
0
From Embeds
0
Number of Embeds
631
Actions
Shares
0
Downloads
110
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide
  • \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
  • 前端测试之淘宝实践

    1. 1. UED
    2. 2. who am I ?• ( )• 2008 ~ 2011 @• @chenchengpro• www.chencheng.org
    3. 3. ?
    4. 4. agenda:CloudyRunUIiCapt
    5. 5. agenda:CloudyRun 20mUI 10miCapt 5m
    6. 6. CloudyRun
    7. 7. CloudyRun
    8. 8. http://www.flickr.com/photos/jwlphotography/541946201/in/faves-brendaleann/
    9. 9. I’m a Driverhttp://www.flickr.com/photos/jwlphotography/541946201/in/faves-brendaleann/
    10. 10. CloudyRun ?••
    11. 11. http://cloudyrun.com/
    12. 12. http://cloudyrun.com/
    13. 13. http://cloudyrun.com/
    14. 14. http://cloudyrun.com/
    15. 15. http://cloudyrun.com/
    16. 16. http://cloudyrun.com/
    17. 17. ?
    18. 18. ?• JavaScript•• Jasmine
    19. 19. ?• JavaScript•• Jasmine QUnit,YUITest, ...
    20. 20. ?
    21. 21. ?•••
    22. 22. •••
    23. 23. •••
    24. 24. •••
    25. 25. console server client
    26. 26. console server client
    27. 27. Yeti TestSwarm Tutti JSTestDriver
    28. 28. Yeti TestSwarm Tutti JSTestDriverSelenium AutoMan Watir
    29. 29. UI
    30. 30. ••
    31. 31. “#site-nav”: { left: 0, top: 0, width: 1000, height: 24}
    32. 32. headercontentfooter
    33. 33. widthheadercontentfooter
    34. 34. side main
    35. 35. side main
    36. 36. side main
    37. 37. iCapt
    38. 38. iCapt
    39. 39. Thank you!Githubhttps://github.com/sorrycc/cloudyrunhttps://github.com/sorrycc/icapt

    ×