SlideShare a Scribd company logo
试玩前端测试的前因后果
       made by
试玩前端测试的前因后果
• 前端测试包含哪些内容

• 为何要尝试前端测试

• 哪些产品成了小白鼠

• 如何测试产品的功能

• 如何实现自动化测试

• 尝试中遇到的一些问题

• 前端测试带来的一些益处
前端测试包含哪些内容
为何要尝试前端测试
•   前端业务组件/模块中公开的API,现有测试无法直接进行检验;


•   完全由JS实现的功能(如JS异步获取数据并渲染),现有测试无法轻易检验;


•   测试资源紧张时,一些小需求未经测试便被发布上线,容易导致线上故障;


•   产品上线前进行过检验,上线后却未及时复检,不能实时获知产品质量状况;

•   测试人员没有对线上的产品进行过自动化测试。
哪些产品成了小白鼠
•   我要买商品分类


•   宝贝详情


•   已买到宝贝


•   已卖出宝贝(正在编写用例)
实例:我要买 – 菜单展示
功能简介:左侧快捷菜单根据屏幕尺寸进行展示。

功能逻辑:当屏幕可用宽度大于1024px,高度大于等于540px时,显示菜单。

测试方式:检验浏览器的表现结果
实例:我要买 – 您最近爱逛
功能简介:客户端记录用户浏览过的类目信息,下次访问时展示给用户。

功能逻辑:

   – 客户端有记录时,显示”您最近爱逛”内容块;

   – 不重复记录;

   – 最多记录8条类目信息;

   – 记录量超出上限时,先进先出;

测试方式:API测试 -- Buy.ViewedCat.cacheViewedCats
实例:我要买 – 您最近爱逛
测试数据:
实例:我要买 – 您最近爱逛
测试用例:
实例:Detail – tabbar切换
功能简介: 通过panelId或tab索引值切换到目标tab和panel。

测试方式: API测试 -- TShop.mods.TabBar.switchTo

测试用例:
实例:Detail – 淘金币价
功能简介: JS异步获取价格数据并渲染

功能逻辑: 淘金币不够时/数据异常时,不展示;用户登录后,高亮展示;

测试方式: 测试API -- TShop.mods.SKU.TaoCoin.show

测试数据:
实例:Detail – 淘金币价
测试用例:
实例:已买到– 筛选器toggle
功能简介:点击触点后,展开/收起筛选器

测试方式:检验浏览器的表现结果

测试用例:
实例:已买到– 批量还原订单
功能简介:删除订单的逆操作

功能逻辑:还原成功后,从DOM中移除所有订单

测试方式:检验浏览器的表现结果

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

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

测试方式:检验浏览器的表现结果

测试用例:
如何实现自动化测试(1)
1. 访问http://wiki.ued.taobao.net:8080/console

2. 输入:group命令
如何实现自动化测试(2)
3. 运行:group命令,打开用例集编辑层。
如何实现自动化测试(3)
4. 编辑用例信息,然后提交即可。




commands:”:run pageUrl?__cloudyrun__=caseUrl&timeout=xx”
尝试中遇到的一些问题(1)
问题:部分产品需要登录才能访问,对页面进行自动化测试时,需要自动登录。

解决:jasmine.taobao.config = {login: “用户名:密码”}

说明:

   – 加在用例文件的最前面即可;

   – 只能使用daily账户,这意味着:只能在daily下进行测试。
尝试中遇到的一些问题(2)
问题:部分产品,在daily中才能构造出各种测试数据,无法测试线上。

解决:在daily中进行自动化测试。

说明:

  – daily环境很容易挂掉;

  – 在daily中,单个账户下,不一定能构造出所有数据。
尝试中遇到的一些问题(3)
问题:alert对话框会阻止用例的继续执行。

解决:在编写用例时,绕过会弹出alert的情况。

说明:

  – 绕过,意味着功能点中的一些情况,无法被测试到;

  – 因JS执行时间过长而弹出的对话框,用例中无法绕过。
尝试中遇到的一些问题(4)
问题:部分功能不可测试,或无法完整测试。

解决:让用例覆盖可测试的场景,不可测试的,人肉测试。

例子:

  – 已卖出宝贝,查看买家订单(通过JS提交表单,表单提交前后无变化,

      无法判断是否提交了表单);

  – 已卖出宝贝,修改价格(点击触点后,弹出对话框,对话框中加载iframe,

      iframe中的操作无法测试);
尝试中遇到的一些问题(5)
问题:部 分功能点不适合进行自动化测试。

解决:人肉测试。

例子:

  – 已买到宝贝,永久删除(订单有限,用例多次运行后,订单会被删光);

  – 已卖出宝贝,延长收货时间(点击确定,操作成功后,会弹出alert);
前端测试带来的一些益处
•   通过定时的自动化测试,可以更早地发现问题,为解决问题赢得时间;

•   前端测试可以弥补专业测试的一些不足(比如API测试);

•   先写用例再重构,能有效减少bug量,避免丢失功能点;

•   编写用例,有利于快速熟悉业务,有利于业务信息的沉淀;

•   日常开发多了一点思考:功能点是否可测试;

•   个人知识面的延伸:除了关注如何开发,还关注如何测试。
Q&A

More Related Content

PDF
Beta testing with CI
Liyao Chen
 
PDF
敏捷自动化测试中的教训 45min 中文
Shuyong Lin
 
PDF
Angular 深入淺出測試篇:整合測試入門
志龍 陳
 
PDF
Angular 深入淺出測試篇:單元測試入門
志龍 陳
 
PDF
Angular 深入淺出測試篇:新手入門
志龍 陳
 
PPTX
例外處理與單元測試
國昭 張
 
PPTX
單元測試
國昭 張
 
PDF
Angular Testing for Book Club Online of Angular Taiwan
志龍 陳
 
Beta testing with CI
Liyao Chen
 
敏捷自动化测试中的教训 45min 中文
Shuyong Lin
 
Angular 深入淺出測試篇:整合測試入門
志龍 陳
 
Angular 深入淺出測試篇:單元測試入門
志龍 陳
 
Angular 深入淺出測試篇:新手入門
志龍 陳
 
例外處理與單元測試
國昭 張
 
單元測試
國昭 張
 
Angular Testing for Book Club Online of Angular Taiwan
志龍 陳
 

What's hot (13)

PDF
Angular 深入淺出測試篇:E2E測試入門
志龍 陳
 
PDF
网站前端代码静态检查工具综述
pop2008
 
PDF
网站前端代码静态检查工具研究
pop2008
 
PDF
例外處理實務
Jeff Chu
 
PPTX
Selenium與動態網頁爬蟲應用
Yanwei Liu
 
PPT
quick_orm 简介
tyler4long
 
PPTX
AUGT 社群小聚 - Angular Optimize Performance NgZone 的原理與應用
Jeff Wu
 
PDF
Angular從入門到實戰(二)
志龍 陳
 
PDF
Schematics 實戰
志龍 陳
 
PPTX
手机自动化测试解决方案
懿民 施
 
PDF
使用 Pytest 進行單元測試 (PyCon TW 2021)
Max Lai
 
PDF
敏捷测试中的工具实现
drewz lin
 
PPTX
Angular 2 表單的處理與驗證
Jeff Wu
 
Angular 深入淺出測試篇:E2E測試入門
志龍 陳
 
网站前端代码静态检查工具综述
pop2008
 
网站前端代码静态检查工具研究
pop2008
 
例外處理實務
Jeff Chu
 
Selenium與動態網頁爬蟲應用
Yanwei Liu
 
quick_orm 简介
tyler4long
 
AUGT 社群小聚 - Angular Optimize Performance NgZone 的原理與應用
Jeff Wu
 
Angular從入門到實戰(二)
志龍 陳
 
Schematics 實戰
志龍 陳
 
手机自动化测试解决方案
懿民 施
 
使用 Pytest 進行單元測試 (PyCon TW 2021)
Max Lai
 
敏捷测试中的工具实现
drewz lin
 
Angular 2 表單的處理與驗證
Jeff Wu
 
Ad

Viewers also liked (18)

PPSX
Bananaleaf Project
Ruttanapong Junsiri
 
DOCX
โครงงาน
Ruttanapong Junsiri
 
PPTX
January 2015 Medical Coding Q&A Webinar
Laureen Jandroep
 
PPTX
นำเสนอโครงงานคอมพ วเตอร (1)
Ruttanapong Junsiri
 
PPTX
June 2016 Medical Coding Q&A Webinar
Laureen Jandroep
 
DOCX
Ruttanapong
Ruttanapong Junsiri
 
PPTX
November 2015 Medical Coding Q&A Webinar
Laureen Jandroep
 
DOCX
Ruttanapong
Ruttanapong Junsiri
 
DOCX
โครงงาน
Ruttanapong Junsiri
 
PPTX
July 2016 Medical Coding Q&A Webinar
Laureen Jandroep
 
PPTX
August 2015 Medical Coding Q&A Webinar
Laureen Jandroep
 
PPTX
April 2015 Medical Coding Q&A Webinar
Laureen Jandroep
 
PDF
June 2015 Medical Coding Q&A Webinar
Laureen Jandroep
 
PPTX
Triangular factorization
Syed Hassan
 
PPTX
นำเสนอโครงงานคอมพิวเตอร์
Ruttanapong Junsiri
 
PPTX
August 2016 Medical Coding Q&A Webinar
Laureen Jandroep
 
PPTX
September 2016 Medical Coding Q&A Webinar
Laureen Jandroep
 
PPTX
November 2016 Medical Coding Q&A Webinar
Laureen Jandroep
 
Bananaleaf Project
Ruttanapong Junsiri
 
โครงงาน
Ruttanapong Junsiri
 
January 2015 Medical Coding Q&A Webinar
Laureen Jandroep
 
นำเสนอโครงงานคอมพ วเตอร (1)
Ruttanapong Junsiri
 
June 2016 Medical Coding Q&A Webinar
Laureen Jandroep
 
Ruttanapong
Ruttanapong Junsiri
 
November 2015 Medical Coding Q&A Webinar
Laureen Jandroep
 
Ruttanapong
Ruttanapong Junsiri
 
โครงงาน
Ruttanapong Junsiri
 
July 2016 Medical Coding Q&A Webinar
Laureen Jandroep
 
August 2015 Medical Coding Q&A Webinar
Laureen Jandroep
 
April 2015 Medical Coding Q&A Webinar
Laureen Jandroep
 
June 2015 Medical Coding Q&A Webinar
Laureen Jandroep
 
Triangular factorization
Syed Hassan
 
นำเสนอโครงงานคอมพิวเตอร์
Ruttanapong Junsiri
 
August 2016 Medical Coding Q&A Webinar
Laureen Jandroep
 
September 2016 Medical Coding Q&A Webinar
Laureen Jandroep
 
November 2016 Medical Coding Q&A Webinar
Laureen Jandroep
 
Ad

Similar to 试玩前端测试的前因后果 (20)

PPTX
Mobile app的測試v2
Mr PM
 
PDF
广告技术部自动化测试介绍.pdf
bj_qa
 
PDF
Query store查詢調校新利器
Rico Chen
 
PDF
敏捷软件测试之简介
Yi Xu
 
PDF
網站部署與第三方服務整合
Shengyou Fan
 
PDF
unit test & performance optimization
Sean Liu
 
PDF
Tip for Editors
Chun-Yu Tseng
 
PPT
2012 China 软件测试大会
mayun1688
 
PDF
W3CTech美团react专场-React Native 初探
美团点评技术团队
 
PDF
敏捷开发
yinwm
 
PDF
WireMock 起飞手册
Jiyee Sheng
 
PDF
Tcon分享 芈峮
mijun_hlp
 
PDF
豆瓣I os自动化测试实践和经验
drewz lin
 
PDF
Agile Taichung sharing Robot Framework 2018/05/19
Leo Tseng
 
PDF
Top100summit automan x之框架介绍 王超
drewz lin
 
PDF
Wushi-Qcon2011
Yiwei Ma
 
PDF
淘宝线上线下性能跟踪体系和容量规划-Qcon2011
Yiwei Ma
 
PDF
Xpp
drewz lin
 
PDF
網頁自動化測試 -- 從內部工具開始
SetMao
 
PPTX
How to ASP.NET MVC4
Daniel Chou
 
Mobile app的測試v2
Mr PM
 
广告技术部自动化测试介绍.pdf
bj_qa
 
Query store查詢調校新利器
Rico Chen
 
敏捷软件测试之简介
Yi Xu
 
網站部署與第三方服務整合
Shengyou Fan
 
unit test & performance optimization
Sean Liu
 
Tip for Editors
Chun-Yu Tseng
 
2012 China 软件测试大会
mayun1688
 
W3CTech美团react专场-React Native 初探
美团点评技术团队
 
敏捷开发
yinwm
 
WireMock 起飞手册
Jiyee Sheng
 
Tcon分享 芈峮
mijun_hlp
 
豆瓣I os自动化测试实践和经验
drewz lin
 
Agile Taichung sharing Robot Framework 2018/05/19
Leo Tseng
 
Top100summit automan x之框架介绍 王超
drewz lin
 
Wushi-Qcon2011
Yiwei Ma
 
淘宝线上线下性能跟踪体系和容量规划-Qcon2011
Yiwei Ma
 
網頁自動化測試 -- 從內部工具開始
SetMao
 
How to ASP.NET MVC4
Daniel Chou
 

试玩前端测试的前因后果