1. Toy模板网首页
  2. > Toy博客

Vue实现自动化平台（五）--用例编辑页面

9月前 作者：做测试的喵酱 分类：Toy博客 阅读(51) 违法举报

这篇具有很好参考价值的文章主要介绍了Vue实现自动化平台（五）--用例编辑页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

上一章：Vue实现自动化平台（四）--接口管理页面的实现_做测试的喵酱的博客-CSDN博客

github地址：https://github.com/18713341733/vuemiaotest 

这个目前只是用来练手的，项目还没成型。等以后我写完了，再更新一下项目链接。 

 

一、编辑用例页面样式展示

编辑用例页面，样式展示来源于postman的样式。

Vue实现自动化平台（五）--用例编辑页面

Vue实现自动化平台（五）--用例编辑页面

二、整体代码

2.1 插件安装

本章需要安装2个插件。

方式一：nmp命令安装

npm install vue-json-views

注意，我们使用的vue2, 所以这里是 vue2-ace-editor

nmp install vue2-ace-editor

方式二：vue ui 安装依赖

vue ui 

先选中自己的项目

Vue实现自动化平台（五）--用例编辑页面

安装下面两个依赖

vue-json-views

vue2-ace-editor

 Vue实现自动化平台（五）--用例编辑页面

 Vue实现自动化平台（五）--用例编辑页面

2.2 整体代码

Cases.vue

<template>
	<div class="caseEdit">
		<el-card class="box-card">
			<!-- 顶部的面包屑 -->
			<div slot="header" class="clearfix">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>用例管理</el-breadcrumb-item>
					<el-breadcrumb-item>用例编辑</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<!-- 显示主体内容的卡片 -->
			<el-card class="box-card">
				<el-divider content-position="left"><span style="color: #409EFF; font-weight: bold;">Api</span>
				</el-divider>
				<!-- api请求的基本信息 -->
				<el-row :gutter="20">
					<!-- 请求方法选择 -->
					<el-col :span="3">
						<el-select v-model="caseInfo.method" placeholder="请求方法">
							<el-option label="GET" value="GET"></el-option>
							<el-option label="POST" value="POST"></el-option>
							<el-option label="PUT" value="PUT"></el-option>
							<el-option label="DELETE" value="DELETE"></el-option>
							<el-option label="PATCH" value="PATCH"></el-option>
							<el-option label="HEAD" value="HEAD"></el-option>
							<el-option label="OPTION" value="OPTION"></el-option>
						</el-select>
					</el-col>
					<!-- host地址输入 -->
					<el-col :span="9">
						<el-input placeholder="host地址" v-model="caseInfo.host">
							<template slot="prepend">Host</template>
						</el-input>
					</el-col>
					<!-- 接口地址输入 -->
					<el-col :span="9">
						<el-input placeholder="接口路径" v-model="caseInfo.interface">
							<template slot="prepend">接口地址</template>
						</el-input>
					</el-col>
					<!-- 运行按钮 -->
					<el-col :span="3">
						<el-button type="primary" icon="el-icon-s-promotion">Run</el-button>
					</el-col>
				</el-row>
				<el-divider content-position="left"><span style="color: #409EFF; font-weight: bold;">Request</span>
				</el-divider>
				<!--用例信息 -->
				<el-tabs type="border-card">
					<!-- 请求头 -->
					<el-tab-pane label="请求头">
						<el-row :gutter="20" v-for='(header,index) in caseInfo.headers' :key='index' style="margin: 10px;">
							<el-col :span="6">
								<el-input v-model.lazy="header.key" placeholder="KEY"></el-input>
							</el-col>
							<el-col :span="12">
								<el-input v-model.lazy="header.value" placeholder="VALUE"></el-input>
							</el-col>
							<el-col :span="6">
								<el-button type="danger" icon="el-icon-delete" @click='deleteInputRow(header,"headers")'></el-button>
							</el-col>
						</el-row>
					</el-tab-pane>
					<!-- 请求参数 -->
					<el-tab-pane label="请求参数">
						<el-tabs>
							<el-tab-pane label="application/json" >
								<editor height="300" width="100%" ref="editor" :content="caseInfo.json"
								    v-model="caseInfo.json" :options="{
								    enableBasicAutocompletion: true,
								    enableSnippets: true,
								    enableLiveAutocompletion: true,
								    tabSize:2,
								    fontSize:20,
								    showPrintMargin:false,}" :lang="'json'" @init="editorInit">
								</editor>
								<el-button type="primary" size="mini" @click='jsonFormat'>json格式化</el-button>
								
							</el-tab-pane>
							<el-tab-pane label="Params" >
								<el-row :gutter="20" v-for='(par,index) in caseInfo.params' :key='index' style="margin: 10px;">
									<el-col :span="6">
										<el-input v-model.lazy="par.key" placeholder="KEY"></el-input>
									</el-col>
									<el-col :span="12">
										<el-input v-model.lazy="par.value" placeholder="VALUE"></el-input>
									</el-col>
									<el-col :span="6">
										<el-button type="danger" icon="el-icon-delete" @click='deleteInputRow(par,"params")'></el-button>
									</el-col>
								</el-row>
							
							</el-tab-pane>
							<el-tab-pane label="application/X-www-urlencoded" >
								<el-row :gutter="20" v-for='(val,index) in caseInfo.data' :key='index' style="margin: 10px;">
									<el-col :span="6">
										<el-input v-model.lazy="val.key" placeholder="KEY"></el-input>
									</el-col>
									<el-col :span="12">
										<el-input v-model.lazy="val.value" placeholder="VALUE"></el-input>
									</el-col>
									<el-col :span="6">
										<el-button type="danger" icon="el-icon-delete" @click='deleteInputRow(val,"data")'></el-button>
									</el-col>
								</el-row>
								
							</el-tab-pane>
						</el-tabs>

					</el-tab-pane>
					<el-tab-pane label="响应提取">响应提取</el-tab-pane>
					<el-tab-pane label="用例断言">用例断言</el-tab-pane>
					<el-tab-pane label="数据库校验">数据库校验</el-tab-pane>
				</el-tabs>
				<el-button type="info" size="mini" @click='dialogVisible=true'>用例详情</el-button>	
			</el-card>
		</el-card>
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="60%">
		  <json-view :data="caseInfo" style="height: 600px; scroll" />
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
		  </span>
		</el-dialog>


	</div>
</template>

<script>
	import Editor from 'vue2-ace-editor'
	import jsonView from 'vue-json-views'
	
	export default {
		data() {
			return {
				// 用例详细信息展示的窗口
				dialogVisible:false,
				caseInfo: {
					method: 'GET',
					host: '',
					interface: '',
					headers: [{
						key: '',
						value: ''
					}],
					params:[{
						key: '',
						value: ''
					}],
					data:[{
						key: '',
						value: ''
					}],
					json:'{}'
				}
			}
		},
		methods: {
			// deleteRow(header) {
			// 	console.log(header)
			// 	// 删除headers的一行内容
			// 	this.caseInfo.headers = this.caseInfo.headers.filter(function(item, index) {
			// 		return item !== header
			// 	})
			// },
			// deleteParRow(par) {
			// 	// 删除 params中的一行内容
			// 	console.log(par)
			// 	this.caseInfo.params = this.caseInfo.params.filter(function(item, index) {
			// 		return item !== par
			// 	})
			// },
			
			// 删除行
			deleteInputRow(value,name) {
				//value 要删除的数据，name :表示数据的种类
				console.log('要删除的数据:',value)
				// 删除headers的一行内容
				this.caseInfo[name] = this.caseInfo[name].filter(function(item, index) {
					return item !== value
				})
			},
			// 添加行
			addInputRow(name){
				// name:添加行的数据种类
				const par = this.caseInfo[name]
				// 判断当前数据的长度是否为0
				if (par.length ===0){
					this.caseInfo[name].push({key:'',value:''})
				}
				if (par[par.length-1].key ||par[par.length-1].value){
					this.caseInfo[name].push({key:'',value:''})
				}	
			},
			// json编辑器的初始化方法
			editorInit() {
			    require('brace/theme/chrome')
			    require('brace/ext/language_tools')
			    require('brace/mode/yaml')
			    require('brace/mode/json')
			    require('brace/mode/less')
			    require('brace/snippets/json')
			},
			// json数据格式化
			jsonFormat(){
				// JSON方法：parse:将json字符串 转换为js对象,   stringify:将js对象转换为json字符串
				const jsObj= JSON.parse(this.caseInfo.json)
				this.caseInfo.json = JSON.stringify(jsObj,null,4)
			}	
		},
		watch: {
			// 监听headers中的数据是否发送变化，当发送变化时，则判断最后一行是否有值，
			'caseInfo.headers': {
				handler: function(value, oldVal) {
					this.addInputRow('headers')
					// if (value.length === 0) {
					// 	this.caseInfo.headers.push({key: '',value: ''})
					// }
					// // 判断最后一行是否有值，
					// if (value[value.length - 1].key || value[value.length - 1].value) {
					// 	this.caseInfo.headers.push({
					// 		key: '',
					// 		value: ''
					// 	})
					// }
				},
				deep: true
			},
			'caseInfo.params':{
				deep:true,
				handler:function(value,oldval){
					this.addInputRow('params')
					// const par = this.caseInfo.params
					// // 判断当前数据的长度是否为0
					// if (par.length ===0){
					// 	this.caseInfo.params.push({key:'',value:''})
					// }
					// if (par[par.length-1].key ||par[par.length-1].value){
					// 	this.caseInfo.params.push({key:'',value:''})
					// }
				}
			},
			'caseInfo.data':{
				deep:true,
				handler:function(value,oldval){
					this.addInputRow('data')
				}
			}

		},
		components:{
			Editor,
			jsonView,
		}
		
		



	}
</script>

<style scoped>
</style>

三、知识点

3.1 表单格栅布局

来源：element UI 组件。Layout 布局：Element - The world's most popular Vue UI framework

Vue实现自动化平台（五）--用例编辑页面

格栅布局：将一行分成很多块。

3.2 选项卡的实现

来源：element UI 组件，Tabs标签页 Element - The world's most popular Vue UI framework

 Vue实现自动化平台（五）--用例编辑页面

3.3 动态增加输入框

监听器的应用

3.4 json格式数据展示

1、安装依赖

npm install vue-json-views

2、注册为子组件

import jsonView from 'vue-json-views'

components: {

        jsonView,

        }

3、使用组件文章来源地址https://www.toymoban.com/news/detail-419574.html

<json-view :data="editData" style="height: 420px;overflow-y: scroll" />

3.5 json数据编辑器

实现在页面上编写json格式的数据，对格式进行校验。

1、安装依赖

nmp install vue2-ace-editor

github地址： https://github.com/chairuosen/vue2-ace-editor

2、导入依赖，注册为子组件

import Editor from 'vue2-ace-editor'

// 在页面组件中通过components,注册导入的组件

 3、组件使用

只需要修改v-model就可以了

								<editor height="300" width="100%" ref="editor" :content="caseInfo.json"
								    v-model="caseInfo.json" :options="{
								    enableBasicAutocompletion: true,
								    enableSnippets: true,
								    enableLiveAutocompletion: true,
								    tabSize:2,
								    fontSize:20,
								    showPrintMargin:false,}" :lang="'json'" @init="editorInit">
								</editor>

3.6 输入框的实现

Element - The world's most popular Vue UI framework

 Vue实现自动化平台（五）--用例编辑页面

四、填写header时，自动增加下一行（嵌套监听）

通过监听器watch实现。监听caseInfo中的headers。

监听器能直接监听某个属性。但是如果要监听caseInfo.headers,需要将caseInfo.headers括起来。

‘caseInfo.headers’

4.1 嵌套监听

vue官网地址：

响应式 API：核心 | Vue.js

Vue实现自动化平台（五）--用例编辑页面

 多层嵌套的侦听注意：

1、被监听的字段需要用引号引起来

2、使用handler这种方式

4.2 实现逻辑：

1、监听headers中的数据是否发送变化，当发送变化时，则判断最后一行是否有值，

有值，就新增一行。

		watch: {
			// 监听headers中的数据是否发送变化，当发送变化时，则判断最后一行是否有值，
			'caseInfo.headers': {
				handler: function(value, oldVal) {
					if (value.length === 0) {
						this.caseInfo.headers.push({
							key: '',
							value: ''
						})
					}
					// 判断最后一行是否有值，
					if (value[value.length - 1].key || value[value.length - 1].value) {
						this.caseInfo.headers.push({
							key: '',
							value: ''
						})
					}

				},
				deep: true
			}

		},

2、双向绑定，在表单中输入内容，等失去焦点时，再同步数据

v-model.lazy="header.key"
					<!-- 请求头 -->
					<el-tab-pane label="请求头">
						<el-row :gutter="20" v-for='header in caseInfo.headers' :key='header.key' style="margin: 10px;">
							<el-col :span="6">
								<el-input v-model.lazy="header.key" placeholder="KEY"></el-input>
							</el-col>
							<el-col :span="12">
								<el-input v-model.lazy="header.value" placeholder="VALUE"></el-input>
							</el-col>
							<el-col :span="6">
								<el-button type="danger" icon="el-icon-delete" @click='deleteRow(header)'></el-button>
							</el-col>
						</el-row>
					</el-tab-pane>

4.3 实现删除header功能

点击删除按钮，删除这一行header。

1、数据传递：

在点击删除的时候，将这一行的数据作为参数传递给删除的方法。

Vue实现自动化平台（五）--用例编辑页面

2、删除的方法：

删除2种方法。1、通过索引删除。2、通过过滤删除。

hIndex ，为获取的索引。

Vue实现自动化平台（五）--用例编辑页面

过滤删除

不等于header的过滤出来，给caseInfo.headers 重新赋值。

		methods: {
			deleteRow(header) {
				console.log(header)
				// 删除一行内容
				const newHeaders = this.caseInfo.headers.filter(function(item, index) {
					return item !== header
				})
				this.caseInfo.headers = newHeaders
			},

五、请求参数

与添加header方法是一致的。

参数有2种类型，form表单与json格式。

样式来源，tabs 标签页，element ui

5.1 json 编辑器依赖

5.1.1 依赖安装

本章需要安装2个插件。

方式一：nmp命令安装

npm install vue-json-views

注意，我们使用的vue2, 所以这里是 vue2-ace-editor

nmp install vue2-ace-editor

方式二：vue ui 安装依赖

vue ui 

先选中自己的项目

Vue实现自动化平台（五）--用例编辑页面

安装下面两个依赖

vue-json-views

vue2-ace-editor

 Vue实现自动化平台（五）--用例编辑页面

 Vue实现自动化平台（五）--用例编辑页面

5.1.2 json 编辑器使用

实现在页面上编写json格式的数据，对格式进行校验。

1、安装依赖

nmp install vue2-ace-editor

github地址： https://github.com/chairuosen/vue2-ace-editor

2、导入依赖，注册为子组件

import Editor from 'vue2-ace-editor'

// 在页面组件中通过components,注册导入的组件

3、组件使用

只需要修改v-model就可以了

								<editor height="300" width="100%" ref="editor" :content="caseInfo.json"
								    v-model="caseInfo.json" :options="{
								    enableBasicAutocompletion: true,
								    enableSnippets: true,
								    enableLiveAutocompletion: true,
								    tabSize:2,
								    fontSize:20,
								    showPrintMargin:false,}" :lang="'json'" @init="editorInit">
								</editor>

5.2 json数据展示

1、安装依赖

npm install vue-json-views

2、注册为子组件

import jsonView from 'vue-json-views'

components: {

        jsonView,

        }

3、使用组件

<json-view :data="editData" style="height: 420px;overflow-y: scroll" />

到了这里，关于Vue实现自动化平台（五）--用例编辑页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • python django vue httprunner 实现接口自动化平台（最终版）

    python django vue httprunner 实现接口自动化平台（最终版）

    后端地址： GitHub - 18713341733/test_platform_service: django vue 实现接口自动化平台 前端地址： GitHub - 18713341733/test_platform_front: Django vue实现接口自动化平台 1.2.1 环境准备 Python = 3.8.0 (推荐3.9+版本) nodejs = 14.0 (推荐最新) 或者 16，千万不要使用18（会报错） Mysql = 5.7.0 (可选，默认数据库

    2024年02月10日
    浏览(36)

  • 精通自动化，Pytest自动化测试框架-fixture用例的前后置（实现）

    测试用例实现前后置，有多种方法。在实际编写测试脚本时，要根据实际情况选择 1、xunit类型 2、unittest类型 3、pytest中的fixture类型 定义夹具

    2024年02月15日
    浏览(59)
  • NO.3 robot framework编辑工具RIDE简单使用、RIDE快捷键介绍及创建一个简单的UI自动化测试用例

    NO.3 robot framework编辑工具RIDE简单使用、RIDE快捷键介绍及创建一个简单的UI自动化测试用例

    一、Ride简单使用及快捷键 1.启动ride 启动ride方法： 1) 通过界面图标 2) dos命令行：进入dos窗口，输入ride.py，按回车即可 2.创建新工程 快捷键：ctrl+n 3.创建测试套（suite）快捷键：ctrl+shift+f 4.保存工程 快捷键：ctrl+shift+s（保存整个工程），ctrl+s（局部保存，只保存鼠标点击的

    2024年01月17日
    浏览(46)
  • 如何实现基于场景的接口自动化测试用例？

    如何实现基于场景的接口自动化测试用例？

    自动化本身是为了提高工作效率，不论选择何种框架，何种开发语言，我们最终想实现的效果，就是让大家用最少的代码，最小的投入，完成自动化测试的工作。 基于这个想法，我们的接口自动化测试思路如下： 1.不变的内容全部通过配置化来实现，比如：脚本执行的环境、

    2024年02月14日
    浏览(49)
  • 自动化构建vue页面

    自动化构建vue页面

    1.创建autoConfig.js,并填写设置数据 2.新建build-page.js文件,引入需要的内容 3.遍历数据，判断是否生成文件或文件夹 3.1删除相同文件 4.构建vue读取生成模板auto_add.vue，定义替换设置数据    5.读取模板内容作为字符串输出，准备修改  6.替换指定数据内容，修正模板字符串 7.新增

    2024年02月12日
    浏览(32)
  • 我们在操作自动化测如何实现用例设计实例

    我们在操作自动化测如何实现用例设计实例

    在编写用例之间，笔者再次强调几点编写自动化测试用例的原则： 1、一个脚本是一个完整的场景，从用户登陆操作到用户退出系统关闭浏览器。 2、一个脚本脚本只验证一个功能点，不要试图用户登陆系统后把所有的功能都进行验证再退出系统 3、尽量只做功能中正向逻辑的

    2024年02月05日
    浏览(35)
  • 【AltWalker】模型驱动：轻松实现自动化测试用例的自动生成和组织执行

    【AltWalker】模型驱动：轻松实现自动化测试用例的自动生成和组织执行

    模型驱动的自动化测试（Model-Based Testing, 后文中我们将简称为MBT）是一种软件测试方法，它将系统的行为表示为一个或多个模型，然后从模型中自动生成和执行测试用例。这种方法的核心思想是将测试过程中的重点从手动编写测试用例转移到创建和维护描述系统行为的模型。

    2024年02月15日
    浏览(48)
  • 【AltWalker】模型驱动：轻松实现自动化测试用例的生成和组织执行

    【AltWalker】模型驱动：轻松实现自动化测试用例的生成和组织执行

    模型驱动的自动化测试（Model-Based Testing, 后文中我们将简称为MBT）是一种软件测试方法，它将系统的行为表示为一个或多个模型，然后从模型中自动生成和执行测试用例。这种方法的核心思想是将测试过程中的重点从手动编写测试用例转移到创建和维护描述系统行为的模型。

    2024年02月15日
    浏览(73)
  • postman实现接口自动化图解步骤，测试用例集，断言，动态参数，全局变量的随笔记录

    postman实现接口自动化图解步骤，测试用例集，断言，动态参数，全局变量的随笔记录

    实现接口自动化的方式有很多种，requests + unittest + ddt 的接口自动化框架有些朋友也有接触，但是考虑到很多没有代码基础，且这种框架实现需要的时间周期比较长，但是大多数公司的项目时间并不充裕。 如下图，点击postman左侧Collections下面有个添加文件夹图标，就可以创建

    2024年02月03日
    浏览(53)
  • 搭建Django+pyhon+vue自动化测试平台

    搭建Django+pyhon+vue自动化测试平台

    Django安装 使用管理员身份运行pycharm使用local    检查django是否安装成功     创建项目 cd 切换至创建的项目中启动django项目 启动项目 点击连接跳转至浏览器  更改django为中文settings文件---LANGUAGE_CODE Vue安装 安装cnpm，代替npm指令，速度快        安装vue脚手架         切换至

    2024年02月14日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包