1. 试玩前端测试的前因后果
made by

2. 试玩前端测试的前因后果
• 前端测试包含哪些内容
• 为何要尝试前端测试
• 哪些产品成了小白鼠
• 如何测试产品的功能
• 如何实现自动化测试
• 尝试中遇到的一些问题
• 前端测试带来的一些益处

3. 前端测试包含哪些内容

4. 为何要尝试前端测试
• 前端业务组件/模块中公开的API，现有测试无法直接进行检验；
• 完全由JS实现的功能（如JS异步获取数据并渲染），现有测试无法轻易检验；
• 测试资源紧张时，一些小需求未经测试便被发布上线，容易导致线上故障；
• 产品上线前进行过检验，上线后却未及时复检，不能实时获知产品质量状况；
• 测试人员没有对线上的产品进行过自动化测试。

5. 哪些产品成了小白鼠
• 我要买商品分类
• 宝贝详情
• 已买到宝贝
• 已卖出宝贝（正在编写用例）

6. 实例：我要买 – 菜单展示
功能简介：左侧快捷菜单根据屏幕尺寸进行展示。
功能逻辑：当屏幕可用宽度大于1024px，高度大于等于540px时，显示菜单。
测试方式：检验浏览器的表现结果

7. 实例：我要买 – 您最近爱逛
功能简介：客户端记录用户浏览过的类目信息，下次访问时展示给用户。
功能逻辑：
– 客户端有记录时，显示”您最近爱逛”内容块；
– 不重复记录；
– 最多记录8条类目信息；
– 记录量超出上限时，先进先出；
测试方式：API测试 -- Buy.ViewedCat.cacheViewedCats

8. 实例：我要买 – 您最近爱逛
测试数据：

9. 实例：我要买 – 您最近爱逛
测试用例：

10. 实例：Detail – tabbar切换
功能简介： 通过panelId或tab索引值切换到目标tab和panel。
测试方式： API测试 -- TShop.mods.TabBar.switchTo
测试用例：

11. 实例：Detail – 淘金币价
功能简介： JS异步获取价格数据并渲染
功能逻辑： 淘金币不够时/数据异常时，不展示；用户登录后，高亮展示；
测试方式： 测试API -- TShop.mods.SKU.TaoCoin.show
测试数据：

12. 实例：Detail – 淘金币价
测试用例：

13. 实例：已买到– 筛选器toggle
功能简介：点击触点后，展开/收起筛选器
测试方式：检验浏览器的表现结果
测试用例：

14. 实例：已买到– 批量还原订单
功能简介：删除订单的逆操作
功能逻辑：还原成功后，从DOM中移除所有订单
测试方式：检验浏览器的表现结果
测试用例：

15. 实例：已卖出– 全选/反选
测试方式：检验浏览器的表现结果

16. 实例：已卖出– 批量备忘
功能简介：选中订单后，点击触点，提交表单到备忘批量设置页面
测试方式：检验浏览器的表现结果

17. 实例：已卖出– 查看备忘
功能简介：鼠标移到触点上，在浮层中显示备忘，移开时，则隐藏。
测试方式：检验浏览器的表现结果
测试用例：

18. 如何实现自动化测试（1）
1. 访问http://wiki.ued.taobao.net:8080/console
2. 输入:group命令

19. 如何实现自动化测试（2）
3. 运行:group命令，打开用例集编辑层。

20. 如何实现自动化测试（3）
4. 编辑用例信息，然后提交即可。
commands：”:run pageUrl?__cloudyrun__=caseUrl&timeout=xx”

21. 尝试中遇到的一些问题（1）
问题：部分产品需要登录才能访问，对页面进行自动化测试时，需要自动登录。
解决：jasmine.taobao.config = {login: “用户名:密码”}
说明：
– 加在用例文件的最前面即可；
– 只能使用daily账户，这意味着：只能在daily下进行测试。

22. 尝试中遇到的一些问题（2）
问题：部分产品，在daily中才能构造出各种测试数据，无法测试线上。
解决：在daily中进行自动化测试。
说明：
– daily环境很容易挂掉；
– 在daily中，单个账户下，不一定能构造出所有数据。

23. 尝试中遇到的一些问题（3）
问题：alert对话框会阻止用例的继续执行。
解决：在编写用例时，绕过会弹出alert的情况。
说明：
– 绕过，意味着功能点中的一些情况，无法被测试到；
– 因JS执行时间过长而弹出的对话框，用例中无法绕过。

24. 尝试中遇到的一些问题（4）
问题：部分功能不可测试，或无法完整测试。
解决：让用例覆盖可测试的场景，不可测试的，人肉测试。
例子：
– 已卖出宝贝，查看买家订单（通过JS提交表单，表单提交前后无变化，
无法判断是否提交了表单）；
– 已卖出宝贝，修改价格（点击触点后，弹出对话框，对话框中加载iframe，
iframe中的操作无法测试）；

25. 尝试中遇到的一些问题（5）
问题：部 分功能点不适合进行自动化测试。
解决：人肉测试。
例子：
– 已买到宝贝，永久删除（订单有限，用例多次运行后，订单会被删光）；
– 已卖出宝贝，延长收货时间（点击确定，操作成功后，会弹出alert）；

26. 前端测试带来的一些益处
• 通过定时的自动化测试，可以更早地发现问题，为解决问题赢得时间；
• 前端测试可以弥补专业测试的一些不足（比如API测试）；
• 先写用例再重构，能有效减少bug量，避免丢失功能点；
• 编写用例，有利于快速熟悉业务，有利于业务信息的沉淀；
• 日常开发多了一点思考：功能点是否可测试；
• 个人知识面的延伸：除了关注如何开发，还关注如何测试。

27. Q&A