Charles工具的学习总结

Charles这款工具对测试同学来说比较实用，它一般用来监控客户端各个程序所有连接互联网的HTTP通信

Charles的主要功能：

1. 截取HTTPS/HTTP网络封包
2. 通过重发网络请求进行后端调试
3. 修改网络请求参数
4. 截获网络请求，对请求参数进行动态修改
5. 模拟慢速网络

Charles的安装和配置

一、Charles客户端配置

1. 进入官网 https://www.charlesproxy.com/ 进行下载，一键安装
2. 打开Charles，安装证书

点击“安装证书”---- 进入使用证书导入向导，选择本地计算机，下一步 ---- 将所有的证书都放入下列存储 ---- 浏览 ---- 收信人的根证书颁发机构，确定 ---- 安装证书成功
4. Proxy ---- 勾选 ”Windows Proxy” ，抓取电脑本地发送的请求，展开相关域
5. 针对请求栏中的一些带锁的请求进行允许查看操作：Proxy — SSL Proxying Settings — 勾选 " Enable SSL Proxying " ，允许SSL代理 — Add — Host : * Port：443 这样设置就可以使得所有带锁请求允许被操作

二、移动端配置

1. 查看Charles端口：Proxy — Proxy Settings — Port：8888，勾选” Enable transpare proxying ”
2. 查看电脑IP：Help — Local IP Address
3. 手机端WiFi配置：JDB_WiFi — 修改网络 — 代理 —自动 — 服务器：输入电脑IP 端口：8888
4. 返回Charles，界面弹出连接IP提示，点击Allow — 完成配置
   以上，完成了Charles的相关配置。

二、Charles的基本功能

Charles工具的几个重要按钮：

一、界面Structure 模式：

1. 以域名划分请求信息，便于定位需求分析和处理的数据
2. 请求的数据结构一目了然
   关键字段：Overview — 概要 Contents — 内容
   Sequence 模式：
3. 以数据请求速度快慢的顺序去执行，请求快的就在前面显示
4. 可以清晰的看到全部请求，以及请求中的资源请求、图片、文本、音乐等
   其中，Filter可以过滤请求

二、Mock 功能
Charles的 Map 功能分为两种：Map Local 和 Map Remote

1. Map Local ：将指定的网络请求重定向到本地文件
2. Map Remote：将指定的网络请求重定向到另一个网络请求地址

Mock 的主要应用：
1）测试接口。模拟接口返回的不同信息，为空，或其他情况

假设交易消息接口，有为阅读，已阅读（是否置灰）等多个状态返回
a）消息接口返回不同的状态时对应前端的展示
b）消息接口返回状态为空时对应前端的展示
c）消息接口出现异常时对应前端的展示
d）消息接口请求超时时对应前端的展示

2）测试页面展示以及兼容的时候，想知道某个字段的内容长或者短，或者空白时是如何展示的，或者一个图片的尺寸规格所对应的前端的展示情况也适用

依旧以消息接口来做测试。通过断点及模拟返回的数据，进行测试：
a）消息名称为空的时候对应前端的展示
b）消息内容为空的时候对应前端的展示
c）消息内容中含有特殊字符对应前端的展示
d）消息内容较长达到指定字符长度上限时对应前端的展示
e）消息内容较长超过指定字符长度上限时对应前端的展示

3）用来定位前后端问题的时候，更为直观
比如当前端点击跳转没有反应的时候，可以将链接地址拷贝到浏览器中查看时地址本身的问题还是前端无法调起手机浏览器的问题

Mock的操作步骤：

1. 选取想要mock数据的接口
2. 设置断点Breakingpoints
3. 刷新手机端该接口所在界面，以达到再次访问该接口
4. 第一次弹出页面询问是否要修改request，即是否修改请求参数
   此时不需要修改请求参数，可以直接点击 ” Execute ”
5. 第二次弹出页面为Response修改的界面，点击 “ Edit Response ”，点击Json Text查看当前的Response
6. 此时我们就可以对拦截下来的数据进行修改，修改完成后点击 “ Execute ”
7. 更改成功后，数据就会直接显示在APP界面上

三、地址映射
地址映射主要使用Map，分两种：Map Local 和 Map Remote

1. Map Local：将某个网络请求重定向到本地的某个文件
2. Map Remote：将某个网络请求重定向到另一个网络请求

Map Local的操作步骤：

1. 选中请求，保存响应：邮寄请求名 --> Save Response --> 将保存的响应复制到 bejson 格式化工具中转换 --> 修改字段 --> 保存
2. Tools --> Map Local Settings --> 勾选Enable Map Local
3. Add --> Edit Mapping --> Map From --> Path：Path中填写需求重定向的路径（可以在contents中查看POST）
4. Edit Mapping --> Map To --> Local Path --> Choose，选择保存到本地文件夹里的请求json文件
5. 手机端重新刷新该请求，可以看到修改了字段后的界面
6. 点击Tools，进入Map Local Settings 中可以查看地址映射
   Map Remote的操作步骤：
7. Tools --> Map Remote Settings --> 勾选Enable Map Remote
8. Add --> Edit Mapping --> Map From --> Host：测试环境Host
9. Edit Mapping --> Map To --> Host：线上环境Host
10. OK
11. 手机端刷新界面，Structure请求名显示线上环境host

四、限流功能
限流主要应用于模拟客户端弱网的情况下移动端的工作状况

操作步骤：

1. Proxy —> Throttling Settings
2. 勾选 Enable Throttling ，勾选完成后下方表项呈可修改状态，主要字段如下：

限流应用场景：测试在WiFi、2G、3G、4G的不同网络下的响应速度

1. 用户登录
2. 刷新页面
3. 上传图片
4. 搜索关键字等

实例1. 对某APP登录功能进行弱网测试

1. 带宽(kbps)：上行：10 下行：33.6
   此图左侧表项：点击登录 | 右侧表项：跳转至首页并提醒”登录成功”
   
   
   由上图数据表明，在10kbps的弱网环境下，从点击”登录”按钮，到跳转至首页并提醒”登录成功”总共耗时19s，响应速度慢

2. 带宽(kbps)：4G ：上行：8192 下行：16384
   
   可以从上图数据上直观看出，8192kbps的4G环境下，从点击”登录”按钮，到跳转至首页并提醒”登录成功”总共耗时3s，响应速度较快。