基于Charles，如何利用代理技术进行接口mock测试(一)

1、工具选择

作为一名测试工程师，抓包是最常用的分析问题的手段，而Charles又是最常用的代理工具，之所以使用它有一下几个原因：

• 代理功能
  • http/https、socks5
  • 限速模拟
  • 断点调试
• 转发
  • 映射：让发往a网站的请求返回b网站的内容
  • 重写：自动把请求和内容篡改掉
• 工具：拼装请求、重放请求、重读请求

上面提到了对Charles代理工具的种种分析，学海无涯，每个知识点都需要认真研究，慢慢积累~

2、接口mock

注：以下操作默认已经安装Charles并且设置好信任证书，可以成功代理

2.1 远程服务mock(Map Remote)

• 应用场景
  比如公司现在已经上线了一个网站，想测试一下它在H5内效果如何，但是新的版本还未来得及上线，又想在真实的系统中体验下运行效果，就可以使用远程服务mock的方式。
• 实操演示

这里以访问百度首页，然后将请求转发至testerhome首页为例

1）在Charles-Tools中选中Map Remote

2）打开后勾选Enable Map Remout，再点击Add

3）设置映射自(Map From)的路径、协议(不选默认http,https都支持)和映射至(Map To)的路径、协议；完成后点击OK

4）这个时候我们再浏览器中输入www.baidu.com进行访问，发现实际访问的是testerhome，从抓包也可以看出来显示为Mapped from remote URL: https://www.baidu.com/

2.2 Rewriting traffic with Breakpoints

利用Breakpoints，可以对指定的HTTP或HTTPS请求在到达客户端之前进行拦截暂停，暂停后可以对原数据进行修改，例如对返回值进行修改，修改完成后再讲请求发送至客户端

• 应用场景
  有时候我们对界面进行检查，可能会涉及字段长度、数字位数、不同数值对应不同颜色或标识图片的展示等，如果纯依靠后端来构造复杂的数据可能没有那么方便，也可能会有大量脏数据产生，并且我们测试的目的只是为了验证前端的展示，所以这个时候可以利用Charles的rewrite功能来完成数据的mock；
• 实操演示
  1）在需要拦截的请求上右击选中“Breakpoints”
  
  2）在Proxy->Breakpoint Settings中勾选Enable Breakpoints,然后双击请求弹出Edit Breakpoint框，选中Response后OK
  
  3）这个时候我们访问testerhome首页，会发现者请求被拦截了，网站也一直处于加载等待响应阶段
  
  
  4）选中Edit Response，修改原标题栏中"社区“字段为”Charles社区",点击Execute
  
  5）查看testerhome首页，发现原标题字段已被成功修改
  

2.3 Rewriting traffic with the Rewrite tool

Breakpoint快速的实现接口拦截修改，但是如果每次都想要以相同的方式进行拦截修改就需要每次都进行手动触发，这样就很不方便，影响效率；因此我们可以使用Tools中的Rewrite功能来完成提前定义好接口数据的篡改规则，这样每次访问的时候就会自动拦截修改发送

• 应用场景
  同Breakpoint
• 实操演示
  1）Tools中选中Rewrite，然后设置需要拦截的请URL
  
  
  2）再选择Add一个重写规则，将返回值中的“TTF榜单”替换为“11111榜单”
  
  3）重新访问testerhome首页
  

3、补充说明

• 上述Rewrite功能，不仅可以对response进行修改，还可以对request进行修改，只是较为常用的就是对response进行修改。

• 上述例子中都是以web端做了演示，移动端的用法和此原理一致，要注意的是Android6.0以上的版本默认不支持代理抓https包了，需要让开发在App中添加个user配置项,下面是Android开发者官方给出的解释:
  

• 如果抓包后发现App无法上网，也需要开发做两个配置，具体可参考另外一篇博客：
  Charles(或fiddler)抓Android应用包，CA证书安装及代理后APP无法连接上网的解决办法

• 参考文档：

  • Charles官网：https://www.charlesproxy.com/documentation/using-charles/ssl-certificates/
  • 国际友人文章：https://deliveroo.engineering/2018/12/04/how-to-use-charles-proxy-to-rewrite-https-traffic-for-web-applications.html