一
.
功能测试
1
、关注页面请求。对于每个页面，要查看发送的请求是否正确，请求的接口是否有重复，接口请求是否正确返回等。可通过
chrome
中自带的开发工具查看网络请求。
关注是否有冗余接口请求，是否有不必要的重复接口刷新请求。
冗余和重复的接口请求会导致流量浪费和响应速度变慢。
2
、关注
application cache
（
www.html5rocks.com/zh/tutorial…
）
, local storage
（
www.html5china.com/HTML5featur…
）
, cookie
中值是否正确，页面是否有使用
application cache, local storage
存放数据。清除这些数据后功能是否正确，获取数据失败后是否有重试机制。（可以用下图
Chrome
开发工具，进行查看和清除，也可用
postman,soupUi
等）。 注意：老版
chrome
开发者模式下在
resource
下查看
cache
，新版
chrome
在
application
下查看。
3
、
session
失效机制。对于要登录的，需要用到
session
的地方，要注意模拟
session
失效时，功能业务逻辑是否正常。
4
、返回逻辑：对于页面中的返回，以及浏览器自带的返回的测试。 页面中的返回要考虑业务逻辑，友好返回到相应层次，需要从用户角度考虑返回的转跳逻辑，不能出现死循环。并要注意返回后是否需要刷新页面请求，比如支付完后返回订单列表，最好刷新
展示上一步购买的订单。
5
、页面刷新，刷新时的请求链接是否正确。
（
1
）下拉刷新是否仍然处于当前页面
（
2
）用户主动点击刷新按钮是否仍然处于当前页面
（
3
）刷新页面或者加载新内容时页面是否有抖动。
6
、图片适配，是否根据不同屏幕和分辨率做适配，高端机取双倍尺寸的图；是否对于
2G
网络，或低端机单独处理，不取高清图或减少一些特效动画效果；最好加上
webp
图片的支持，可减少流量；在中低端机上考虑是否需要让前端单独处理，去掉复杂处理。并
对中低端机只取原图，不取高清图。注意：
webp
格式只对
android
有效，放在
IOS
上反而会起反作用。
7
、是否要增加转场动画，
loading
动画，点击动画等。以提升体验。需要在动画效果和卡顿上衡量。
8
、对于隐私模式，不存
cookie
，不开
javascript
执行等，测试是否功能正常，或给出提示。
9
、接口降级，接口异常时如何处理，前端要给出友好提示。
10
、对于请求比较慢时，要有
loading
图案，图案在数据出来后要消失，且不能与转场动画等其它有冲突。
11
、输入框的校验：特殊字符显示，过滤黑词，
js
是否会执行，一连串长字母是否会换行等。 比如只输入空字符的处理。
12
、弱网络降级：处于
2G/3G
网络省流量模式的一些特殊处理，比如
2G
网络下测试，图片多时是否要懒加载等。网络状况差的场景，可提示文案，但不能闪退。
13
、网络切换：从
wifi
切换到
2G/3G
网络、从
2G/3G
网络切换到
wifi
等
14
、
H5
与
Native
切换：切换时登录信息是否记录、流程是否顺畅、是否出现中断闪退等问题。 注意验证 登录信息是否能互通。 不能出现
native
已经登录，进入
h5
后继续让登录，实在技术实现不了的可
toast
提示用户继续登录。
（
1
）若客户端已登录，那么进入
H5
后仍然是登录状态。
（
2
）若客户端未登录，进入
H5
，点击对应按钮
OR
链接，如果需要登录，须拉起
native
登录。若取消登录，是否可再次拉起登录，或者停留在的页面是否有对应的登录提示。 （注：本次测试过程中就发现，第一次点击链接，可以拉起登录，第二次却不能）
15
、
Pad
上测试需要注意：横屏和竖屏下的显示效果可能不同，还有横屏换成竖屏、竖屏换成横屏。注意横竖屏切换时输入框的不同。
返回功能
通过
H5
页面（非手机自带返回键）的返回功能键返回，可以返回到正确的页面（上一级
/
退出
h5
）
点击返回与
back
键，回退页面是否是期望页面
屏幕切换
横屏竖屏相互切换，能适应，布局不乱，或页面只支持横或竖屏限制
分辨率适配更好
建议采用响应式设计（如：
offerlist
页面大屏显示
3
行，小屏显示
2
行）
1
）分辨率高（如
720*1280
，重点关注页面背景是否完全撑开页面，刷新是否有抖动）、分辨率低（如
320*480
，重点关注下弹框样式和文案折行）
2
）
android4.2
版本以上的设备随便测试一两台即可
3
）苹果近几年常用的系统版本手机
页面打开形式
建议页面在手机上从
list
点击进入
detail
页面，要在原窗口打开，通过页面页头返回按钮返回，不需要通过手机返回键返回，交互体验好
页面请求验证
关注页面请求，是否会有多余的请求，或者请求后有多余的数据返回，尽量精简，否则会浪费流量。
图片适配
图片适配测试，根据不同屏幕和分辨率做适配，以及适配后的清晰度，高端机取双倍尺寸的图
用浏览器
chrome f12
进行测试
H5
的页面在
PC
端也是能访问的，
chrome
对
H5
支持最好，功能的测试可以在
PC
端
chrome
下先测试，也可以在手机上直接测试，这个看个人习惯。（
ie
系列
**ie8,
及以下都支持的不好，这个可以与
PD
确认
H5
页面在这些
PC
浏览器上不支持）
23
、滑动、定位
手指滑动是否流畅，手指点击时焦点是否定位正确，不同机型会不一样。焦点定位点击是灵敏。
24
、对于类似公司名称、
offer
名称长度的问题，在手机上最好能根据屏幕大小自适应而不是截断，因为手机上是不会有
tips
可以看的。截断导致大屏幕下也只能显示几个字，交互不好
25
、手机测试要特别关注交互是否友好，与
PC
机的事件模型不一样，可能会导致一些体验的问题，比如：弹出层的点击，是否会穿透，影响到弹出层下面的页面。
26
、对于一些浮层做的页面，例如地图、产品分类等浮层，注意拖动后是否可以看到它下面的页面，拖动后边缘是否有留白
27
、手机端的浏览器测试的时候也要清除一下缓存，因为图片和文件会被缓存下来，所以首次访问和二次访问体验不一样。例如
UC
浏览器的清楚缓存在设置
-
》系统设置
-
》基本设置
--
》清除记录中。
关注页面首屏加载时间。
29
、文件导入导出：
1
、模板下载功能：
一般导出导出功能会有一个模板下载功能，此功能需要检查模板是否可以正常下载，正常打开，检查
Excel
模板文件和网站中的数据字段是否一致即可。
2
、文件导入功能
错误提示，
如果导入的
excel
表格中中某一行或者某一字段格式不对或者数据为空，是否可以正常导入正确部分的数据，对错误的数据进行提示。
2
）导入其他格式的文件
当导入的文件格式不正确时，系统是否做出正确的判断，并给出对应的错误提示。
3
）重复导入相同的文件
重复导入相同的文件是否可以导入成功，如果可以导入成功，数据将如何处理，比如覆盖或者忽略？
4
）不使用下载的模板，自己新建
excel
导入
自己手动新建
excel
或者对其他
excel
进行修改，使
excel
格式和模板一致，这种情况下数据填写正确的话，应可以正确的导入系统。
5
）表头检查：包括去掉、修改、新增列、列之间切换等
3
、文件导出功能
1
）导出的
excel
表格的格式检查，主要检查导出的
excel
格式是否符合预期，各字段是否正确。另外导出的
excel
文件名是否有要求。如果有要求，是否正确。
2
）数据检查，导出全部数据功能是否正确，到处部分数据功能是否正确，选择数据为空时是否可以导出。导出的数据内容是否与网页中的内容一致。
二
.
适配测试
1
）
H5
机型适配
在项目测试计划给出时，确认是否要确定测试机基线，即是否要以几款机型作为最低适配需求。可参考目前应用市场占有分布。
操作系统适配范围：
ios 8-10
固件版本的
iphone
必须覆盖，
ios7
可选覆盖，
android 4.4-6.x
必须覆盖，
4.0-4.3
可选覆盖，
4.0
以下可以不
care
。像小米，魅族这种自定义
os
版本的机子，其实底层也对应着标准的
谷
os
系统版本。
对于
ios, android
大版本一定要覆盖，对于系统版本，先看大版本占用情况，再选择大版本中占用率较高的小版本。如
4.3, 5.0
大版本中选几个占用率较高的小版本测试。常用的有：
ios
：
8.x.x, 9.3.5
；
android: 4.3.1, 4.4.2
等。
机型品牌适配范围：参考集团内后端统计的
top
机型。对于
ios
，要覆盖
iphone 6/6s/6p, iphone 7,iphone5
等。
对于
android,
如三星、小米、华为，
htc, lenovo
，中兴，魅族，阿里云等。屌丝机型 华为，中兴，
vivo
，
oppo,
魅族占有率很高，所以这几个屌丝机型一定要覆盖到。三星上的
H5
问题防不胜防，相当极品。小米近一两年的机型适配问题不想
2s
那么多了。
三星常见的
H5
适配问题：
css
加载不出来，控件操作无响应。小米常见的
H5
适配问题是
UI
，比如
button
会把这个按钮四个角冗余显示，
tab
切换异常。 实时滚动信息时卡死等。
对于有些手机厂商有自已定制操作系统，要单独适配，如小米，魅族。注意三星的假系统版本。
在选择机子时，要兼顾屏幕尺寸和分辨率。覆盖到主流的屏幕尺寸和分辨率，并组合一下，现在主流是
1920
大屏，但一定要找几款小屏手机覆盖。注意三星的
适配时不能光选性能好的机子，一定要适配几款中低端机。华为和中兴的国产机，可选择适配一下。
2
）手机浏览器适配
需要覆盖：自带浏览器（默认的浏览器内核）为主，有足够时间时再覆盖
chrome,UC
浏览器（最新版）和
浏览器（最新版）。
3
）容易出现适配问题的机型：
三星
i9100G
，对于按钮样式，输入框的区域要重点关注。
android 5.X
谷
原生的
nenux
系列。
大屏高分辨率手机要适配一款，如三星
galaxy note4
对于支持
webp
的机子要测试。如三星
galaxy note2,
或三星
s3
4
）工具
市面上各种云测平台，一般都可以单独测试
H5
适配。
可借助浏览器的开发者模式。
三
.
性能测试
需要关注的性能指标：
页面加载时间
/
页面大小
/
页面请求数
/ DomReady
时间
/
图片等资源文件大小
/
请求错误数
各种云测平台
其他性能测试工具：
dyna trace
，
yslow
，
page speed
，
firebug
等等
2
）翻页测试：
当遇到翻页加载的页面，需要注意内容为
1
页或者多页的情况。
（
1
）数据分页加载时，注意后续页面请求数据的正确。
注：这个需要注意在快速操作场景中，请求页数是不是依次递增，快速操作（如第一页尚未
loading
出来的时候仍然继续上拉操作）时是否发出去对应的请求了。
四
.
安全测试
1
）明确投放渠道都有哪些 ：
如独客、主客、
wap
，是否对未投放渠道做了限制，直接通过
url
请求是否拦截等
2
）评估是否需要接入集团安全，如
mtee
黑白名单等
3
）是否需要接入支付宝实名认证：
涉及到金钱相关，如天猫积分，红包等，为了防刷，一般都需要判断是否支付宝实名认证
4
）是否接入
windvane
，所有请求通过
native
发出
、从代码层级分析
html5
新特性带来的安全漏洞。常见的：
通过
formaction
属性进行
XSS
通过
autofocus
属性执行本身的
focus
事件
多个
autofocus
竞争焦点来触发
blur
事件
通过的
poster
属性执行
Javascript
通过
autofocus
触发的
onscroll
执行
Javascript
具体原理和其他漏洞可见
、从手机用户角度列举手机网页存在的一些安全问题（非测试角度）
,
大致有以下：
恶意
url
。包括
html
链接、短链接、短信中的
url
、扫二维码产生的
url
通过
XSS
窃取数据库内容。各种
XSS
可参见
自
BeEF
的
打
（
BeEF
有点类似
fiddler
，具体可见
）。包括
cookie
窃取、披露设备地理位置、打骚扰电话、不需要的下载
访问不安全的
web
服务。
听
移动网站流量。
五
. H5
上线后回归
H5
涉及到的各种资源文件，在测试环境（包括预发环境），一般都是内域，正式上线，
RD
童鞋有把资源文件（或者说
url
中的链接忘了修改）漏发的风险，所以上线后一定要用外网环境再快速回归下。最简单的就是用自己的
4G
网络回归跟踪线上。
六
.H5
测试与
PC
端测试不同的点
1
、通过
H5
网页（非手机的返回功能）的返回功能可以返回，不会出现无法返回的情况。
2
、横屏竖屏相互切换，能自适应，并且布局不会乱掉；
3
、为能在不同分辨率的手机上能更好的展示，建议采用响应式设计（如：
offerlist
页面在大屏时显示
3
行，小屏时显示
2
行）
4
、在手机上从
list
点击进入
detail
页面，要在原窗口打开，这样可以通过页头的返回按钮返回，而不需要通过手机的返回键返回，这样交互上更友好。
5
、关注页面请求，是否会有多余的请求，或者请求后有多余的数据返回，尽量精简，否则会浪费流量。
6
、图片适配测试，根据不同屏幕和分辨率做适配，以及适配后的清晰度，高端机取双倍尺寸的图
7
、
H5
的页面在
PC
端也是能访问的，
chrome
对
H5
支持最好，功能的测试可以在
PC
端
chrome
下先测试，也可以在手机上直接测试，这个看个人习惯。（
ie
系列包括
ie8,
及以下都支持的不好）
8
、手指滑动是否流畅，手指点击时焦点是否定位正确，不同机型会不一样。焦点点击是否灵敏。
9
、对于类似公司名称、
offer
名称长度的问题，在手机上最好能根据屏幕大小自适应而不是截断，因为手机上是不会有
tips
可以看的。截断导致大屏幕下也只能显示几个字，交互不好
10
、手机测试要特别关注交互是否友好，与
PC
机的事件模型不一样，可能会导致一些体验的问题，比如：弹出层的点击，是否会穿透，影响到弹出层下面的页面。
11
、对于一些浮层做的页面，例如地图、产品分类等浮层，注意拖动后是否可以看到它下面的页面，拖动后边缘是否有留白
12
、手机端的浏览器测试的时候也要清除一下缓存，因为图片和文件会被缓存下来，所以首次访问和二次访问体验不一样。例如
UC
浏览器的清楚缓存在设置
-
》系统设置
-
》基本设置–》清除记录中。
七、
H5
各种测试总结：
（
1
）需求设计测试：
尽早的了解需求熟悉需求、参与需求评审与设计，通过原型图以及真实用户体验和用户习惯来检查需求的合理性以及是否有更好地实现方法等。
这样能把问题发现在源头，减少后期因需求变更引起开发和测试的迭代成本。
在需求阶段即介入测试功能点的编写和记录，也符合尽早介入测试的原则。
（
2
）接口测试
根据开发同学提供的接口文档，可以通过
Jmeter
等工具进行测试。
主要关注点为：
接口返回的数据期望的是否一致；
接口入参的边界值校验
；
检查接口的容错性
比如对于传输数据类型错误能否处理等，整型的输入小数、中英文等；
接口的性能情况，调用接口数据返回的时间，接口反应慢肯定影响用户体验。
接口的安全性：接口部分敏感信息是否加密传输等
mtop
接口返回处理：
发现这个出现问题的地方有很多，但是只要有意识的去处理，就很容易避免，主要是有以下几种情况：
（
1
）请求成功，且返回有数据，测试
mtop
接口返回数据的各种场景。
（
2
）请求成功，但
data
内容为空。
（
3
）请求接口异常，出现
ERR_SID_INVALID::SESSION
过期，拉起登录。
（
4
）请求接口发生除
C
中提到的异常之外的异常，通常可归结为一类进行处理。
（
3
）功能测试
测试重点，根据业务逻辑和功能进行测试，主要是可用性。
（
4
）用户界面测试
根据测试和评审修改过的
UED
（用户体验设计），测试开发递交的测试包。
风格、样式、颜色是否协调，不仅包括
HTML5
本身，因为
HTML5
会嵌入
App
里面，所以要考虑
H5
的风格、样式、颜色是否与
app
本身协同，不至于格格不入，包括用户习惯等也最好保持一致或相近，最好在设计初期就有颜色、按钮、图片、背景、边框等详细规划和统一。
但是正是由于
H5
的可移植性，同一服务会嵌入到
N
家客户的产品中，难以与各家都完全统一，所以在设计中就应该考虑这些问题。
（
5
） 兼容性测试
手机
HTML5
主要应用是嵌入在
app
或者微信公众号里面，所以兼容性主要是
iOS
、
Android 2
个系统各种主流机型的适配。
A
、手机屏幕大小
B
、主流手机机型
C
、手机操作系统，
iOS
和
Android
各版本
D
、浏览器：系统自带浏览器和主流浏览器
（
6
）网络测试
由于
H5
系统很多是云服务，所有响应速度普遍较慢。我们测试的时候一般会用
Wifi
，速度会相对可观点。
我们应该观察在
4G
、
3G
、甚至
2G
的网下，弱网测试，看响应时间是否在忍受范围内。
时间过长的话，需要提示优化代码做改善。
（
7
） 安全测试
由于我们对应的产品部利用
HTML5
把一些通用功能做成了云服务，可以嵌入多家客户的
App
，根据渠道划分，所以安全性显得尤为重要。
（
8
） 性能测试
一
.
功能测试
1
、关注页面请求。对于每个页面，要查看发送的请求是否正确，请求的接口是否有重复，接口请求是否正确返回等。可通过
chrome
中自带的开发工具查看网络请求。
关注是否有冗余接口请求，是否有不必要的重复接口刷新请求。
冗余和重复的接口请求会导致流量浪费和响应速度变慢。
2
、关注
application cache
（
www.html5rocks.com/zh/tutorial…
）
, local storage
（
www.html5china.com/HTML5featur…
）
, cookie
中值是否正确，页面是否有使用
application cache, local storage
存放数据。清除这些数据后功能是否正确，获取数据失败后是否有重试机制。（可以用下图
Chrome
开发工具，进行查看和清除，也可用
postman,soupUi
等）。 注意：老版
chrome
开发者模式下在
resource
下查看
cache
，新版
chrome
在
application
下查看。
3
、
session
失效机制。对于要登录的，需要用到
session
的地方，要注意模拟
session
失效时，功能业务逻辑是否正常。
4
、返回逻辑：对于页面中的返回，以及浏览器自带的返回的测试。 页面中的返回要考虑业务逻辑，友好返回到相应层次，需要从用户角度考虑返回的转跳逻辑，不能出现死循环。并要注意返回后是否需要刷新页面请求，比如支付完后返回订单列表，最好刷新
展示上一步购买的订单。
5
、页面刷新，刷新时的请求链接是否正确。
（
1
）下拉刷新是否仍然处于当前页面
（
2
）用户主动点击刷新按钮是否仍然处于当前页面
（
3
）刷新页面或者加载新内容时页面是否有抖动。
6
、图片适配，是否根据不同屏幕和分辨率做适配，高端机取双倍尺寸的图；是否对于
2G
网络，或低端机单独处理，不取高清图或减少一些特效动画效果；最好加上
webp
图片的支持，可减少流量；在中低端机上考虑是否需要让前端单独处理，去掉复杂处理。并
对中低端机只取原图，不取高清图。注意：
webp
格式只对
android
有效，放在
IOS
上反而会起反作用。
7
、是否要增加转场动画，
loading
动画，点击动画等。以提升体验。需要在动画效果和卡顿上衡量。
8
、对于隐私模式，不存
cookie
，不开
javascript
执行等，测试是否功能正常，或给出提示。
9
、接口降级，接口异常时如何处理，前端要给出友好提示。
10
、对于请求比较慢时，要有
loading
图案，图案在数据出来后要消失，且不能与转场动画等其它有冲突。
11
、输入框的校验：特殊字符显示，过滤黑词，
js
是否会执行，一连串长字母是否会换行等。 比如只输入空字符的处理。
12
、弱网络降级：处于
2G/3G
网络省流量模式的一些特殊处理，比如
2G
网络下测试，图片多时是否要懒加载等。网络状况差的场景，可提示文案，但不能闪退。
13
、网络切换：从
wifi
切换到
2G/3G
网络、从
2G/3G
网络切换到
wifi
等
14
、
H5
与
Native
切换：切换时登录信息是否记录、流程是否顺畅、是否出现中断闪退等问题。 注意验证 登录信息是否能互通。 不能出现
native
已经登录，进入
h5
后继续让登录，实在技术实现不了的可
toast
提示用户继续登录。
（
1
）若客户端已登录，那么进入
H5
后仍然是登录状态。
（
2
）若客户端未登录，进入
H5
，点击对应按钮
OR
链接，如果需要登录，须拉起
native
登录。若取消登录，是否可再次拉起登录，或者停留在的页面是否有对应的登录提示。 （注：本次测试过程中就发现，第一次点击链接，可以拉起登录，第二次却不能）
15
、
Pad
上测试需要注意：横屏和竖屏下的显示效果可能不同，还有横屏换成竖屏、竖屏换成横屏。注意横竖屏切换时输入框的不同。
返回功能
通过
H5
页面（非手机自带返回键）的返回功能键返回，可以返回到正确的页面（上一级
/
退出
h5
）
点击返回与
back
键，回退页面是否是期望页面
屏幕切换
横屏竖屏相互切换，能适应，布局不乱，或页面只支持横或竖屏限制
分辨率适配更好
建议采用响应式设计（如：
offerlist
页面大屏显示
3
行，小屏显示
2
行）
1
）分辨率高（如
720*1280
，重点关注页面背景是否完全撑开页面，刷新是否有抖动）、分辨率低（如
320*480
，重点关注下弹框样式和文案折行）
2
）
android4.2
版本以上的设备随便测试一两台即可
3
）苹果近几年常用的系统版本手机
页面打开形式
建议页面在手机上从
list
点击进入
detail
页面，要在原窗口打开，通过页面页头返回按钮返回，不需要通过手机返回键返回，交互体验好
页面请求验证
关注页面请求，是否会有多余的请求，或者请求后有多余的数据返回，尽量精简，否则会浪费流量。
图片适配
图片适配测试，根据不同屏幕和分辨率做适配，以及适配后的清晰度，高端机取双倍尺寸的图
用浏览器
chrome f12
进行测试
H5
的页面在
PC
端也是能访问的，
chrome
对
H5
支持最好，功能的测试可以在
PC
端
chrome
下先测试，也可以在手机上直接测试，这个看个人习惯。（
ie
系列
**ie8,
及以下都支持的不好，这个可以与
PD
确认
H5
页面在这些
PC
浏览器上不支持）
23
、滑动、定位
手指滑动是否流畅，手指点击时焦点是否定位正确，不同机型会不一样。焦点定位点击是灵敏。
24
、对于类似公司名称、
offer
名称长度的问题，在手机上最好能根据屏幕大小自适应而不是截断，因为手机上是不会有
tips
可以看的。截断导致大屏幕下也只能显示几个字，交互不好
25
、手机测试要特别关注交互是否友好，与
PC
机的事件模型不一样，可能会导致一些体验的问题，比如：弹出层的点击，是否会穿透，影响到弹出层下面的页面。
26
、对于一些浮层做的页面，例如地图、产品分类等浮层，注意拖动后是否可以看到它下面的页面，拖动后边缘是否有留白
27
、手机端的浏览器测试的时候也要清除一下缓存，因为图片和文件会被缓存下来，所以首次访问和二次访问体验不一样。例如
UC
浏览器的清楚缓存在设置
-
》系统设置
-
》基本设置
--
》清除记录中。
关注页面首屏加载时间。
29
、文件导入导出：
1
、模板下载功能：
一般导出导出功能会有一个模板下载功能，此功能需要检查模板是否可以正常下载，正常打开，检查
Excel
模板文件和网站中的数据字段是否一致即可。
2
、文件导入功能
错误提示，
如果导入的
excel
表格中中某一行或者某一字段格式不对或者数据为空，是否可以正常导入正确部分的数据，对错误的数据进行提示。
2
）导入其他格式的文件
当导入的文件格式不正确时，系统是否做出正确的判断，并给出对应的错误提示。
3
）重复导入相同的文件
重复导入相同的文件是否可以导入成功，如果可以导入成功，数据将如何处理，比如覆盖或者忽略？
4
）不使用下载的模板，自己新建
excel
导入
自己手动新建
excel
或者对其他
excel
进行修改，使
excel
格式和模板一致，这种情况下数据填写正确的话，应可以正确的导入系统。
5
）表头检查：包括去掉、修改、新增列、列之间切换等
3
、文件导出功能
1
）导出的
excel
表格的格式检查，主要检查导出的
excel
格式是否符合预期，各字段是否正确。另外导出的
excel
文件名是否有要求。如果有要求，是否正确。
2
）数据检查，导出全部数据功能是否正确，到处部分数据功能是否正确，选择数据为空时是否可以导出。导出的数据内容是否与网页中的内容一致。
二
.
适配测试
1
）
H5
机型适配
在项目测试计划给出时，确认是否要确定测试机基线，即是否要以几款机型作为最低适配需求。可参考目前应用市场占有分布。
操作系统适配范围：
ios 8-10
固件版本的
iphone
必须覆盖，
ios7
可选覆盖，
android 4.4-6.x
必须覆盖，
4.0-4.3
可选覆盖，
4.0
以下可以不
care
。像小米，魅族这种自定义
os
版本的机子，其实底层也对应着标准的
谷
os
系统版本。
对于
ios, android
大版本一定要覆盖，对于系统版本，先看大版本占用情况，再选择大版本中占用率较高的小版本。如
4.3, 5.0
大版本中选几个占用率较高的小版本测试。常用的有：
ios
：
8.x.x, 9.3.5
；
android: 4.3.1, 4.4.2
等。
机型品牌适配范围：参考集团内后端统计的
top
机型。对于
ios
，要覆盖
iphone 6/6s/6p, iphone 7,iphone5
等。
对于
android,
如三星、小米、华为，
htc, lenovo
，中兴，魅族，阿里云等。屌丝机型 华为，中兴，
vivo
，
oppo,
魅族占有率很高，所以这几个屌丝机型一定要覆盖到。三星上的
H5
问题防不胜防，相当极品。小米近一两年的机型适配问题不想
2s
那么多了。
三星常见的
H5
适配问题：
css
加载不出来，控件操作无响应。小米常见的
H5
适配问题是
UI
，比如
button
会把这个按钮四个角冗余显示，
tab
切换异常。 实时滚动信息时卡死等。
对于有些手机厂商有自已定制操作系统，要单独适配，如小米，魅族。注意三星的假系统版本。
在选择机子时，要兼顾屏幕尺寸和分辨率。覆盖到主流的屏幕尺寸和分辨率，并组合一下，现在主流是
1920
大屏，但一定要找几款小屏手机覆盖。注意三星的
适配时不能光选性能好的机子，一定要适配几款中低端机。华为和中兴的国产机，可选择适配一下。
2
）手机浏览器适配
需要覆盖：自带浏览器（默认的浏览器内核）为主，有足够时间时再覆盖
chrome,UC
浏览器（最新版）和
浏览器（最新版）。
3
）容易出现适配问题的机型：
三星
i9100G
，对于按钮样式，输入框的区域要重点关注。
android 5.X
谷
原生的
nenux
系列。
大屏高分辨率手机要适配一款，如三星
galaxy note4
对于支持
webp
的机子要测试。如三星
galaxy note2,
或三星
s3
4
）工具
市面上各种云测平台，一般都可以单独测试
H5
适配。
可借助浏览器的开发者模式。
三
.
性能测试
需要关注的性能指标：
页面加载时间
/
页面大小
/
页面请求数
/ DomReady
时间
/
图片等资源文件大小
/
请求错误数
各种云测平台
其他性能测试工具：
dyna trace
，
yslow
，
page speed
，
firebug
等等
2
）翻页测试：
当遇到翻页加载的页面，需要注意内容为
1
页或者多页的情况。
（
1
）数据分页加载时，注意后续页面请求数据的正确。
注：这个需要注意在快速操作场景中，请求页数是不是依次递增，快速操作（如第一页尚未
loading
出来的时候仍然继续上拉操作）时是否发出去对应的请求了。
四
.
安全测试
1
）明确投放渠道都有哪些 ：
如独客、主客、
wap
，是否对未投放渠道做了限制，直接通过
url
请求是否拦截等
2
）评估是否需要接入集团安全，如
mtee
黑白名单等
3
）是否需要接入支付宝实名认证：
涉及到金钱相关，如天猫积分，红包等，为了防刷，一般都需要判断是否支付宝实名认证
4
）是否接入
windvane
，所有请求通过
native
发出
、从代码层级分析
html5
新特性带来的安全漏洞。常见的：
通过
formaction
属性进行
XSS
通过
autofocus
属性执行本身的
focus
事件
多个
autofocus
竞争焦点来触发
blur
事件
通过的
poster
属性执行
Javascript
通过
autofocus
触发的
onscroll
执行
Javascript
具体原理和其他漏洞可见
、从手机用户角度列举手机网页存在的一些安全问题（非测试角度）
,
大致有以下：
恶意
url
。包括
html
链接、短链接、短信中的
url
、扫二维码产生的
url
通过
XSS
窃取数据库内容。各种
XSS
可参见
自
BeEF
的
打
（
BeEF
有点类似
fiddler
，具体可见
）。包括
cookie
窃取、披露设备地理位置、打骚扰电话、不需要的下载
访问不安全的
web
服务。
听
移动网站流量。
五
. H5
上线后回归
H5
涉及到的各种资源文件，在测试环境（包括预发环境），一般都是内域，正式上线，
RD
童鞋有把资源文件（或者说
url
中的链接忘了修改）漏发的风险，所以上线后一定要用外网环境再快速回归下。最简单的就是用自己的
4G
网络回归跟踪线上。
六
.H5
测试与
PC
端测试不同的点
1
、通过
H5
网页（非手机的返回功能）的返回功能可以返回，不会出现无法返回的情况。
2
、横屏竖屏相互切换，能自适应，并且布局不会乱掉；
3
、为能在不同分辨率的手机上能更好的展示，建议采用响应式设计（如：
offerlist
页面在大屏时显示
3
行，小屏时显示
2
行）
4
、在手机上从
list
点击进入
detail
页面，要在原窗口打开，这样可以通过页头的返回按钮返回，而不需要通过手机的返回键返回，这样交互上更友好。
5
、关注页面请求，是否会有多余的请求，或者请求后有多余的数据返回，尽量精简，否则会浪费流量。
6
、图片适配测试，根据不同屏幕和分辨率做适配，以及适配后的清晰度，高端机取双倍尺寸的图
7
、
H5
的页面在
PC
端也是能访问的，
chrome
对
H5
支持最好，功能的测试可以在
PC
端
chrome
下先测试，也可以在手机上直接测试，这个看个人习惯。（
ie
系列包括
ie8,
及以下都支持的不好）
8
、手指滑动是否流畅，手指点击时焦点是否定位正确，不同机型会不一样。焦点点击是否灵敏。
9
、对于类似公司名称、
offer
名称长度的问题，在手机上最好能根据屏幕大小自适应而不是截断，因为手机上是不会有
tips
可以看的。截断导致大屏幕下也只能显示几个字，交互不好
10
、手机测试要特别关注交互是否友好，与
PC
机的事件模型不一样，可能会导致一些体验的问题，比如：弹出层的点击，是否会穿透，影响到弹出层下面的页面。
11
、对于一些浮层做的页面，例如地图、产品分类等浮层，注意拖动后是否可以看到它下面的页面，拖动后边缘是否有留白
12
、手机端的浏览器测试的时候也要清除一下缓存，因为图片和文件会被缓存下来，所以首次访问和二次访问体验不一样。例如
UC
浏览器的清楚缓存在设置
-
》系统设置
-
》基本设置–》清除记录中。
七、
H5
各种测试总结：
（
1
）需求设计测试：
尽早的了解需求熟悉需求、参与需求评审与设计，通过原型图以及真实用户体验和用户习惯来检查需求的合理性以及是否有更好地实现方法等。
这样能把问题发现在源头，减少后期因需求变更引起开发和测试的迭代成本。
在需求阶段即介入测试功能点的编写和记录，也符合尽早介入测试的原则。
（
2
）接口测试
根据开发同学提供的接口文档，可以通过
Jmeter
等工具进行测试。
主要关注点为：
接口返回的数据期望的是否一致；
接口入参的边界值校验
；
检查接口的容错性
比如对于传输数据类型错误能否处理等，整型的输入小数、中英文等；
接口的性能情况，调用接口数据返回的时间，接口反应慢肯定影响用户体验。
接口的安全性：接口部分敏感信息是否加密传输等
mtop
接口返回处理：
发现这个出现问题的地方有很多，但是只要有意识的去处理，就很容易避免，主要是有以下几种情况：
（
1
）请求成功，且返回有数据，测试
mtop
接口返回数据的各种场景。
（
2
）请求成功，但
data
内容为空。
（
3
）请求接口异常，出现
ERR_SID_INVALID::SESSION
过期，拉起登录。
（
4
）请求接口发生除
C
中提到的异常之外的异常，通常可归结为一类进行处理。
（
3
）功能测试
测试重点，根据业务逻辑和功能进行测试，主要是可用性。
（
4
）用户界面测试
根据测试和评审修改过的
UED
（用户体验设计），测试开发递交的测试包。
风格、样式、颜色是否协调，不仅包括
HTML5
本身，因为
HTML5
会嵌入
App
里面，所以要考虑
H5
的风格、样式、颜色是否与
app
本身协同，不至于格格不入，包括用户习惯等也最好保持一致或相近，最好在设计初期就有颜色、按钮、图片、背景、边框等详细规划和统一。
但是正是由于
H5
的可移植性，同一服务会嵌入到
N
家客户的产品中，难以与各家都完全统一，所以在设计中就应该考虑这些问题。
（
5
） 兼容性测试
手机
HTML5
主要应用是嵌入在
app
或者微信公众号里面，所以兼容性主要是
iOS
、
Android 2
个系统各种主流机型的适配。
A
、手机屏幕大小
B
、主流手机机型
C
、手机操作系统，
iOS
和
Android
各版本
D
、浏览器：系统自带浏览器和主流浏览器
（
6
）网络测试
由于
H5
系统很多是云服务，所有响应速度普遍较慢。我们测试的时候一般会用
Wifi
，速度会相对可观点。
我们应该观察在
4G
、
3G
、甚至
2G
的网下，弱网测试，看响应时间是否在忍受范围内。
时间过长的话，需要提示优化代码做改善。
（
7
） 安全测试
由于我们对应的产品部利用
HTML5
把一些通用功能做成了云服务，可以嵌入多家客户的
App
，根据渠道划分，所以安全性显得尤为重要。
（
8
） 性能测试
随着对接客户的增加，对服务的性能方面的要求也会增加。对于云服务的模块需要做性能测试。
随着对接客户的增加，对服务的性能方面的要求也会增加。对于云服务的模块需要做性能测试。
