前端测试在路上解读.pptx

前端测试 赵勇 / 淘宝UED / 前端 / 遇春（花名） 个人介绍： 前端测试 前端 测试 Why 找一个 说服自己的理由 RIA Base on Browser Heavy Javascript Html 5 产品的变化 Server Browser Server Browser 开发量的变化 前端质量 内部质量 可维护性 性能 设计模式 开发效率 外部质量 功能 界面 前端关注点的变化 前端团队的变化 游击队 正规军 测试同学： “前端的问题越来越多了” 别再找理由了 先搞起来再说 前端 测试 How 前端测试目标 产品界面 功能可用 性能高效稳定 代码可维护性强 声音 “前端不好测” “界面老是改，改完用例就没用了” “单元测试不好做，很难隔离，不好做mock” “业内没有成熟的实践” “项目太紧，没时间” “前端测试性价比不高” 前端的痛 Ajax 闭包 Dom 异步 匿名函数 浏览器 兼容性 面向过程 性能 分而治之 Ajax 闭包 Dom 异步 匿名函数 浏览器 兼容性 面向过程 性能 Dom测试 单元测试 功能测试 性能测试 Dom测试 结构，布局 兼容性 单元测试 对象属性，方法 过程函数 功能测试 过程 性能测试 动态执行响应 前端测试 DOM测试 测试目标 DOM结构完整 模块布局样式无错乱 浏览器兼容性 谁动了我的Tag /div 加个样式，Ie6乱掉了 开发html嵌套时，标签没闭合 某个元素的样式名写错了 … 还有 Demo /sample/ershou.html#testOn 代码 describe(UI-logo,function(){ var logo = KISSY.get(#logo); it(exist,function(){ expect(logo).toBeNode(); }); }) 代码 describe(UI-logo,function(){ var logo = KISSY.one(#logo); it(position is right,function(){ var oPos = (KISSY.DOM.viewportWidth() – 990)/2; expect(logo.width()).toNear(177); expect(logo.height()).toNear(48); expect(logo.offset().left).toNear(oPos); expect(logo.offset().top).toNear(47); }); }) 代码 describe(UI-新鲜货,function(){ var freshItem = KISSY.one(#J_FreshItems); it(childNode is right,function(){ expect(freshItem.children().length).toBe(2); }); }) 功能测试 功能测试目标 功能可用 交互过程正确 Demo /sample/ershou.html#testOn 代码 describe(功能-城市切换, function(){ var cityTrigger = KISSY.get(.J_CityPicker), cityPopup = KISSY.get(.more-city-bd); it(打开地区浮出层, function(){ jasmine.simulate(cityTrigger, mouseover); expect(cityPopup).toBeVisible(); }); }) 性能测试 性能测试目标 同步执行耗时 异步响应耗时 Demo /sample/ershou.html#testOn 代码 describe(功能-城市切换, function(){ var cityTrigger = KISSY.one(.J_CityPicker).getDOMNode(), cityPopup = KISSY.one(.more-city-bd).getDOMNode(); it(打开速度, function(){ var start = +new Date(); jasmine.simulate(cityTrigger, mouseover); var end = +new Date(); var runtime = end-start; expect(cityPopup).toBeVisible(); expect(runtime).toBeLessThan(500); }); }) 代码 describe(