Jmeter录制前端打点接口

Posted 2023-05-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jmeter录制前端打点接口相关的知识，希望对你有一定的参考价值。

参考技术A 对于接口测试，大多数人下意识想到的后端接口，其实，除了后端接口，前端也有对应的打点接口的，那这些打点接口有什么用呢？一般来说这些打点接口是前端用来记录前端的相关参数在不同的界面跳转的时候，验证查看相关的数据是否读取与传入，方便自己调试的时候查看相关的数据，除此之外，这些打点数据可以用来做一些统计数据，查看前端哪些页面的访问情况，可以收集这些情况做大数据的分析。所以前端的接口，我们录制了主要了为了模拟移动端的打点，方便做数据统计分析用的，也可以作为移动端的一个压力测试，模仿用户高并发访问页面的数据。

一般来说，前端的打点数据接口和后端有些不一样，为了打点，除了会传入一些通用的字段数据外，还需要输入特定动作的字段，并且特定动作的字段，还会根绝不同的来源类型进行区分，所以相对后端接口来说，需要设置的选项多了不少。例如我自己现在录制的一个沙箱环境的微商城的查看商品的打点接口：

GET /s/pi-mall/1531564428887/i2.gif 这个接口看起来和后端的接口很多不一样，只有一个模块的区分，很多内容需要根据传入的数据进去区分的，具体的抓包截图如下：

从截图上可以看出，这个前端的打点接口需要传入2个url，

一个是左侧的网关接口（host ）： gateway.master.sandbox.terran.wxpai.cn

一个是商品详情页面的地址（url）这个地址才是我接口的真正页面地址：http://31612.sandbox.terran.wxpai.cn/mall/mobile/2.4.0/?#/detail?id=17810

然后下面是需要传入的20多个参数。

开始录制的时候，为了方便，我是用了fiddler的headers页面的 request header的内容，这样可以一次性传入所有的参数

复制的时候，发现有部分传入的参数的符号被改了编码样式：

GET /s/pi-mall/1531642985754/i2.gif?url=http%3A%2F%2F31612.sandbox.terran.wxpai.cn%2Fmall%2Fmobile%2F2.4.0%2F%3F%23%2Fdetail%3Fid%3D17810&title=%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85&ua=Mozilla%2F5.0%20(Linux%3B%20android%207.0%3B%20KNT-AL20%20Build%2FHUAWEIKNT-AL20%3B%20wv)%20AppleWebKit%2F537.36%20(Khtml%2C%20like%20Gecko)%20Version%2F4.0%20Chrome%2F57.0.2987.132%20MQQBrowser%2F6.2%20TBS%2F044109%20Mobile%20Safari%2F537.36%20MicroMessenger%2F6.7.1321(0x26070030)%20NetType%2FWIFI%20Language%2Fzh_CN&screen_width=360&screen_height=640&pixel_depth=32&screen=360x640&referer=http%3A%2F%2F31612.sandbox.terran.wxpai.cn%2Fmall&uid=55527&ent_id=31612&app_type=pi&domain=31612.sandbox.terran.wxpai.cn&user_mark=&device=KNT-AL20%20Build%2FHUAWEIKNT-AL20&os=Android&os_version=7.0&pf=wechat&pf_version=6.7.1321&ch=&prev_ch=&client_type=web&app=pi-mall&log_type=pageview&prev_page=%2Findex¤t_page=%2Fdetail%3Fid%3D17810&path=%2Fdetail%3Fid%3D17810&mod_path=%23%2Fdetail&prev_mod_path=%23%2Fdetail&product_id=17810&sharer_id=&_=1531642985753.49f305a6 HTTP/1.1

开始以为是被加密的时候改码显示了，所以手动一个个改回图一第一次看到参数的格式，并且把可能会换动的参数给参数化，例如 ent_id 、user_id、product_id 这一类的变量用 $ent_id 的格式进行才参数化，这样可以在录制循环前面加个加个自定义变量进行一次性输入。但是发现地址好长，需要对应着一个个参数位置去来回修改，看的眼睛都花了，而且调试了半小时，发现很容易改错了地方，老提示报错。于是决定采用parameters 部分逐个添加对应的参数和数值，这样就不用担心改错了参数了，并且可以和图一的参数表格一一对应，然后完成后的结果如下：

开始以为这样就可以设置成功了，于是单击执行这个任务测试了下，发现报错了：

java.net.URISyntaxException: Illegal character in fragment at index 180:

但是仔细的对着每一个参数和抓包的图一的数据对照，发现没写错什么啊，为什么会报这个错的？然后百度了一下这个错误，才知道原来前端的打点接口后面接的是url，很多格式需要转码，具体的解释如下：

（解答参考地址：https://blog.csdn.net/maybe_frank/article/details/78714449）

于是按照这个格式一个个的改会转码的格式(原来是自己一个错误的理解，擅自改回正常的显示格式引起的错误，一直以为前段打点接口传入参数内容和后端接口一直，原来是需要转码的)，这个坑踩的不冤，于是按照这个格式修改完毕后，重新执行了一次就OK了

终于顺利的完成了第一个前段打点接口的录制了。

Jenkins+Ant+Jmeter接口自动化测试（持续构建）

使用Badboy录制脚本，到处到Jmeter后进行接口自动化，后来想着可不可以用自动化来跑脚本呢，不用Jmeter的图形界面呢，选择了Ant来进行构建，最后想到了用Jenkins来进行持续构建接口测试。

　　上一篇讲到了Badboy录制Jmeter脚本后，可以在Jmeter进行回访，其实也可以直接在Jmeter进行录制脚本，我们打开Jmeter，

　　打开我们的代理服务器，然后设置

　　录制好脚本进行回放。

　　下面我们来用用使用ant来构建，首先呢，我们去下载Ant，下载后我们来配置环境变量，

　　再变量设置

　　然后再环境变量配置

　　path 增加E:apache-ant-1.10.1in

　　配置好后，在cmd下面去验证

　　配置成功，接下来需要需要从Jmeter复制ant-jmeter-1.1.1的jar包到ant的lib目录

　　我是在桌面新建了一个文件夹，C:UsersAdministratorDesktopant

　　然后把我Jmeter导出的文件给放到这个路径，接下来来配置build.xml

　　如下

　　<?xml version="1.0" encoding="UTF-8"?>

　　<project name="ant-jmeter-test" default="run" basedir=".">

　　

　　<property name="jmeter.home" value="E:apache-jmeter-3.1" />

　　

　　<property name="jmeter.result.jtl.dir" value="C:UsersAdministratorDesktopantjtl" />

　　

　　<property name="jmeter.result.html.dir" value="C:UsersAdministratorDesktopanthtml" />

　　

　　<property name="ReportName" value="TestReport" />

　　<property name="jmeter.result.jtlName" value="${jmeter.result.jtl.dir}/report.jtl" />

　　<property name="jmeter.result.htmlName" value="${jmeter.result.html.dir}/report.html" />

　　<property name="lib.dir" value="${jmeter.home}/lib"/>

　　<path id="xslt.classpath">

　　<fileset dir="${lib.dir}" includes="xalan*.jar"/>

　　<fileset dir="${lib.dir}" includes="serializer*.jar"/>

　　</path>

　　<target name="run">

　　<antcall target="test" />

　　<antcall target="report" />

　　</target>

　　<target name="test">

　　<taskdef name="jmeter" classname="org.programmerplanet.ant.taskdefs.jmeter.JMeterTask" />

　　<jmeter jmeterhome="${jmeter.home}" resultlog="${jmeter.result.jtlName}">

　　

　　<testplans dir="C:UsersAdministratorDesktopant" includes="*.jmx" />

　　<property name="jmeter.save.saveservice.output_format" value="xml"/>

　　</jmeter>

　　</target>

　　<target name="report">

　　<xslt classpathref="xslt.classpath"

　　force="true"

　　in="${jmeter.result.jtlName}"

　　out="${jmeter.result.htmlName}"

　　style="E:apache-jmeter-3.1extrasjmeter-results-detail-report_21.xsl">

　　

　　</xslt>

　　<copy todir="${jmeter.result.html.dir}">

　　<fileset dir="${jmeter.home}/extras">

　　<include name="collapse.png" />

　　<include name="expand.png" />

　　</fileset>

　　</copy>

　　</target>

　　</project>

　　然后修改响应的配置，然后cmd进入这个目录，输入Ant进行运行

　　这样代表运行成功，

　　我们看下出来的测试报告

　　为了更加详细我们下载jmeter-results-shanhe-me.xsl 拷贝到Jmeter的extras目录中，

　　在jmeter.properties中，设置需要输出的内容为true，并去掉前面的注释符号#，这里全部设置成true

　　然后把

　　style="E:apache-jmeter-3.1extrasjmeter-results-detail-report_21.xsl">换成jmeter-results-shanhe-me.xsl<br>我们再来运行看下测试报告

　　接下来，来配置Jenkins，下载包，安装，启动，启动后我们来http://localhost:8080/

　　打开我们的Jenkins，

　　构建一个自由风格，然后ok，

　　配置Ant，增加build路径。

　　配置测试报告插件，可以去下载，

　　文件名和我们build设置的一致

　　基本配置完成，

　　点击保存，选择立即构建，构建后我们可以在WEB界面看到我们的测试报告

　　测试报告如下

　　我们还可以去我们配置的目录去看下我们的生成的测试报告，我们还可以去配置构建后自动发送测试报告。

推荐阅读

点击阅读☞

点击阅读☞

点击阅读☞

点击阅读☞

点击阅读☞