前端页面跳转测试

前端页面跳转分析处于什么环境

对于测试人员来说，在进行交互评审的时候，就可以开始基于交互文档以及接口文档进行页面跳转的分析了。

注意：全篇的前端包含APP、H5以及中间的接口路由层。

如何做页面跳转分析

设计分析

1、交互层面的分析

协议分析

1、协议层面的分析

通用分析

1、跳转页面的类型

2、页面跳转的交互范围

3、页面跳转通用测试方法

4、前后端文件传输格式

常见交互类型依据

• UX交互设计
• 竞品对应场景分析
• 用户视角
• 设计规范

基于交互层面的分析，我们需要关注页面之间的交互是否合理。首先，我们对自己公司的UX同学之能力表示相信，当然我们也可以基于其他三个点提出我们的建议。现在移动应用市场APP层出不穷，每个APP基本都会有相对的竞品或者是相同的某几个场景，我们可以借鉴竞品在相似页面交互的设计作为一个标准。身为一个测试，我们有必要站在用户的角度，去评价交互设计的合理性。我们可以从各个应用市场的用户评论中去获取用户的意见。最后，像Google、Apple等引领全球设计风尚的公司，他们的交互设计标准也值得我们借鉴。

例子：支付完成页面，若取消支付，有些公司跳转至订单详情页，有些公司跳转至收银台，大家可细细斟酌一下。

前端常见协议类型

1、Scheme

scheme跳转一般用于APP与APP之间的跳转、推送消息与APP的跳转以及APP与H5的跳转。主要有一下几种常用的应用场景：

• 从浏览器中某个页面点击事件可以打开对应客户端某一个界面，就是通过URL Scheme://+参数来完成唤醒跳转客户端页面的。
• 调用微信、支付宝等客户端完成支付功能。
• 第三方应用调用系统所带的地图软件。
• 淘口令、吱口令在APP内打开活动页面
• 将需要分享的数据传给SDK，SDK通过Open Url来打开第三方应用传递数据，返回时SDK来处理Open Url的参数，实现查看分享的回调。
• APP端收到服务器下发的push通知栏消息，点击跳转至对应的页面

测试点：是否能正确的跳转、回退、浏览器重复拉起APP是否会拉起多个页面。

2、HTTP、HTTPS

HTTP、HTTPS主要用于APP、H5与接入层的通信。超文本协议HTTP，以明文方式发送内容、不提供任何方式的数据加密，容易被攻击装截取获得信息。简单来说，HTTPS协议就是由SSL+HTTP协议构建的可以进行加密传输、身份认证的网络协议，比http协议安全。要知道怎么测HTTPS的请求，就有必要了解一下HTTPS的工作流程了。

1. Client发起一个HTTPS的请求，Client知道需要连接Server的443（默认）端口，请求与Server建立SSL链接。
2. Server接受到请求后，把事先配置好的公钥证书发送给客户端。证书里面包含网站地址、加密公钥以及证书的颁发机构等。
3. Client收到证书后，验证公钥证书：比如是否在有效期内，证书的用途是不是匹配Client请求的站点，是不是在CRL吊销列表里面，颁发证书的机构是否合法，它的上一级证书是否有效，这是一个递归的过程，直到验证到根证书（操作系统内置的Root证书或者Client内置的Root证书）。如果验证通过则继续，不通过则显示警告信息。
4. Client使用伪随机数生成器生成加密所使用的会话密钥，然后用证书的公钥加密这个会话密钥，使用约定好的hash算法计算握手消息，并使用生成的随机数加密，最后将生成的所有消息发给Server。
5. Server接受到Client发送来的消息，使用自己的私钥（private key）解密这个消息，得到会话密钥，使用秘钥解密client端发来的握手消息，并验证hash是否与客户端发来的一致，使用秘钥加密一段消息发送给client。
6. client端解密并计算握手消息hash，如果与server端发来的hash一致，此时握手结束，之后所有通信数据将由之前客户端生成的随机密码并利用对称加密算法进行加密。

测试点： 1、https证书是否被正确安装、是否被信任 2、https证书的有效期 3、TLS协议升级影响 4、中间人攻击

通用分析

1、跳转页面类型

目前APP里面页面类型大致有三种：Native、RN、H5。RN全称react native，是Facebook在15年开源的跨平台移动应用开发框架，主要支持Android和iOS两大平台，但使用JavaScript语言开发即可。三者页面之间可以相互跳转，但是RN与native可以相互调用、H5与native可以相互调用，RN和H5之间需要native进行中转，部分静态页面除外。

RN Native H5 RN Native H5

对测试关注的性能以及用户体验来说，流畅度方面，native优于RN优于H5，内存方面，因为RN含有框架，所以占用内存相对较高，后期平稳后会优于native。由于RN支持的机型有限制（iOS7以上、Android4.1以上），所以需要考虑不同机型上页面跳转的兼容问题，并且还需要考虑RN和H5之间的降级。由于RN首次加载会一次性拉取本地，往后会从本地读取数据，所以还需考虑缓存，以及app各个版本的兼容问题。如果开发修改了某些字段，可能会导致其他版本的APP崩溃。RN及H5都需要考虑中间页、白屏、回退按键、字体适配、内存使用及缓存、键盘、日历等。

2、页面交互范围

内部页面

1、上下联调测试

2、页面降级方案

3、页面兼容性

4、页面与接口兼容性

外部页面

1、申请外部联调人员

2、确定内外部联调时间

3、是直接跳转还是中间页跳转

4、跳转后是否能回退

5、上线外部排期是否支持产线验证

3、页面通用测试方法

通常分APP未启动、APP在前台、APP在后台三个阶段。当APP在前台时，可以用各种手势、系统按键、辅助软键、前进、后退、系统事件等去考虑。

###4、前后端传输文件格式

• json
• PB
• xml
• html
• css
• js
• png

这边主要提一下json、pb、xml三个网络传输协议。
xml是最早的网络传输协议，不单单用于网络层的传输协议，还常见于各种配置文件中，在移动开发中也常见但是不是主流的网络传输协议。它的优点是解析快，但是效率高，且体积大，容易消耗流量。
json是一种轻量级的数据交换格式。它较xml格式更简单且体积小，并天然对JavaScript支持，更适合移动端对流量和内存的控制。
pb是Google提供的一种数据序列化协议，它的速度比json快，但是缺点是二进制存储易读性很差，但优点就是安全性好。在抓包过程中，以proto结尾的便是PB格式的请求。

注意点：资源文件是否存在、PB文件是否更新、PB文件移动端和后端是否部署、PB格式是否可以降级。

其他文章，欢迎关注微信公众号测试架构师养成记。