共计 6848 个字符，预计需要花费 18 分钟才能阅读完成。
一. 功能测试
1、关注页面申请。对于每个页面，要查看发送的申请是否正确，申请的接口是否有反复，接口申请是否正确返回等。可通过 chrome 中自带的开发工具查看网络申请。
关注是否有冗余接口申请，是否有不必要的反复接口刷新申请。冗余和反复的接口申请会导致流量节约和响应速度变慢。
2、关注 application cache
（http://www.html5rocks.com/zh/…）, local storage（http://www.html5china.com/HTM…）, 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 上测试须要留神：横屏和竖屏下的显示成果可能不同，还有横屏换成竖屏、竖屏换成横屏。留神横竖屏切换时输入框的不同。
16. 返回性能
通过 H5 页面（非手机自带返回键）的返回功能键返回，能够返回到正确的页面（上一级 / 退出 h5）
点击返回与 back 键，回退页面是否是冀望页面
17. 屏幕切换
横屏竖屏互相切换，能适应，布局不乱，或页面只反对横或竖屏限度
18. 分辨率适配更好
倡议采纳响应式设计（如：offerlist 页面大屏显示 3 行，小屏显示 2 行）
1）分辨率高（如 7201280，重点关注页面背景是否齐全撑开页面，刷新是否有抖动）、分辨率低（如 320480，重点关注下弹框款式和文案折行）
2）android4.2 版本以上的设施轻易测试一两台即可
3）苹果近几年罕用的零碎版本手机
19. 页面关上模式
倡议页面在手机上从 list 点击进入 detail 页面，要在原窗口关上，通过页面页头返回按钮返回，不须要通过手机返回键返回，交互体验好
20. 页面申请验证
关注页面申请，是否会有多余的申请，或者申请后有多余的数据返回，尽量精简，否则会节约流量。
21. 图片适配
图片适配测试，依据不同屏幕和分辨率做适配，以及适配后的清晰度，高端机取双倍尺寸的图
22. 用浏览器 chrome f12 进行测试
H5 的页面在 PC 端也是能拜访的，chrome 对 H5 反对最好，性能的测试能够在 PC 端 chrome 下先测试，也能够在手机上间接测试，这个看集体习惯。（ie 系列 **ie8, 及以下都反对的不好，这个能够与 PD 确认 H5 页面在这些 PC 浏览器上不反对）
23、滑动、定位
手指滑动是否晦涩，手指点击时焦点是否定位正确，不同机型会不一样。焦点定位点击是灵活。
24、对于相似公司名称、offer 名称长度的问题，在手机上最好能依据屏幕大小自适应而不是截断，因为手机上是不会有 tips 能够看的。截断导致大屏幕下也只能显示几个字，交互不好
25、手机测试要特地关注交互是否敌对，与 PC 机的事件模型不一样，可能会导致一些体验的问题，比方：弹出层的点击，是否会穿透，影响到弹出层上面的页面。
26、对于一些浮层做的页面，例如地图、产品分类等浮层，留神拖动后是否能够看到它上面的页面，拖动后边缘是否有留白
27、手机端的浏览器测试的时候也要革除一下缓存，因为图片和文件会被缓存下来，所以首次拜访和二次拜访体验不一样。例如 UC 浏览器的分明缓存在设置 -》零碎设置 -》根本设置 –》革除记录中。
28. 关注页面首屏加载工夫。
29、文件导入导出：
1、模板下载性能：
个别导出导出性能会有一个模板下载性能，此性能须要查看模板是否能够失常下载，失常关上，查看 Excel 模板文件和网站中的数据字段是否统一即可。
2、文件导入性能
1) 谬误提醒，
如果导入的 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 浏览器（最新版）和 QQ 浏览器（最新版）。
3）容易呈现适配问题的机型：
三星 i9100G，对于按钮款式，输入框的区域要重点关注。
android 5.X 谷原生的 nenux 系列。
大屏高分辨率手机要适配一款，如三星 galaxy note4
对于反对 webp 的机子要测试。如三星 galaxy note2, 或三星 s3
4）工具
1. 市面上各种云测平台，个别都能够独自测试 H5 适配。
2. 可借助浏览器的开发者模式。
三. 性能测试
1) 须要关注的性能指标：
页面加载工夫 / 页面大小 / 页面申请数 / DomReady 工夫 / 图片等资源文件大小 / 申请谬误数
2) 各种云测平台
3) 其余性能测试工具：dyna trace，yslow，page speed，firebug 等等
2）翻页测试：
当遇到翻页加载的页面，须要留神内容为 1 页或者多页的状况。
（1）数据分页加载时，留神后续页面申请数据的正确。
注：这个须要留神在疾速操作场景中，申请页数是不是顺次递增，疾速操作（如第一页尚未 loading 进去的时候依然持续上拉操作）时是否收回去对应的申请了。
四. 平安测试
1）明确投放渠道都有哪些：
如独客、主客、wap，是否对未投放渠道做了限度，间接通过 url 申请是否拦挡等
2）评估是否须要接入团体平安，如 mtee 黑白名单等
3）是否须要接入支付宝实名认证：
波及到金钱相干，如天猫积分，红包等，为了防刷，个别都须要判断是否支付宝实名认证
4）是否接入 windvane，所有申请通过 native 收回
1)、从代码层级剖析 html5 新个性带来的安全漏洞。常见的：
通过 formaction 属性进行 XSS
通过 autofocus 属性执行自身的 focus 事件
多个 autofocus 竞争焦点来触发 blur 事件
通过的 poster 属性执行 Javascript
通过 autofocus 触发的 onscroll 执行 Javascript
具体原理和其余破绽可见 http://html5sec.org/#html5
2)、从手机用户角度列举手机网页存在的一些平安问题（非测试角度）, 大抵有以下：
歹意 url。包含 html 链接、短链接、短信中的 url、扫二维码产生的 url
通过 XSS 窃取数据库内容。各种 XSS 可参见 http://html5sec.org/#html5
自 BeEF 的打（BeEF 有点相似 fiddler，具体可见
https://github.com/beefprojec…）。包含 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）性能测试
随着对接客户的减少，对服务的性能方面的要求也会减少。对于云服务的模块须要做性能测试。
