4、移动端Web测试
移动端开发模式
目前移动端常用的三种开发模式，主要有原生APP（Native App）、混合APP（Hybrid App）、WEB APP三种
- 原生APP是针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发，下载一般通过应用商城。
- Web App 基于web的系统和应用，运行于网络和浏览器之上，目前多采用h5标准开发，无需下载安装。
- Hybrid APP指的是半原生半Web的混合类App。需要下载安装，看上去类似Native App，但只有很少的UI Web View，访问的内容是 Web，以JS+Native两者相互调用为主。
优缺点
Native App
- 优点：速度快，性能高，用户体验效果好
- 缺点：无法跨平台，开发成本高，更新麻烦
Web App
- 优点：跨平台，开发周期短，开发成本低，更新较简单，维护较轻松
- 缺点：用户体验不佳
Hybrid App
- 结合原生用户体验效果好和Web App的跨平台开发的优势
H5介绍
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一
HTML5的设计目的是为了在移动设备上支持多媒体
HTML5添加了很多新元素及功能，比如： 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者等
因H5适用范围越来越广泛，我们很容易将H5与HTML5混淆
H5是一个产品名词，作为一种解决方案，包含HTML5的新标签特性， 实现拖拽涂抹等功能以及前端开发的内容的一个集合，而HTML5则是一个技术名词，是一种标准
H5的优点
- 跨平台优势，H5页面在各个平台都适用，且可以在网页上直接进行调试和修改，开发和维护的成本较低，开发周期较短。
- 强化了Web网页的表现性能。除了可描绘二维图形外，还准备了用于播放视频和音频的标签。
- 追加了本地数据库等Web应用的功能。
- H5营销的数据统计方便
APP中如何展现H5页面呢？
- 主要是通过Webview控件来加载
H5测试
针对大部分的H5场景，即手机Hybird应用下嵌入的H5，主要测试包括以下几个方面：
- 功能测试
- 接口测试
- 性能测试
- 适配测试
功能测试
- 登录和退出
- 关注缓存
- 用户行为事件
- 页面请求
- 网络
- 多媒体
接口测试
- 请求返回结果是否符合预期
- 接口请求参数边界值校验
- 接口入参错误处理：字段传入格式错误能否处理
- 性能情况：响应过慢会影响用户体验
- 安全情况：敏感信息是否加密传输
前端性能测试
- 关注指标：页面加载时间/页面大小/请求数量/请求错误数
- 可借助各种云测平台，性能测试工具HttpWatch、Yslow、PageSpeed等等
- 翻页测试：当前loading时快速连续翻页是否发出请求
适配测试
- 机型适配（根据市场占有比例，高端机，中端机，低端机选出最具代表机型适配）
- 操作系统适配（安卓必须覆盖大版本6.x~8.x，选几个有代表性的小版本；IOS覆盖9.x~13.x，选几个有代表性的小版本）
- 机型品牌适配：oppo 华为 小米 三星 vivo 魅族 中兴 等
APP测试/Web测试/H5测试的区别
相同之处
-
针对同一个系统功能的测试，三端所测的业务流程是一样的
-
一般情况下手机端和PC端都对应一套后台服务，也有一些功能，比如PC与手机端展示不一致，或者有什么特殊处理，这样情况下后台会写两套不同的接口来处理对应的业务需求
不同之处
- 测试平台（容器）不同
- 兼容性测试不同
- 系统架构不一样
- 发布流程不同
- APP还有一些专项测试
如何在PC上测试H5页面
- 谷歌浏览器，在菜单选项中选择“更多工具”“开发者工具”，或者直接按F12，可以选择机型及分辨率
- 下载微信web开发者工具，点击右上角的登录按钮，扫描授权后登录即可测试页面，该工具还可以测试微信的内容分享部分
Fiddler如何抓取移动端HTTPS包
- 首先保证你手机连接的wifi需要跟电脑处于同一个网络
- 然后手机设置-配置代理-手动 改成电脑ip+8888（这里的端口号需要跟你fiddler设置的一致），电脑ip可以在fiddler右上角的online处看到
- 手机浏览器访问电脑ip及端口号，下载证书安装
- 对于IOS系统，需要在通用-设置关于本机-证书信任设置中勾选
- Tools->Options->connections中勾选Allow remote computers to connect
charles如何抓取移动端HTTPS包
- 首先保证你手机连接的wifi需要跟电脑处于同一个网络
- 获取 Charles 运行所在电脑的 IP 地址，Charles 的顶部菜单的 Help -> Local IP Address，即可在弹出的对话框中看到 IP 地址
- 手机设置-配置代理-手动 改成电脑ip+8888
- 需要安装证书：点击 Charles 的顶部菜单，选择 Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser。点击之后会出现如图所示弹窗：
- 在手机浏览器上访问chls.pro/ssl ，下载证书安装ios系统需要信任证书
