代码语言：javascript复制
目前设计的平台，在测试用例编辑或新增页面主要包含这几个部分:
1、用例基础信息:用例名称、接口名称、所属模块、用例标签、优先级(会关联用例执行顺序)
2、用例详细信息:请求方法、接口地址、环境地址、
3、请求信息：请求头设置、请求参数(Params、x-www-form-urlencoded、Json等)，响应提取(jsonPath)
用例断言、数据库校验
4、响应信息用于展示响应相关信息：responseHeader、responseBody、Cookies以及request相关信息<template>
<div class="common-layout">
<el-container>
<el-aside width="300px" style="height: 100vh">
<div>
<ul
v-infinite-scroll="true"
class="infinite-list"
style="overflow: auto; height: 100vh"
>
<li v-for="i in 10" :key="i" class="infinite-list-item">
testcase-{{ i }}
</li>
</ul>
</div>
</el-aside>
<el-main style="margin-top: 0px">
<div style="text-align: right">
<el-button
type="primary"
icon="SuccessFilled"
@click="save"
v-if="testCase.id"
>
保存用例
</el-button>
<el-button
type="danger"
v-if="testCase.id"
@click="remove"
icon="Delete"
>
删除用例
</el-button>
</div>
<el-card class="box-card" style="margin: 15px 0px; width: 100%">
<el-divider content-position="left">用例基础信息</el-divider>
<el-form label-width="120px" v-if="testCase.id">
<el-row :gutter="10" style="margin-bottom: 3px">
<el-col :span="12">
<el-form-item label="接口模块">
<el-select
v-model="testCase.moduleId"
placeholder="接口模块"
style="width: 100%"
>
<el-option
v-for="item in modules"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="接口名称">
<el-select
v-model="testCase.name"
placeholder="请选择接口"
style="width: 100%"
>
<el-option
v-for="item in currentInterfaces"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="用例名称">
<el-input
placeholder="请输入用例名称"
v-model="testCase.name"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用例标签">
<el-input
placeholder="请输入用例标签，多个用逗号分隔，如成功、登录"
v-model="testCase.marks"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10" style="margin-bottom: 3px">
<el-col :span="24">
<el-form-item label="优先级">
<el-input-number
v-model="testCase.orderIndex"
:min="1"
:max="10"
label="优先级"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<el-divider content-position="left">
用例详细信息
<el-icon><InfoFilled /></el-icon>
</el-divider>
<el-card>
<el-divider content-position="center">接口信息</el-divider>
<el-form :inline="true">
<el-form-item class="interface-form">
<el-select
clearable
v-model="selectMethod"
placeholder="请求方法"
style="font-weight: bold"
>
<el-option
:label="item"
:value="item"
v-for="item in reqMethods"
:key="item"
></el-option>
</el-select>
</el-form-item>
<el-form-item class="interface-form">
<el-select
v-model="selectEnv"
clearable
placeholder="请选择测试环境"
style="margin-left: 50px"
>
<el-option
:label="item"
:value="item"
v-for="item in ['Dev', 'test-1', 'test-2', 'Preview']"
:key="item"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-input
v-model="host"
placeholder="http://www.xxx.com"
style="width: 500px; margin-left: 50px"
>
<template #prepend>Host</template>
</el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="currentEnv.path"
style="margin-top: 5px; width: 600px"
>
<template #prepend>接口地址:</template>
</el-input>
</el-form-item>
</el-form>
</el-card>
<el-divider content-position="center">
请求信息
<el-icon><InfoFilled /></el-icon>
</el-divider>
<el-card>
<el-tabs type="border-card" class="demo-tabs">
<el-tab-pane>
<template #label>
<span class="custom-tabs-label">
<span>请求头信息</span>
</span>
</template>
<el-table
:show-header="false"
border
style="margin: 10px 0px"
:data="headerParams"
>
<el-table-column
label="序号"
width="80px"
type="index"
align="center"
></el-table-column>
<el-table-column label="Key">
<!-- row:即为当前属性值对象 -->
<template #="{ row, $index }">
<el-input
size="small"
placeholder="key"
v-model="row.key"
></el-input>
</template>
</el-table-column>
<el-table-column label="value">
<!-- row:即为当前属性值对象 -->
<template #="{ row, $index }">
<el-input
size="small"
placeholder="value"
v-model="row.value"
></el-input>
</template>
</el-table-column>
<el-table-column label="属性值操作">
<template #="{ row, index }">
<el-button
type="primary"
size="small"
icon="Plus"
@click="addParam"
></el-button>
<el-button
type="primary"
size="small"
icon="Delete"
@click="delParams(index)"
></el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="请求参数">
<el-tabs type="card">
<el-tab-pane label="Params" name="Params">User</el-tab-pane>
<el-tab-pane label="x-www-form-urlencoded" name="second">
x-www-form-urlencoded
</el-tab-pane>
<el-tab-pane label="Json" name="third">json</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-card>
<el-divider content-position="left">
响应信息
<el-icon><InfoFilled /></el-icon>
</el-divider>
<el-card>
<el-tabs type="border-card">
<el-tab-pane label="响应头">[
{
"name":
"Server",
"value":
"Tengine"
},
{
"name":
"Date",
"value":
"Thu, 24 Aug 2023 09:08:15 GMT"
},
{
"name":
"Content-Type",
"value":
"application/json; charset=utf-8"
},
{
"name":
"Transfer-Encoding",
"value":
"chunked"
},
{
"name":
"Connection",
"value":
"keep-alive"
},
{
"name":
"Access-Control-Allow-Origin",
"value":
"*"
},
{
"name":
"Access-Control-Allow-Methods",
"value":
"GET,POST"
}
]</el-tab-pane>
<el-tab-pane label="响应体">ResponseBody</el-tab-pane>
<el-tab-pane label="Cookies">Cookies</el-tab-pane>
<el-tab-pane label="请求详情">RequestInfo</el-tab-pane>
</el-tabs>
</el-card>
</el-main>
</el-container>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { requestMethods } from '@/api/common.ts'
let testCase = {
id: '1',
moduleId: '100',
name: '',
marks: '',
orderIndex: '',
modules: '',
}
let currentInterfaces = ref<any>([])
let modules = ref<any>([])
let currentEnv = reactive({
host: '',
path: '',
})
let selectMethod = ref<string>()
let selectEnv = ref<string>()
let host = ref<string>()
let reqMethods = ref<string[]>([])
// let headerParams = ref<any>([])
const save = () => {}
const remove = () => {}
let headerParams = reactive<any>([
{
key: '',
value: '',
},
])
onMounted(() => {
reqMethods.value = requestMethods
})
const addParam = () => {
headerParams.push({
key: '',
value: '',
})
}
const delParams = (val: number) => {
if (headerParams.length > 1) {
headerParams.splice(val, 1)
}
}
</script>
<style lang="scss" scoped>
.text {
font-size: 14px;
}
.item {
padding: 18px 0;
}
.box-card {
width: 480px;
}
.infinite-list {
height: 300px;
padding: 0;
margin: 0;
list-style: none;
}
.infinite-list .infinite-list-item {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: var(--el-color-primary-light-9);
margin: 10px;
color: var(--el-color-primary);
}
.infinite-list .infinite-list-item .list-item {
margin-top: 10px;
}
.input-with-select .el-input-group__prepend {
background-color: var(--el-fill-color-blank);
}
.demo-tabs > .el-tabs__content {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
vertical-align: middle;
margin-left: 4px;
}
</style>
