在本篇内容将汇总之前在从0到1搭建的接口自动化框架所涉及到的代码仓库以及响应开发过程中解决的知识点说明。

代码仓库整理与说明

上面的仓库，其中有一些是公开的；另外一些只有购买了本专栏的同学可以查看哦，购买之后可以牛客私信我gitee账号，我来给大家加到仓库内。后续内容重点说明了以上这些仓库的开发注意事项。

browsermob-proxy 工具使用说明

本小节主要总结browsermob-proxy这个代理工具的主要功能。browsermob-proxy是一个基于java开发的代理工具，有两种使用方式，一种是作为一个独立的应用使用；另外一种是内嵌在代码中进行使用。本文主要简单介绍一下作为独立应用如何使用browsermob-proxy。

官网地址：https://github.com/lightbody/browsermob-proxy  

一般在代理的时候主要步骤包含以下几个步骤：

1. sh browsermob-proxy -port 9000 启动代理应用
2. 使用以下的请求来开启端口并设置代理规则，具体的也可参考官网中的说明：

curl --location --request POST 'http://127.0.0.1:9000/proxy开启端口
curl --location --request GET 'http://127.0.0.1:9000/proxy' 获取已开启的代理端口

curl --location --request PUT 'http://127.0.0.1:9000/proxy/8081/whitelist' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'regex=.*app.bilibili.com.*'
设置端口的白名单

curl --location --request PUT 'http://127.0.0.1:9000/proxy/8081/har' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'captureHeaders=true' \
--data-urlencode 'captureCookies=true' \
--data-urlencode 'captureContent=true'
设置抓取的内容并开启抓取

curl --location --request PUT 'http://127.0.0.1:9000/proxy/8081/har' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'captureHeaders=true' \
--data-urlencode 'captureCookies=true' \
--data-urlencode 'captureContent=true'
使用同样的请求即可终止上一次抓取内容，并开启新的代理

然后 开始操作app,配置相应的代理端口：触发接口访问。

这里有一个问题是配置抓取https文件的时候要在官网上下载https://github.com/lightbody/browsermob-proxy/blob/master/browsermob-core/src/main/resources/sslSupport/ca-certificate-rsa.cer 文件，然后再手机的【密码与安全】-》【系统安全】-》【凭据存储】-》【从存储设备安装证书】进行证书的导入。在android手机上安装可以把后缀改为.pem 也是可以安装的。

获取到的抓取日志如下所示：

可以看到我们所需要用到的自动化生成数据在抓包的内容都包含，因此整体的数据分析都是基于这样的数据结构解析进行的。

browsermob-proxy二次开发说明

在之前我们在接口自动化中，为了进行批量case生成，使用了browsermob-proxy这个工具进行了抓包，并解析这些请求来自动化的生成case。但是在生成web端的管理工具代码编写时 因为端口号和原始的网页端口号不同，就会存在CORS问题。一般解决CORS问题，需要进行两步操作：

1. 在js中进行请求的时候 移除Access-Control-Allow-Origin header可以实现浏览器发出的请求中不包含option请求
1. 
2. 需要修改browsermob-proxy的源代码，从而在服务中在respone的header中增加绕过CORS的header。
1. 
2. 具体代码可参考：https://gitee.com/sophia111111/browsermob-proxy中的CorsFilter.java

在这个修改的过程中遇到的主要问题：

1. 看不懂这个项目的代码结构，不知道如何打包
2. 不知道应该在哪里修改代码

为了解决上面的问题首先看了项目的readme文件 才发现使用mvn -DskipTests命令即可实现打包，项目打包的产物在/Users/lujuan/IdeaProjects/browsermob-proxy/browsermob-dist/target 目录下。同时该目录下的browsermob-proxy-2.1.6-SNAPSHOT-bin.zip 的产物就是我们之前下载使用的内容。

为了弄清楚在哪里修改代码，灵机一动搜索了一下”/proxy“这个路径，因为这个是接口定义的路径，那么相应的我们就能找到接口实现的代码，从而进一步完成相应的修改。

因此我们可以看到具体的代码在browsermob-rest目录下。

那么这个时候我们可以看到该项目sever端用到的一些主要框架涉及到guice、Jetty这些关键词，查找代码我们发现，实现的关键应该是修改JettyServerProvider之类的代码，但是对于如何修改还一头雾水。因此用了很多不同的关键词在网络上进行搜索。后来发现browsermob-rest只是做了相应的类的di，具体的ioc代码是在：

因此相继在这两个文件中做了修改。最后发现要想修改还是需要尝试修改那么因此搜索了”how to add own filter in guice Filter“，最后看到了一个学习的源码 https://github.com/ninjaframework/ninja/blob/develop/ninja-servlet/src/main/java/ninja/servlet/NinjaServletFilter.java#L52  ，所以进行了尝试性的修改，最终得以解决了此CORS的问题。

关键就是实现以下替换：

详见以下commit：https://gitee.com/sophia111111/browsermob-proxy/commit/3fb98ee66dfc5c8c43a6efc6244ddab765b6530b

elephant_frame_helper IDEA插件开发说明

在我以往的使用经验中，这种基于配置话的书写方法在运维过程中麻烦的地方就在于case的配置文件的定位，因此为了提高书写case的便利性以及愉悦性，配套开发相应的IDEA插件用于快速定位case.yaml以及api.yaml 文件。

具体的使用使用演示如下：

https://gitee.com/sophia111111/elephant_frame_helper/blob/master/d1ccc7302752fc2eaca38444a795ab62.mov 

大家可以再idea中配置以下插件：

https://gitee.com/sophia111111/elephant_frame_helper/blob/master/elephant_frame_helper-2.0-SNAPSHOT.zip 

Idea插件配置配置

在Preference中选择Plugin从本地进行导入。

Idea插件开发步骤

在idea中新建工程并选择IntelliJ Platform Plugin：

然后需要修改plugin.xml文件来创建配置的功能项：

原始xml如下图所示：

我们在goto的菜单栏中增加goto按钮：（需要在plugin.xml文件中编写按钮位置）

会执行GotoTestDataAction这个class类，在图中的src的main目录下。下面的代码需要更具idea的规则来具体的编写，因为篇幅的问题，具体的代码实现可以在以下的gitee的链接中找到。

插件项目的编译开发方法：在下图中点击buildPlugin，生成的产物在build的distribution中。

使用下面的按钮可以直接debug相应的代码。

需要配置以下内容来使得打包会更加的容易：

elephant_apiFrame Python包开发说明

在python中打安装包需要的是在项目下面生成setup.cfg文件，然后执行相应的命令即可。

elephant_apiframe打包和安装方法：

打包：在根目录下执行 python3 -m build ，