测试开发-脚本开发工具

今天给大家介绍一个我自己开发的脚本开发工具，可能大多数人会叫这种东西为数据工厂，但是我认为还没达到 自动生成测试数据的地步，所以先叫他脚本开发工具，顾名思义，是用来开发脚本的一个工具，那么为什么测试要做一个这么样的工具呢。

背景

原因有几个， 第一，在测试平台开发的过程中，会开发一些小工具，为了方便测试同学构造数据，这些工具会有一个共同的特点，就是输入一些参数，输出一些返回值，如果每一个工具都开发一个页面，1、成本会很高，2、平台会显得比较臃肿，所以根据抽象的编程思想，才想到做一个这样的工具，第二， 在实际测试过程，大多会遇到这么两个场景，1.是有些数据构造起来比较复杂 例如：发布职位，发布一个职位需要填写相关的职位信息等，填完之后还需要进行职位审核，经过这系列操作后，职位才算是发布成功。2、第二个是同一条数据我需要 多个，例如：测试分页。这些场景都会是影响实际的测试工作中影响测试效率的点。为了解决测试效率问题和开发工具的效率问题，我们引入了脚本的概念。

引入脚本

1. 脚本的优势 脚本具有灵活性，不需要类似服务的复杂配置过程，也无需部署，而且各种语言都可以进行脚本的编写，编写起来也不复杂。
2. 脚本的分类 脚本可以根据语言进行分类，主流的有python 、java、php、shell 脚本

不会代码怎么学习脚本的编写

其实所有工具的开发都不只是代码作为基础，这么说，如果你会代码，也不一定能开发出好的测试工具，编写脚本的前提是你需要了解自己所负责的业务，同时还需要了解业务的接口、数据库、数据表，然后了解在测试过程中影响测试效率的问题，最后才是需要学习一门编程语言，但是编程语言也不需要学习那么多，只学习数据库的增删改查和接口怎么请求调用即可。

三种常见脚本的编写

java 脚本比较特殊，需要编译一下

• javac +脚本名称 生成.class 文件
• java + 脚本名称 + 参数 运行class 文件
• 备注：- java 通过args 去获取 参数

2. public class HelloJava{

4. public static void main(String[] args){

6. System.out.println("第一个参数是"+args[0]);

8. System.out.println("第二个参数是"+args[1]);

10. System.out.println("第三个参数是"+args[2]);

12. }

14. }

python 脚本

• 执行方式：python + 脚本名称 + 参数
• 备注：python 通过 sys.argv 获取参数

2. import sys

5. if __name__ == '__main__':

7. print("第一个参数是："+sys.argv[0])

9. print("第一个参数是："+sys.argv[1])

11. print("第二个参数是："+sys.argv[2])

shell 脚本

• sh + 脚本名称 + 参数 或者./+ 脚本名称 + 参数
• 备注：shell 通过$ 获取参数

2. #!/bin/bash

5. echo "执行的文件名：$0";

7. echo "第一个参数为：$1";

9. echo "第二个参数为：$2";

11. echo "第三个参数为：$3";

13. ~

脚本工具的设计

1、那么开始，环境准备，既然需要执行这么多种脚本，所以需要弄一个服务器，然后搭建python、java等环境。

2、了解了脚本工具的设计之后，我们需要设计一个脚本上传记录的表，在设计一张根据业务分组展示的表

2. CREATE TABLE `tools_script` (

4. `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT '自增主键',

6. `project_id` bigint(20) NOT NULL DEFAULT '0' COMMENT '脚本项目组ID',

8. `script_name` varchar(1024) NOT NULL DEFAULT '' COMMENT '脚本名称',

10. `script_function` varchar(1024) NOT NULL DEFAULT '' COMMENT '脚本功能描述',

12. `run_desc` varchar(1024) NOT NULL DEFAULT '' COMMENT '执行描述',

14. `address` varchar(1024) NOT NULL DEFAULT '' COMMENT '脚本路径',

16. `rely_path` varchar(1024) NOT NULL DEFAULT '' COMMENT '脚本依赖的路径',

18. `config` varchar(1024) NOT NULL DEFAULT '' COMMENT '脚本配置',

20. `author` varchar(1024) NOT NULL DEFAULT '' COMMENT '脚本作者',

22. `status` bigint(20) NOT NULL DEFAULT '0' COMMENT '脚本状态',

24. `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',

26. `update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',

28. `run_time` int(20) NOT NULL DEFAULT '0' COMMENT '执行次数',

30. PRIMARY KEY (`id`)

32. ) ENGINE=InnoDB AUTO_INCREMENT=78 DEFAULT CHARSET=utf8mb4 COMMENT='脚本配置信息表';

36. CREATE TABLE `tools_script_group` (

38. `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT '自增主键',

40. `project` varchar(1024) NOT NULL DEFAULT '' COMMENT '项目名称',

42. `status` bigint(20) NOT NULL DEFAULT '0' COMMENT '脚本状态',

44. `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',

46. `update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',

48. `alias` varchar(1024) NOT NULL DEFAULT '' COMMENT '分组别名',

50. PRIMARY KEY (`id`)

52. ) ENGINE=InnoDB AUTO_INCREMENT=20 DEFAULT CHARSET=utf8mb4 COMMENT='脚本配置信息表';

3、我们了解了脚本的编写和脚本的调用方式，根据他们的共同特点，我们可以写一个公共的调用方法去处理不同类型的脚本，无论是java 、shell、python ，都可以 通过 通过脚本名+ 参数的方式执行。

脚本执行类

2. package cn.boss.platform.common.utils;

5. import java.io.BufferedReader;

7. import java.io.InputStreamReader;

10. public class RunScriptUtil {

13. public String runScript(String scriptName ,String scriptPath, String scriptParam){

15. //脚本输出后 文本

17. String content = "";

19. // 截取文件的后缀名

21. String endName = "";

24. String line = "";

26. //截取_之后字符串

28. if (scriptName.contains(".")){

30. String str1 = scriptName.substring(0, scriptName.indexOf("."));

32. endName = scriptName.substring(str1.length()+1);

34. }

36. else {

38. content = "请检查文件名格式";

41. return content;

43. }

46. Runtime r = Runtime.getRuntime();

48. if (endName.equals("java")){

50. try{

52. // 切换目录

54. String[] cmd = {"/bin/sh", "-c", "cd " + scriptPath +";/javac"+" "+scriptName +";/java"+" "+ scriptName.substring(0, scriptName.indexOf(".")) +" "+ scriptParam};

56. Process proc = r.exec(cmd);

59. int exitVal = proc.waitFor();

62. if (exitVal == 0){

64. BufferedReader reader = new BufferedReader(new InputStreamReader(proc.getInputStream(), "utf-8"));

67. while ((line = reader.readLine()) != null){

69. content += line + " ";

71. }

73. }else {

75. BufferedReader reader = new BufferedReader(new InputStreamReader(proc.getErrorStream(), "utf-8"));

78. while ((line = reader.readLine()) != null){

80. content += line + " ";

82. }

84. }

86. }

88. catch(Exception e){

90. e.printStackTrace();

92. }

94. }

96. else if(endName.equals("py")){

98. try{

100. String cmd = "/usr/bin/python3"+" "+ scriptPath+"/"+scriptName +" " +scriptParam;

102. // 假设该操作为造成大量内容输出

105. Process proc = r.exec(cmd);

109. int exitVal = proc.waitFor();

112. if (exitVal == 0){

114. BufferedReader reader = new BufferedReader(new InputStreamReader(proc.getInputStream(), "utf-8"));

117. while ((line = reader.readLine()) != null){

119. content += line + " ";

121. }

123. }else {

125. BufferedReader reader = new BufferedReader(new InputStreamReader(proc.getErrorStream(), "utf-8"));

128. while ((line = reader.readLine()) != null){

130. content += line + " ";

132. }

134. }

137. }

139. catch(Exception e){

141. e.printStackTrace();

143. }

145. }

147. else if(endName.equals("sh")){

149. content = "";

151. try{

153. String cmd = "sh"+" "+ scriptPath+"/"+scriptName +" " +scriptParam;

155. Process proc = r.exec(cmd);

158. int exitVal = proc.waitFor();

160. if (exitVal == 0){

162. BufferedReader reader = new BufferedReader(new InputStreamReader(proc.getInputStream(), "utf-8"));

165. while ((line = reader.readLine()) != null){

167. content += line + " ";

169. }

171. }else {

173. BufferedReader reader = new BufferedReader(new InputStreamReader(proc.getErrorStream(), "utf-8"));

176. while ((line = reader.readLine()) != null){

178. content += line + " ";

180. }

182. }

184. }

186. catch(Exception e){

188. e.printStackTrace();

190. }

192. }

194. else if(endName.equals("ipynb")){

196. try{

198. String[] cmd = {"/bin/sh", "-c", "cd " + scriptPath +";jupyter nbconvert --to script"+" "+scriptName +";python3"+" "+ scriptPath+"/"+scriptName.substring(0, scriptName.indexOf("."))+".py" +" " +scriptParam};

200. // 假设该操作为造成大量内容输出

202. Process proc = r.exec(cmd);

207. int exitVal = proc.waitFor();

210. if (exitVal == 0){

214. BufferedReader reader = new BufferedReader(new InputStreamReader(proc.getInputStream(), "utf-8"));

217. while ((line = reader.readLine()) != null){

219. System.out.println(line);

222. content += line + " ";

224. }

226. }else {

228. BufferedReader reader = new BufferedReader(new InputStreamReader(proc.getErrorStream(), "utf-8"));

231. while ((line = reader.readLine()) != null){

233. System.out.println(content);

236. content += line + " ";

238. }

240. }

243. }

245. catch(Exception e){

247. e.printStackTrace();

249. }

251. }

253. else {

255. content = "暂不支持该脚本执行，请联系管理员";

257. }

259. return content;

261. }

265. public static void main(String[] args) {

267. RunScriptUtil runScript = new RunScriptUtil();

269. String i = runScript.runScript("脚本名","脚本所在路径","参数");

271. System.out.println(i);

273. }

275. }

4、然后可以写一下，脚本上传，脚本编辑、脚本获取，脚本执行，脚本删除的接口

2. package cn.boss.platform.web.tools;

6. import org.springframework.beans.factory.annotation.Autowired;

8. import org.springframework.stereotype.Controller;

10. import org.springframework.web.bind.annotation.*;

14. import java.io.UnsupportedEncodingException;

16. import java.util.*;

19. @Controller

21. @RequestMapping("/tools/script")

23. public class BossToolsScriptController {

28. @RequestMapping(value = "/get_all_project", method = RequestMethod.GET)

30. @ResponseBody

32. public ResultBean<Object> getAllProject(){

36. }

39. @GetMapping("/get_group_by_project")

41. @ResponseBody

43. public ResultBean<Object> getGroupByProject(@RequestParam(value = "project",required = true) String project){

46. }

49. @CrossOrigin

51. @GetMapping("/get_script_by_name")

53. @ResponseBody

55. public ResultBean<Object> getScriptByName(@RequestParam(value = "script_name",required = true) String scriptName){

58. }

62. @RequestMapping(value = "/add_group", method = RequestMethod.POST)

64. @ResponseBody

66. public ResultBean<Object> addBossToolsScriptGroupBean(@RequestBody BossToolsScriptGroupBean groupInfo){

69. }

72. @GetMapping("/del_group")

74. @ResponseBody

76. public ResultBean<Object> delBossToolsScriptGroup(@RequestParam(value = "id",required = true) Integer id){

79. }

82. @GetMapping("/get_script_by_id")

84. @ResponseBody

86. public ResultBean<Object> selectScriptById(@RequestParam("project_id") Integer projectId){

89. }

93. @RequestMapping(value = "/add_script", method = RequestMethod.POST)

95. @ResponseBody

97. public ResultBean<Object> addScript(@RequestParam Map<String,Object> scriptInfo){

100. }

104. @GetMapping("/del_script")

106. @ResponseBody

108. public ResultBean<Object> delScript(@RequestParam("script_name") String scriptName){

113. }

115. @GetMapping("/get_all_script")

117. @ResponseBody

119. public ResultBean<Object> selectAllScript(){

122. }

125. @GetMapping("/get_script_by_author")

127. @ResponseBody

129. public ResultBean<Object> selectScriptByAuthor(@RequestParam("author") String author){

132. }

135. }

这样后端就开发完成了

脚本开发工具前端的开发

2. <template>

5. <el-container>

7. <el-header style="height: 35px">

11. <div class="one" v-if="isRouterAlive" >

13. <vue-custom-scrollbar class="scroll-area" :settings="settings" >

15. <el-menu mode="horizontal" >

17. <el-submenu v-for="(item) in menu" :key="item.index" :index="item.id+ ''" style="padding-left: 1%">

19. <template slot="title">{{item.label}}<svg-icon icon-class="dropdown"></svg-icon></template>

21. <el-menu-item v-for="(item) in item.children" :key="item.index" :index="'sub' +item.id" @click="getScript(item.label)">{{item.func}}</el-menu-item>

23. </el-submenu>

25. </el-menu>

27. </vue-custom-scrollbar>

29. </div>

33. <div class="two" style="padding-top: 10px; padding-left: 30%">

35. <el-tooltip class="item" effect="dark" content="首页：脚本开发工具的首页" placement="top-start">

37. <el-button type="primary" icon="el-icon-s-home" circle @click="onEdit"></el-button>

39. </el-tooltip>

41. <el-tooltip class="item" effect="dark" content="添加脚本：编写完脚本记得在此处添加" placement="top-start">

43. <el-button type="info" icon="el-icon-circle-plus-outline" circle @click="onAdd"></el-button>

45. </el-tooltip>

47. <el-tooltip class="item" effect="dark" content="编写脚本：可以在此处上传或者编写脚本" placement="top-start">

49. <el-button type="warning" icon="el-icon-edit-outline" circle @click="onWrite"></el-button>

51. </el-tooltip>

53. <el-tooltip class="item" effect="dark" content="说明文档" placement="top-start">

55. <el-button type="warning" icon="el-icon-question" circle @click="ondoc"></el-button>

57. </el-tooltip>

59. </div>

62. </el-header>

64. <div style= "background-color: #d7dee5; height: 3px; margin-top: 25px"> </div>

66. <el-main>

68. <div id="script" v-if="isShow ==1">

70. <div class="body-content" style=";float:left;">

72. <h3 style=" text-align: left; padding-bottom: 15px">执行脚本</h3>

74. <el-form ref="runScriptForm" label-width="85px" :label-position="labelPosition">

76. <el-form-item label="脚本名称:" style="margin-bottom: 10px; text-align: left">

78. {{runScriptForm.scriptName}}

80. </el-form-item>

82. <el-form-item label="作者:" style=" margin-bottom: 10px; text-align: left">

84. {{runScriptForm.author}}

86. </el-form-item>

88. <el-form-item label="功能介绍:" style="margin-bottom: 10px; text-align: left">

90. {{runScriptForm.scriptFunction}}

92. </el-form-item>

94. <el-form-item label="参数说明:" style="margin-bottom: 10px; text-align: left">

96. {{runScriptForm.runDesc}}

98. </el-form-item>

100. <el-form-item v-for="(item,i) in config" :key="i" :label="item.label">

102. <el-input style="width: 500px" v-model="item.key"></el-input>

104. <addUserId v-if="item.label === 'uid' || item.label === 'userId'" @updateUserId="updateUserId"></addUserId>

106. </el-form-item>

109. <el-form-item label-width="0px" style="text-align: left">

111. <el-button type="success" size="medium" @click="run" :loading="loading">立即执行</el-button>

113. </el-form-item>

115. </el-form>

118. <div style="padding-left: 5px">

120. <span style=" font-size: 15px;font-weight: 400;color: #9fa3b0;">执行结果：<span :style="{color: color}">{{message}}</span></span>

122. <div>

124. <!-- text-align: left; word-wrap:break-word; word-break: break-all; overflow:auto;white-space: pre-wrap;-->

126. <pre style="border:1px solid #9fa3b0;width:100%;height: 500px;font-size:15px;" placeholder="返回结果" v-html="syntaxHighlightTools(response)"></pre>

128. </div>

130. </div>

132. </div>

134. <div id="top">

136. <div id="personal">

138. <h3 style="font-size: 18px;line-height: 22px;"><svg-icon class="icon" icon-class="personal"></svg-icon>我开发的脚本</h3>

140. <li class="tr">

142. <div class="td1">序号</div>

144. <div class="td1">名称</div>

146. <div class="td1">功能</div>

148. <div class="td1">操作</div>

150. </li>

152. <div v-if="showPersonalData ==false">

154. <vue-custom-scrollbar class="presonal-scroll-area" :settings="personSettings" >

156. <li class="ti" v-for="(item,i) in personal" :key="i">

158. <div class="t2">{{item['id']}}</div>

160. <div class="t2" @click="getScript(item['scriptName'])"><a>{{item['scriptName'] | ellipsis1}}</a></div>

162. <div class="t2">{{item['scriptFunction'] | ellipsis}}</div>

164. <div class="t2">

167. <el-button type="text" class="el-icon-edit" @click="getEditScriptInfo(item['scriptName'])"></el-button>

169. <el-button type="text" icon="el-icon-delete" @click="onDelete(item['scriptName'])" style="margin-left:0px;"></el-button>

172. </div>

175. <el-dialog title="编辑脚本配置" :visible.sync="dialogFormVisible" :modal-append-to-body=false>

177. <el-form :model="editScriptForm">

179. <el-form-item label="脚本名称:">

181. {{editScriptForm.scriptName}}

183. </el-form-item>

185. <el-form-item label="功能介绍:">

187. <el-input v-model="editScriptForm.scriptFunction" placeholder="可以添加一些脚本具体的用途和一些描述信息" autocomplete="off"></el-input>

189. </el-form-item>

191. <el-form-item label="参数说明:">

193. <el-input v-model="editScriptForm.runDesc" placeholder="可以添加一些执行参数的描述信息" autocomplete="off"></el-input>

195. </el-form-item>

197. <el-form-item label="参数:" label-width="70px">

199. <el-input v-model="editScriptForm.config" placeholder="脚本参数名称列表,例如env,uid，中间用，分割如果没有请输入 无" autocomplete="off"></el-input>

201. </el-form-item>

203. </el-form>

205. <div slot="footer" class="dialog-footer">

207. <el-button @click="dialogFormVisible = false">取 消</el-button>

209. <el-button type="primary" @click="editScript">确 定</el-button>

211. </div>

213. </el-dialog>

215. </li>

217. </vue-custom-scrollbar>

219. </div>

221. <div class="data" v-else-if="showPersonalData == true">

223. <svg-icon class="icon1" icon-class="dataNull"></svg-icon>

225. <p class="null">暂无数据</p>

227. </div>

229. </div>

232. <div id="ranking">

234. <h3 style="font-size: 18px;line-height: 22px;"><svg-icon class="icon" icon-class="top"></svg-icon>排行榜</h3>

236. <li class="tr">

238. <div class="td">名次</div>

240. <div class="td">名称</div>

242. <div class="td">执行次数</div>

244. <div class="td">功能</div>

246. </li>

248. <div v-if="showData ==false">

250. <vue-custom-scrollbar class="ranking-scroll-area" :settings="personSettings" >

252. <li class="ti" v-for="(item,i) in topOne" :key="i">

254. <div class="t1">{{item['ranking']}}</div>

256. <div class="t1" @click="getScript(item['scriptName'])"><a>{{item['scriptName'] | ellipsis1}}</a></div>

258. <div class="t1">{{item['runTime']}}</div>

260. <div class="t1">{{item['scriptFunction'] | ellipsis}}</div>

262. </li>

264. </vue-custom-scrollbar>

266. </div>

268. <div class="data" v-else-if="showData == true">

270. <svg-icon class="icon" icon-class="dataNull"></svg-icon>

272. <p class="null">暂无数据</p>

274. </div>

276. </div>

278. </div>

280. </div>

282. <div id="edit" v-if="isShow == 2" >

284. <div class="body-content" >

286. <h3 style=" text-align: left; padding-bottom: 15px">添加脚本</h3>

288. <el-form ref="form" :model="addScriptForm" label-width="80px" :label-position="labelPosition">

290. <el-form-item label="脚本名称">

292. <el-input v-model="addScriptForm.scriptName" placeholder="脚本名称,注:加后缀名"></el-input>

294. </el-form-item>

296. <el-form-item label="脚本目录">

298. <el-select v-model="addScriptForm.project" placeholder="请选择项目" style="width: 500px">

300. <el-option v-for="(item,index) in projectOptions" :key="index" :label="item" :value="item"></el-option>

302. </el-select>

304. </el-form-item>

306. <el-form-item label="脚本功能">

308. <el-input v-model="addScriptForm.scriptFunction" placeholder="可以添加一些脚本具体的用途和一些描述信息"></el-input>

310. </el-form-item>

312. <el-form-item label="执行描述">

314. <el-input v-model="addScriptForm.runDesc" placeholder="可以添加一些执行参数的描述信息"></el-input>

316. </el-form-item>

318. <el-form-item label="依赖路径">

320. <el-input v-model="addScriptForm.relyPath" placeholder="脚本所依赖文件的目录,没有填 无"></el-input>

322. </el-form-item>

324. <el-form-item label="参数列表">

326. <el-input type="textarea" v-model="addScriptForm.config" placeholder="脚本参数名称列表,例如env,uid，中间用，分割如果没有请输入 无" style="width: 500px"></el-input>

328. </el-form-item>

330. <el-form-item label-width="0px" style="text-align: left">

332. <el-button type="primary" @click="addScript">立即添加</el-button>

334. </el-form-item>

336. </el-form>

338. </div>

340. </div>

342. <div id="frame" v-if="isShow ==4">

344. <iframe

346. :style="autoHeight"

348. src="http://192.168.18.220:7777/lab" >

350. </iframe>

352. </div>

354. <div id="frame" v-if="isShow ==5">

356. <iframe

358. :style="autoHeight"

360. src="http://192.168.18.220:3000" >

362. </iframe>

364. </div>

366. </el-main>

368. </el-container>

370. </template>

372. <script>

374. import {

376. addScript,

378. getScriptGroup,

380. runScript,

382. getProject,

384. getScriptByName,

386. delScript,

388. getAllScript,

390. getScriptByAuthor, editScript

392. } from '@/api/zpTools/tools'

394. import { syntaxHighlight } from '@/utils/apiUtil'

396. import addUserId from '@/views/zpTools/other/captureAndMock/addUserId'

398. import vueCustomScrollbar from 'vue-custom-scrollbar'

400. import "vue-custom-scrollbar/dist/vueScrollbar.css"

402. export default {

404. name: "scriptManger",

406. components: {

408. addUserId,

410. vueCustomScrollbar

412. },

414. data() {

416. return {

418. labelPosition:'left',

420. dialogFormVisible:false,

422. isShow: 1,

424. form:[],

426. settings: {

428. suppressScrollY: true,

430. suppressScrollX: false,

432. wheelPropagation: false

434. },

436. personSettings: {

438. suppressScrollY: false,

440. suppressScrollX: true,

442. wheelPropagation: false

444. },

446. showData: false,

448. showPersonalData:false,

450. icon:'top',

452. color:'green',

454. isRouterAlive: true,

456. iframeLoading: false,

458. topOne:[],

460. personal:[],

462. scriptTime:{},

464. editScriptForm:{

466. scriptName:'',

468. runDesc:'',

470. scriptFunction:'',

472. config:'',

474. },

476. runScriptForm:{

478. scriptName:'',

480. author:'',

482. runDesc:'',

484. scriptFunction:'',

486. config:'',

488. },

490. response:'',

492. message:'',

494. loading: false,

496. addScriptForm: {

498. scriptName: '',

500. project:'',

502. scriptFunction: '',

504. runDesc: '',

506. address: '',

508. relyPath: '',

510. config: '',

512. author: this.$store.state.user.name,

514. status:1,

516. runTime:0

518. },

520. config:[],

522. projectOptions:[],

524. menu:[],

526. userId:'',

528. clientHeight: '',

530. autoHeight:{

532. width:'100%',

534. overflow: 'auto',

536. height:'400px',

538. }

540. };

542. },

544. watch: {

546. // 如果 clientHeight 发生改变，这个函数就会运行

548. clientHeight() {

550. this.changeFixed(this.clientHeight);

552. }

554. },

556. mounted() {

558. //获取脚本信息

560. this.getMenu()

562. this.getProject()

564. this.getAllScript()

566. this.getScriptPersonal()

568. this.config = this.$store.state.tools.paramConfig

571. // 获取浏览器可视区域高度

573. this.clientHeight = document.documentElement.clientHeight; // document.body.clientWidth;

575. window.onresize = function temp() { // 在窗口或框架被调整大小时触发

577. this.clientHeight = document.documentElement.clientHeight;

579. };

582. },

584. methods: {

586. // 根据屏幕高度动态修改iframe 样式

588. changeFixed(clientHeight) { // 动态修改样式

590. this.autoHeight.height = clientHeight + 'px';

592. },

594. updateUserId (userId) {

596. this.userId = userId

598. this.getScript(this.runScriptForm.scriptName)

600. this.$store.commit('tools/setRappPackageUserId', this.userId);

602. },

604. handleSelect(key, keyPath) {

606. },

608. async getScriptPersonal(){

611. const result = await getScriptByAuthor(this.$store.state.user.name)

613. if (result['data'].length == 0){

615. this.showPersonalData = true

617. }else {

619. for(let i in result['data']){

621. let top = {

623. id:'',

625. scriptName:'',

627. scriptFunction:'',

629. }

631. top.id = +i +1

633. top.scriptFunction = result["data"][i]["scriptFunction"]

635. top.scriptName = result["data"][i]["scriptName"]

637. this.personal.push(top)

639. }

641. }

645. },

647. async getAllScript(){

649. const result = await getAllScript();

651. if (result['data'].length == 0){

653. this.showData = true

655. }

657. else {

659. for(let i in result['data']){

661. let top = {

663. ranking:'',

665. scriptName:'',

667. scriptFunction:'',

669. runTime:''

671. }

675. top.ranking = +i +1

677. top.scriptFunction = result["data"][i]["scriptFunction"]

679. top.scriptName = result["data"][i]["scriptName"]

681. top.runTime = result["data"][i]["runTime"]

683. this.topOne.push(top)

686. this.scriptTime[result["data"][i]["scriptName"]] = result["data"][i]["runTime"]

688. }

690. await this.getScript(result['data'][0]['scriptName'])

692. }

695. },

698. //获取编辑脚本

700. async getEditScriptInfo(name){

702. this.dialogFormVisible = true

704. const result = await getScriptByName(name);

706. this.editScriptForm.scriptName = result["data"][0]["scriptName"]

708. this.editScriptForm.config = result["data"][0]["config"]

710. this.editScriptForm.scriptFunction = result["data"][0]["scriptFunction"]

712. this.editScriptForm.runDesc = result["data"][0]["runDesc"]

714. },

716. //编辑脚本

718. async editScript(name){

720. this.dialogFormVisible = false

722. const result = await editScript(this.editScriptForm);

724. if(result['status'] === 'success'){

726. this.$message({

728. message: '编辑成功',

730. type: 'success'

732. });

734. }

736. },

738. //获取默认脚本信息

741. async getScript(name){

743. const result = await getScriptByName(name);

745. this.runScriptForm.scriptName = result["data"][0]["scriptName"]

747. this.runScriptForm.author = result["data"][0]["author"]

749. this.runScriptForm.scriptFunction = result["data"][0]["scriptFunction"]

751. this.runScriptForm.runDesc = result["data"][0]["runDesc"]

753. if( result["data"][0]["config"] === "无" ){

755. this.config = []

757. }

759. else {

761. this.config = []

763. let str = result["data"][0]["config"]

766. let str1 = str.split(',')

768. let dict = {}

770. for(let i in str1){

772. dict['label'] = str1[i]

774. if (str1[i] === 'uid' ||str1[i] === 'userId'){

776. dict['key'] = this.userId

778. }else {

780. dict['key'] = ''

782. }

784. // dict['key'] = ''

786. this.config.push(dict)

788. dict = {}

790. }

792. // this.config = this.$store.state.tools.paramConfig

794. }

796. this.isShow = 1

798. },

801. async getProject(){

803. const result = await getProject()

805. this.projectOptions = result.data

807. },

809. async getMenu(){

811. const result = await getScriptGroup()

813. this.menu = result.data

815. },

817. async run(){

820. // this.$store.commit("tools/setParamConfig", this.config)

822. this.loading = true;

824. for (let i in this.config){

826. this.runScriptForm.scriptPram +=this.config[i]["key"]+" "

829. }

831. if(this.runScriptForm.scriptPram){

833. console.log(this.runScriptForm.scriptPram.replace(/undefined/,''))

835. this.runScriptForm.scriptPram = this.runScriptForm.scriptPram.replace(/undefined/,'')

837. }

839. this.runScriptForm.runTime = +this.scriptTime[this.runScriptForm.scriptName] +1

841. const result = await runScript(this.runScriptForm);

843. this.response = JSON.stringify(result)

845. this.message = result['message']

847. this.runScriptForm.scriptPram = ''

849. this.loading = false;

851. this.reload()

853. },

855. async addScript(){

857. this.addScriptForm.address = this.addScriptForm.project

859. const result = await addScript(this.addScriptForm);

861. await this.getMenu();

863. if (result["message"] === "success"){

865. await this.$alert('脚本添加成功', 'message', {

867. confirmButtonText: '确定'

869. });

871. }else {

873. await this.$alert('脚本添加失败', 'message', {

875. confirmButtonText: '确定'

877. });

879. }

881. this.reload()

883. this.isShow = 1

885. },

887. onEdit(){

889. this.isShow = 1

891. },

893. onAdd(){

895. this.isShow = 2

897. },

899. onDelete(scriptName){

901. this.isShow = 1

903. this.$confirm('确定要删除%s脚本吗?'.replace('%s',this.runScriptForm.scriptName), '提示', {

905. confirmButtonText: '确定',

907. cancelButtonText: '取消',

909. type: 'warning'

911. }).then(() => {

913. delScript(scriptName)

915. this.$message("%s删除成功".replace('%s',this.runScriptForm.scriptName))

917. this.getMenu()

919. this.reload()

921. this.getScript("crm_push_msg.py")

923. }).catch(() => {

925. this.$message({

927. type: 'info',

929. message: '已取消删除'

931. });

933. });

935. },

937. onWrite(){

939. this.isShow = 4

941. },

943. ondoc(){

945. this.isShow = 5

947. },

949. syntaxHighlightTools (jsonString) {

951. try {

953. console.log(typeof jsonString)

955. let obj = JSON.parse(jsonString);

957. if(typeof obj == 'object' && jsonString ) {

959. return syntaxHighlight(JSON.stringify(obj, undefined, 2));

961. }else {

964. }

966. } catch (ex) {

968. return jsonString;

970. }

972. },

975. //无感知刷新

977. reload() {

979. this.isRouterAlive = false;

981. this.$nextTick(function () {

983. this.isRouterAlive = true;

985. });

987. },

989. },

991. filters:{

993. ellipsis(value){

995. if (!value) return '';

997. if (value.length > 9) {

999. return value.slice(0,9) + '...'

1001. }

1003. return value

1005. },

1008. ellipsis1(value){

1010. if (!value) return '';

1012. if (value.length > 15) {

1014. return value.slice(0,15) + '...'

1016. }

1018. return value

1020. }

1022. }

1024. }

1026. </script>

1029. <style scoped>

1031. /*省略*/

1033. </style>

前端页面的展示

添加脚本页面

脚本编辑页面

执行脚本页面

写着最后

整个的脚本开发工具就设计好了，这样不仅能提高测试人员的工作效率，而且可以通过脚本的编写提高测试团队的技术氛围，大家可以尝试下。