bootstrap-vue前端框架开发自动化测试平台

项目背景
1、vue、bootstrap
2、httprunner、celery、django-rest-framework
bootstrap开发过程中始终觉得没有element ui好用。

Dashboard

image.png

Home

• 统计个人平台使用记录，支持月、日筛选
  image.png

TestCaseList

image.png

• 拖拽步骤测试-支持列表项顺序拖拽、同步或异步运行测试

• 异步: 异步任务集合，执行完成后返回测试报告

• 同步: 实时获取结果

  
  image.png
  image.png

• swagger导入API
  

  image.png

调试API

• 函数助手
• 基于Hook表达式编写痛点。利用前端缓存实现表单输入过滤提示函数
• 一键拖拽函数表达式
  image.png
• 代码片段

<div class="hook-table" v-for="(row, index1) in tableList" :key="index1">
  <input type="text" :name="`func${index1}`" v-model="row.func"
  :key="`func${index1}`"
  v-validate="{ required: true, min:2,max:50, regex: /^[-.${}()_a-zA-Z0-9]+$/ }"
  :class="errors.first(`func${index1}`) || !hook.func ? 'form-control is-invalid' : 'form-control is-valid'"
  placeholder="Please enter func" style="height: 35px;" @focus="closeSearch(index1)" @blur="removeClass(index1)">
  <div :class="`searchbox-detail`" :id="`searchbox-detail-${index1}`" style="border: 1px solid #ced4da;">
    <ul class="m-0 p-3">
      <template v-if="filteredList(row.func).length > 0">
        <li v-for="(item,index2) in filteredList(row.func)" :key="index2" class="iq-bg-primary-hover rounded">
          <span @click="selectSearch(index, item.function_name)">{{ item.function_name }} | {{item.description}}</span>
        </li>
      </template>
      <template v-else>
        <li>Search Not Found</li>
      </template>
    </ul>
  </div>
</div>

• @focus input 聚焦时，显示下拉框
• @blur input 失去焦点时，关闭下拉框

methods: {
  openSearch (index) {
    // showSearch
    if (document.getElementById(`searchbox-detail-${index}`) !== null) {
      document.getElementById(`searchbox-detail-${index}`).classList.add('show-data')
    }
  },
  closeSearch (index) {
    if (document.getElementById(`searchbox-detail-${index}`) !== null && document.getElementById(`searchbox-detail-${index}`) !== undefined) {
      // @blur权重问题使click无法事件触发，设置时间等待
      setTimeout(() => {
        document.getElementById(`searchbox-detail-${index}`).classList.remove('show-data')
      }, 100)
    }
  },
}

• 计算属性-过滤输入字符串

computed: {
  filteredList () {
    return function (search) {
      return this.hookList.filter(item => {
        return item.function_name.toLowerCase().includes(search.toLowerCase())
      })
    }
  }
},

• HttpRequestBody-支持表单和文件上传
  

  image.png

• 函数Diff monaco插件实现代码行内比较功能
  

  image.png

• 验证器

• Response- 支持一键复制Json表达式
  

  image.png

测试报告详情（部分设计参考pytestAllure）

image.png
image.png

用户中心

image.png

消息功能

image.png

成员管理

image.png

权限组管理

• 后端权限；API视图中间件实现用户权限判断
• 代码片段

class CompanyAdminPermission(BasePermission):
    """公司管理员权限类"""
    message = "仅公司管理员可访问"

    def has_permission(self, request, view):
        # Return `True` if permission is granted, `False` otherwise.
        if bool(request.user and request.user.is_authenticated):
            company_user = request.user.companygroup_set.first()
            if company_user.is_member:
                return True
        else:
            self.message = "未提供身份校验"
            return False

• 前端权限；路由中间件实现权限判断
• 代码片段

router.beforeEach(async (to, from, next) => {
  const publicPages = ['/auth/sign-in', '/auth/sign-up',]
  if (publicPages.includes(to.path)) {
    store.dispatch('User/resetAccessToken')
  }
  const authRequired = !publicPages.includes(to.path)
  const loggedIn = store.getters['User/accessToken']
  if (loggedIn) {
    let permissions = store.getters['User/permissions']
    if (!permissions.length) {
      permissions = await store.dispatch('User/getUserInfo')
    }
    if (!hasPermission(permissions, to)) {
      Alert('温馨提示', '角色权限拒绝访问，请联系公司管理员', 'warning')
      return false
    }
  }
  if (to.meta.auth) {
    if (authRequired && loggedIn === null) {
      return next('/auth/sign-in')
    } else if (to.name === 'dashboard' || to.name === 'mini.dashboard') {
      return next('/home')
    }
  }
  next()
})

image.png

...未完待续