本文中有引用的文章：

• 腾讯-AllTests软件测试-弱网测试工具-QNET
• 浅谈APP如何进行弱网测试

本文核心：

• 四、网络测试工具

前言

网络测试：

1、无网

问题示例：没有提示

优化方案：

1、Toast提示”请求失败”（与2不共存）

2、页面显示无网络页面，内含刷新按钮（与1不共存）

没有退出操作页面，支持退出。而不是无网络时候，卡住不动。

2、弱网

具体可优化问题：详见下节 弱网问题与优化

一、弱网测试的关注点

1、关注点

弱网测试的目的就是尽可能保证用户体验，关注的关键点包括：

以下摘自：腾讯-AllTests软件测试-弱网测试工具-QNET

1、页面响应时间是否可以接受，关注包括热启动、冷启动时间、页面切换、前后台切换、首字时间，首屏时间等。

2、页面呈现是否完成一致。

3、超时文案是否符合定义，异常信息是否显示正常。

4、是否有超时重连。

5、安全角度：是否会发生DNS劫持、登陆IP更换频繁、单点登陆异常等。

6、大流量事件风险：是否会在弱网下进行更新Apk包、下载文件等大流量动作。

2、实际测试点总结

以下摘自：浅谈APP如何进行弱网测试

弱网环境测试点总结

完成弱网环境搭建后，一起来梳理下弱网测试场景和测试点。

场景一

弱网环境下某个操作响应时间

「原因」APP
用户对等待时间容忍度低，如果弱网环境Loading
超过5s，用户很容易Kill
应用后再次进入应用

「测试点」性能测试中，加入弱网环境测试点，检测各个场景网络请求的API
消耗时间

场景二

弱网环境下直至超时，UI
界面友好度&APP
是否稳定

「原因」容错机制主要是考虑弱网情况下带来的不稳定，常见的问题是：Loading
超时导致ANR or Crash

「测试点」弱网环境直至超时，判定为断网状态，界面提示友好且理解无歧义

场景三

断网环境下，是否自动重发请求

「原因」不同模块，开发对请求处理不同。测试前可了解，代码是否支持自动重复请求，自动重发请求的频率是什么？

「测试点」断网后恢复网络，是否堆积网络请求（目前来说理财模块10s左右无返回，则会重发请求），此时请求和返回正常情况下，是否出现异常情况。比如1次支付操作，断网后堆积多个支付请求，恢复网络后因堆积多个支付请求，是否完成多次支付

PS
：断网后恢复网络，考虑APP
进行操作目的是否伤害用户体验，通过哪种手段可以达到操作目的同时用户体验无感或者低伤害

比如，微信希望在线升级某些内容，会自动监听用户是否插着电or
连着WiFi
，一旦监听符合上述场景，APP
自动升级：

• 插电场景：确保升级过程中，耗电不会导致手机低电量甚至没电
• WiFi
  场景：确保升级过程中，流量消耗不会使用用户话费中流量包，不会导致因消耗话费流量伤害用户体验

场景四

网络请求中，kill
进程 （导致APP登录状态掉线）

• 登录同一个账号成功，应该不继续相同网络请求
• 登录不同账号成功，应该不继续相同网络请求

常见弱网问题和原因分析

场景一

上传大图或者多图时，在弱网络环境下出现进度条走到一半卡住，然后又从头开始

「原因」采用分段上传方式，直至请求超时，分段传输没有结束，代码逻辑不对，导致每次重试都重头上传，一直循环

场景二

在弱网络环境下，容易出现登录不上或者登录后立即掉线

「原因」登录没有缓冲机制，而请求超时时间的设置没有区分同网络情况

「解决方案」建议开发针对WiFi、2G、3G、4G、5G
设置不同的超时时间

场景三

弱网络环境下，请求的数据返回时间较长，等待的过程中，如果页面上的相关控件仍然可以操作，则容易出现闪退现象、触发底部时获得原页面请求数据。

「原因」依赖数据的控件操作，在数据返回前没有做兼容处理

场景四

搜索时输入关键字会连续发请求，停下时，显示最终的关键字搜索结果，但很快又会被前面的关键字搜索结果覆盖了。

「原因」中间的请求返回较慢，显示了最终的结果后，之前的请求返回的数据应不做处理。

其他问题场景补充：

1、用户登录应用时下载初始化数据，下载过程中因网速太慢点击取消并重新登录，数据下载过程中、下载失败后，未进行数据回滚，中止后重新下载，出现数据重复。

2、用户点击数据上传，数据上传过程中网络弱且不稳定，基于联网状态自动触发数据上传，导致出现数据重复写入，形成脏数据

3、在弱网环境下，用户输入用户名和密码点击登录，应用链接超时后，按照强网业务逻辑处理，导致返回超时异常。

4、在弱网环境下，用户输入用户名和密码后点击登录，数据下载超时，加载数据严重依赖于后来的异步加载。数据还没来得及返回，应用跳转到下个activity，导致崩溃。

二、弱网网络测试方案

常见方案：

三、弱网相关术语

1、衡量网络好坏的标准

（1）带宽（吞吐量）：单位时间内传输的数据量（bps），反映网络的传输能力

（2）丢包：数据丢包个数=发送的数据包数-接受的数据包数，反映为网络的可靠性

（3）时延：数据包从发送开始到接受到该数据所耗费的时间，反映网络速度

（4）抖动：指时延的变化，反映网络的稳定性

（5）乱序：指接受到的数据包顺序和发送顺序不一致的次数，反映网络稳定性。乱序比较 严重时，丢包也会比较严重，所以一般以丢包

2、术语

2.1、上/下行带宽Bandwidth（kbps—千比特每秒）

上行带宽（上行速率）：本地信息上传到网络的速率
下行带宽（下行速率）：网络信息下载的本地的速率
注：上行速率不等于下行速率，在大多数情况下，下行与上行带宽的比率可达到10:1

2.2、上/下行丢包率packet loss（%）

数据在网络上是以数据包未单位传输的，由于一些原因不能百分百得完成，这时网络会自动根据协议来补办，网速快线路好得时候，包得损失会非常小，补包就会很容易完成，但是线路较差得时候，数据得损失量就会很大，补包就不可能百分之百完成，这种情况下就会造成丢包。
丢包率 = 1 - 单位时间内接收得数据包数 / 发送的数据包数

查看丢包率可以通过ping命令来查看。

2.3、上/下行延迟delay（ms）

1-30ms：极快，几乎察觉不出有延迟
31-50ms：良好，没有明显的延迟情况
52-100ms：普通，能感觉出网络有明显延迟
大于100ms：差，有卡顿，丢包并掉线现象

2.4、DNS延迟（ms）

DNS是域名解析服务器，延迟就是和这个服务器的连接速度，DNS的作用就是把网址解析成IP地址，因为电脑网络连接只能通过IP连接。

3、各个网络环境参数

常见网络设置参考：

网络超时设置参考：

特殊网络设置参考：

四、网络测试工具

1、可直接安装的弱网工具

1.1、苹果弱网测试工具-Network Link Conditioner（支持iPhone和Mac）

1.1.1、iOS手机自带弱网测试工具-Network Link Conditioner

如下图：

1、进入设置找到开发者(Developer)选项。（如果没有该选项，请将手机接入开发人员电脑Xcode，即可自动生成。）

2、在开发者(Developer)选项中 –> Network Link Conditioner

2、打开Enable，并选择需要测试的网路开始测试

3、选择完毕后ios手机及会变更成指定网络环境（全局变更），可以开始测试弱网情况。

4、如果需要自定义
①、选择某个Profile，进入其详情

②、在该Profile的详情里，选择Duplicate Profile，修改对应数值后，即新增完成。

每个类型中可以查看对应的数据。数据内容包括如下部分。

1.1.2、Xcode的Additional Tools for Xcode弱网测试工具-Network Link Conditioner

Xcode弱网测试工具的下载及安装过程如下：

1、进入 https://developer.apple.com/download/all/

2、搜索 Network Link Conditioner

虽然没有Network Link Conditioner的选项。但其实其实包含在Additional Tools for Xcode 中的。

3、下载与自己xcode版本匹配的插件。如 Additional_Tools_for_Xcode_14.1.dmg

4、安装 Additional_Tools_for_Xcode 。安装过程如下图：

5、安装完后，即会在你的系统设置里新增一个Network Link Conditioner选项。

6、Mac版的Network Link Conditioner使用与iOS版没什么差别。

1.2、腾讯弱网测试工具-QNET（目前仅支持Android）

1、工具下载：

QNET官网(已失效)：https://wetest.qq.com/products/qnet

其他地址(亲测有效-2023.05.17)：http://www.5577.com/s/563515.html

2、工具使用/测试步骤：

①打开工具，授权登录

②选择应用，开启模拟

③在应用内，可自行按需切换模拟环境

2、网络抓包代理工具

2.1、Charles

详见：Charles弱网模拟

2.2、

五、移动端下各类诊断方法与工具

以下内容摘自：移动端下各类诊断方法与工具

工具/方法	OS	使用场景及使用说明	优点	缺点	工具地址
华佗ping诊断	android/ios/pc	获取客户端IP，ldns，域名请求ip，请求耗时 https://cloud.tencent.com/developer/article/1489036	无需客户端，直接浏览器请求	有时会获取不到ip,dns信息，或不准确	https://ping.huatuo.qq.com/
腾讯云诊断APP	android	分析dns劫持，http 302劫持。获取客户端IP，ldns，域名请求ip，请求耗时，可靠性高，信息较全 https://cloud.tencent.com/developer/article/1489043	无需root	需要安装app	http://imgcache.gtimg.cn/huatuo/apks/capture.apk
iNetTools	ios	获取dns解析，延迟，分析dns劫持 https://cloud.tencent.com/developer/article/1608239	可准确获取ping数据和域名解析信息	无法对url进行诊断，需要安装app	https://itunes.apple.com/cn/app/inettools-ping-dns-portscan/id561659975?mt=8
笔记本共享热点，通过fiddler抓包	android/ios/pc	pc共享热点，通过fiddler来进行抓包，分析业务的http请求	fiddler可抓https包	自己模拟可以，让用户来用比较困难	https://www.telerik.com/fiddler
手机WIFI接入，走云主机代理抓包	android/ios/pc	检查手机端问题，还是网络问题	对用户侧操作比较简单有些公司wifi有限制代理	网络环境变了，请求网络是云主机到服务端	https://www.telerik.com/fiddler
PC andorid模拟器 Nox	android	在pc下用模拟器进行测试，抓数据包，分析业务的请求	可轻松root安装抓包软件	自己模拟可以，让用户来用比较困难	https://cn.bignox.com/
华佗抓包工具	android	需要真实获取用户请求数据包 https://cloud.tencent.com/developer/article/1489050	可直接移动端抓包，无需root	部分app无法进行抓包	http://imgcache.gtimg.cn/huatuo/apks/capture.apk
Stream 抓包工具【推荐】	IOS	需要真实获取用户请求数据包，可抓https请求 https://cloud.tencent.com/developer/article/2116252	可直接移动端抓包，无需root	部分app无法进行抓包	https://apps.apple.com/cn/app/stream/id1312141691
QuickSource 抓包工具					https://apps.apple.com/cn/app/quicksource/id1449472048

End

一、div设置多个class

在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：

1
2
3

<p class="important warning">
This paragraph is a very important warning.
</p>

这两个词的顺序无关紧要，写成 warning important 也可以。
我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：

1
2
3

.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}  //相当于两个class有相同的样式。

其实是一个DIV拥有两个Class 空格并不是一个CLASS，用jquery你只需要(“.warning”)就可将其选定。

一、启动

1、启动服务

1、cd 到 package.json 所在层

2、执行npm install/yarn install，

​ => 执行后会生成node_modules

3、通过npm run执行package.json中scripts里提供的命令(里面的命令是自己可以改的)。如：

1

npm run dev:client

执行结果在终端成功的话，显示为：Compiled successfully.

如：

分析本步骤的命令执行的内部原理

观察得执行该命令，其实会去执行当前目录下的bulid中的webpack.dev.js文件

打开该文件

2、URL主路径的获取

http://localhost:9000/ 其中9000即是上面的端口号

3、URL路径的获取

如何得知你的界面的URL地址

4、浏览器访问

在浏览器中输入地址

http://localhost:9000/inspection/HomeEntrance

• H5页面获取屏幕宽高

document.documentElement.clientWidth;
document.documentElement.clientHeight;

用window.screen.height;window.screen.width;并不准确，当部分手机页面本身有超出屏幕宽度的元素时，会将超出部分也计算进内。目前遇到的机型有ZTE。

进程线程

react-异常状态记录

来源：react-异常状态记录

1.

日志信息：React does not recognize the fieldTypeprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasefieldtype instead. If you accidentally passed it from a parent component, remove it from the DOM element.
问题来源：react
原因：DOM节点中被传入了组件属性

1
2
3
4
5
6
7
8
9

const resPorps={
  fieldType:'.txt',
  marginLeft:10,
};
return(
  <div {...resProps}>
    test
  </div>
)

如上，fieldType不属于DOM的默认属性，对于React来说，这是一种冗余的写法。
解决办法：将不属于DOM的属性提取出来

1
2
3
4
5
6
7
8

const resPorps={
  marginLeft:10,
};
return(
  <div {...resProps} fieldType='.txt'>
    test
  </div>
)

参考文章：https://segmentfault.com/q/1010000017860880

安装类库

某一语法：npm install [<@scope>/]@
某些示例：
//安装某一指定版本
npm install test@0.0.2
//安装指定范围版本
//安装指定范围版本（大于）
npm install test@”>0.0.1”
//安装指定范围版本（小于）
npm install test@”<0.0.1”
//安装指定范围版本（之间）
npm install test@”^0.0.2”
npm install test@”>=0.0.2 <0.0.3”

更新类库

某一语法：npm update [-g] […]
某些示例：

1
2
3
4
5
6

//更新到最新版本
npm update test
//更新到某一版本
npm update test@"0.0.2"
//更新到某范围版
npm update test@"^0.0.2" //即等于npm update test@">=0.0.2 <0.0.3"

测试app外的h5直接打开app

前言：app路由地址生成器

网页地址及内容：请点击dvlp_h5_open_app_app_route_url_demo.html查看。

demo使用的json数据dvlp_h5_open_app_app_route_url_demo.json

一、app外h5地址生成及解析器网页

网页地址及内容：请点击dvlp_h5_open_app_browser_url_demo.html查看。

demo使用的json数据dvlp_h5_open_app_browser_url_demo.json

1、网址组成元素

1.1、主地址(必传)

1.2、app参数信息(非必传)

1.3、其他参数信息(非必传)

2、网址组成方式

2.1、直接地址

2.2、自己构成

3、网址解析器功能

4、网址生成器功能

5、执行按钮

5.1、如果本地址生成及解析器，是正常在app外的浏览器打开的

那点击按钮，直接打开到指定页面。

5.2、如果本地址生成及解析器，是正常在app内的WebView打开的

那点击按钮，打开外部浏览器，浏览指定页面。

iOS：无法打开外部浏览器。

Android：可以直接打开外部浏览器。

二、测试工具网页

公共js

一、app内的h5音频的自动播放支持

• 网页地址及内容：请点击audio_autoplay_demo.html查看。

二、app内的h5视频的自动播放支持

• 网页地址及内容：请点击video_autoplay_demo.html查看。

测试app内的h5调用app的网页

一、测试h5调用app的网页

1、测试h5调用app的网页1(硬编码，不推荐使用)

网页地址及内容：请点击test_h5js_demo.html查看

支持的功能：

• 点击对应按钮，让h5调用app提供的方法，并传递对应的参数。

2、测试h5调用app的网页2(自动编码，推荐使用，能够根据json文件自动化布局)

网页地址及内容：请点击dvlp_h5js_demo.html查看。

demo使用的json数据dvlp_h5js_demo.json

新增支持内容如下：根据json数据，自动布局html内容

• 1、方法名、参数、参数说明，输入框化，以支持任意桥接方法

  • 字符串转方法

• 2、输入框内容，json化

  • json数据，先内嵌在html中。因为先只支持一个，所以直接更新到文本框中（内容：方法名、参数、参数说明）

• 3、输入框内容，支持从url中获取单个示例的数据（因为只有一个，所以直接通过dataJson传入输入框中的各个参数）

  • 网页副标题增加数据来源标识，以区分数据是html本身内嵌的数据，还是从url中获取

  • 因为参数是从url中获取的，所以需要考虑编码问题。(虽然放在系统浏览器中可以通过)

    • 参数值支持非中文的字符串，可以不用编码
    • 参数值支持中文，需编码
    • 参数值支持json对象，需编码

  • 直接将从url中获取到的参数值，更新到文本框中，以可直接执行

  • app中将输入框中的各个参数组成json，提供给h5。提供方式为将各参数添加到url中(每个url的参数，都需要先编码，否则当参数中含中文，或者是非字符串对象的时候，解析的时候会有问题，虽然放在系统浏览器中可以通过)

  • app中提供json数据，并列表化。app选中对应项，将所选项对应的json数据传递给url的参数。

  • json数据支持section形式，以区分不同类型的示例。

• 4、输入框内容，通过之前支持的json，提供各种demo数据功能

  • json数据，先内嵌在html中。根据json数据，展示可选操作。
  • 选中任意可选操作，更新文本框内容：方法名、参数、参数说明

• 5、输入框内容，支持从url中获取多个示例的数据（因为要支持多个，所以是通过fileUrl传入json文件路径）

  • 网页副标题增加数据来源标识，以区分数据是html本身内嵌的数据，还是从url中获取。如果是url中获取的，那来源是单个示例使用的dataJson各参数，还是多个示例使用的fileUrl参数。

  • 根据json数据，展示示例列表。（若只有一个数据，不显示列表，直接使用；若有多个，默认将第一个更新到文本框中）

• 6、网页html支持跳转到demo示例

• 7、增加h5调用app后，app返回给h5的回传值显示及示例。

前言

1、相关文档

• T-Sec 天御 风控平台

问1：同盾和数美的风控为什么返回的是各个不同的加密blackBox，而不是其解密后都对应到的统一deviceId？

答：已知：同一设备同一用户账号，7月1号使用时候，app取到风控sdk返回的设备指纹1；7月2号使用时候，app取到风控sdk返回的设备指纹2；

作用1：由于后台请求都是使用设备指纹，如果设备指纹1和设备指纹2是一样的，则会导致某个指纹过期了，却一直在用。其实可以简单理解为该设备指纹使用blackBox，等价于app中的accesstoken。

一、属性列表

deviceLabels

二、属性介绍

1、PC模拟器：b_pc_emulator

2、adb开启 b_adb_enable

device_suspicious_labels

相关文档

• 数美天象产品API接口说明文档
• 数美 Flutter Plugin 接入手册
• 数美管理后台 www.fengkongcloud.com

以下来自三方参考

详见：app权限_定位.xmind