Charles常用mock技巧

背景：在测试前端js逻辑时，经常需要准备不同场景下的数据进行交互测试，如果是准备真实的数据（存储在数据库中），有时候会比较费时费力。这个时候我们可以使用代理工具Charles来进行mock，这将大大提高前端交互测试的效率，Charles mock的方法有以下3种。

1. breakpoints setting

入口：proxy–>breakpoints settings


根据需求设置即可，设置后相应接口在调用过程中会被拦截，此时可人为干预修改response数据。（注意前端如果异步请求超时时间设置短的话，你的手速不一定来得及改了…）

2. map local

入口：tools–>map local
或者直接先抓包，然后在要mock的接口上右键，选择map local


map from中就是你要mock的接口，map to中是你要把上面那个接口的response数据替换成的mock数据，一般是本地的一个json文件，注意格式要和接口出参定义一致，可以事先copy下来，再手动修改数据。设置完成后，调用到该接口时，请求结果直接被替换成你本地的json文件。需要不同场景下的数据的话，就修改本地的json文件。

4. map remote

入口：tools–>map remote
或者直接在要mock的接口上右键，然后选择map remote

场景1：map to里设置成自己写的接口（可以用Flask写，uwsgi启服务），设置后调用该接口时会重定向到你自己写的接口，从而获取到你自定义的response。
场景2：要测试的接口部署在另一台服务器上，或者另一个测试环境。可以利用这个功能进行仿真环境测试，例如我们有个页面嵌在支付宝里，此时需要改动一个后端接口，但是由于没有支付宝的内测包所以无法在测试环境测试接口改动后造成的影响，此时可以利用代理，把线上的接口抓包远程映射到部署在测试环境的接口，这样就能实现仿真环境下的测试了。重定向到页面URL也行，可以在仿真环境中测试页面的兼容性。