十二、Charles Mock实战

1. 目录

• Charles工具介绍
• Charles Mock实战

2. Charles功能

• 支持SSL代理支持流量控制
• 支持重发网络请求，方便后端调试
• 支持修改网络请求参数
• 支持网络请求的截获并动态修改
• 可以自动将json或xml数据格式化，方便查看

3. Charles安装

• 网址：https://www.charlesproxy.com/download/

image.png

4. 抓包原理

image.png

5. http抓包

• 确认端口
• 发送http请求
• 查看数据信息

• 设置代理

  
  
  image.png

• 打开本地代理设置

  
  
  image.png

模拟http抓包

1. 抓取http请求

• 本地发起http请求：curl http://rest-assured.io -x 127.0.0.1:8888，-x使用代理
  
  image.png

image.png

6. https抓包

• 安装证书
  • PC端证书：mac、windows

  • 移动端证书：android，ios

    
    
    image.png
    
    
    image.png

• 设置ssl

  
  
  image.png

• 具体安装步骤：

模拟https抓包

1. 抓取https请求

• 本地发起https请求：curl https://www.baidu.com -x 127.0.0.1:8888 -k，加上-k才能发https的请求
  
  image.png

• 发现抓的包为unknown，此时应安装证书

  
  
  image.png

2. 配置证书和ssl后再抓包

   
   
   image.png

7. 移动端代理配置

• 设备和电脑处于同一wifi
• 网络设置
  • 服务器ip地址

  • 端口

    
    
    image.png
    
    

• 安装证书

  • 系统浏览器访问chls.pro/ssl
    

    image.png
    
    
    image.png

  • 允许抓包

    
    
    image.png

  • iOS：描述文件中安装证书

• iOS：信任证书

8. Charles Mock实战

• Mock：修改数据模拟各种场景

限速模拟

• 常见网络类型

• 模拟带宽

• 丢包延迟

• 点击小乌龟进行限速模拟

  
  
  image.png

• 设置宽带

  
  
  image.png
  
  
  image.png

断点

image.png

1. 编辑请求

• 右键某个接口选择Breakpoints
  

  image.png

• 当出现目标接口时，就会进行拦截

  
  
  image.png

• 编辑请求，Edit Request-> Add-> Execute

  
  
  image.png

2. 编辑响应

• 进入proxy-> Breakpoint Settings

  
  
  image.png

• 双击保存好的断点，只选择Response

  
  
  image.png

• 编辑响应

  
  
  image.png

要注意网络超时问题，因为在修改断点的时候，网络请求并未停止。

image.png

Rewrite进行Mock

1. Rewrite原理

   
   
   image.png

2. Rewrite实战

• 修改雪球行情页面的股票名称
• 修改雪球行情页面的股票价格
• 修改雪球行情页面的请求头信息

3. 进行Rewrite设置

• 进入Tools-> Rewrite

  
  
  image.png

• Rewrite设置

  
  
  image.png

• 刷新页面，目标位置修改为自定义字段

  
  
  image.png

• 使用正则表达式修改股票价格，修改时一定要勾选Regex
  
  image.png
  
  
  image.png

• 修改请求数据，测试H5S的时候用得多，因为H5跨域（跨域是指，请求的URL中协议、域名或端口任意一个与当前的URL不同，称为跨域）的场景较多

  • 将头信息中的User-Agent修改为自定义字段
    

    image.png

  • 进行Rewrite设置

    
    
    image.png

  • 刷新页面，发现请求头的User-Agent修改为自定义字段
    

    image.png

• 增加头信息

  
  
  image.png

• 增加请求信息

  
  
  image.png

MapLocal进行Mock，实现复杂的Mock测试

1. MapLocal原理

• 客户端的请求并未发给服务端，而是将本地文件当做Response返回给客户端

  
  
  image.png

2. MapLocal实战

• 把百度首页修改为自己写的json文件

  1. 创建baidu.json文件
     

     image.png

  2. 对百度的url进行MapLocal

     
     
     image.png
     
     
     image.png

  3. 刷新页面，查看结果

     
     
     image.png

• 实现一个小型的服务器
  • 需求：
    1. 请求携带正确用户名——返回token
    2. 请求携带token——返回登录成功信息
  • 实现：
    1. 创建token.json和login.json
       
       image.png
       
       
       image.png

    2. 设置MapLocal

       
       
       image.png
    3. 发送请求：
    • curl https://www.jd.com?get_token=feier -x 127.0.0.1:8888 -k
    • curl https://www.jd.com?token=123456 -x 127.0.0.1:8888 -k
      
      image.png

• 修改雪球行情页面的股票名称
• 修改雪球行情页面的股票价格

  1. 获取响应数据queto.json文件
     

     image.png

  2. 修改文件中三处位置

     
     
     image.png

  3. 进行MapLocal设置

     
     
     image.png

  4. 刷新页面

     
     
     image.png

  5. 直接修改queto.json文件保存后，直接刷新页面便可实现修改，方便进行Mock

MapRemote实现切换测试环境

1. MapRemote原理

   
   
   image.png

2. MapRemote实战

• 访问百度，转发至京东

  1. 设置MapRemote

     
     
     image.png

  2. 刷新页面，发现百度首页跳转到京东商品页

     
     
     image.png

• 访问开发环境，转发至测试环境
• 前端：http://stuq.ceshiren.com:8081/#/mapLocal
• 开发环境接口：http://39.102.36.84:8089/report/showMapLocal
• 测试环境接口：http://39.102.36.84:9098/report/showMapLocal

1. 设置MapRemote

image.png

image.png

2. 刷新页面，结果开发环境（端口8089）跳到了测试环境（端口9098）

image.png