测试平台系列(117) 请求地址优化实战.md

米洛 2022/6/7 测试平台接口测试FastApiPythonReact

highlight: atom-one-dark theme: vuepress--- 一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情 (opens new window)。

大家好~我是米洛！
我正在从0到1打造一个开源的接口测试平台, 也在编写一套与之对应的教程，希望大家多多支持。
欢迎关注我的公众号米洛的测开日记，一起交流学习!

# 回顾

上一节我们编写了请求地址的CRUD操作，那这一节我们就把它运用到我们的平台之中。

# 改造后端

首先我们的用例列表需要存储一个base_path的字段，用来存放我们的地址表对应的name字段。

为什么是name而不是id？

主要还是因为我们严格区分环境，如果固定的id，我们则没有办法通过env+name的方式动态获取到对应环境下这个name的地址。当然这样的方法也有坏处: 一旦请求地址里面的name发生变化，我们需要去调整用例。所以建议大家不要轻易改名字，毕竟这是个标识，一般也不会随便改动，改url是没问题的。

添加字段base_path

注意，我们还得去数据库添加这个字段。

修改TestCaseForm

也是添加这个字段。

这样后端对于用例表的变更就完成了，接着我们要到执行case的地方做一些对应的调整。

添加query_gateway方法

添加query_gateway的方法，根据env和name查询对应的base_path。

调整用例执行的方法

在文件executor.py里面新增url替换，如果存在base_path则尝试替换。

# 改造前端

下面是最终效果。

之前前端是一个自动完成的组件，现在我们把它改成Input并加上前缀（选择框）。

// 前缀选择框如下，
  const prefixSelector = (
    <Form.Item name="base_path" noStyle>
      <Select style={{width: 130}} placeholder="选择BasePath" showSearch allowClear
              optionLabelProp="label"
              filterOption={(input, option) => {
                console.log(option.children)
                if (option.children.length > 1) {
                  return false;
                }
                return option.children.props.children.indexOf(input.toLowerCase()) >= 0
              }
              }
      >
        <Option value={null} label="无">无<a style={{float: 'right', fontSize: 12}} href="/#/config/address"
                                           target="_blank">去配置</a></Option>
        {
          Object.keys(currentAddress).map(key => <Option value={key} key={key} label={key}><Tooltip title={
            <div>
              {
                Object.keys(currentAddress[key]).map(v => <p>
                  {envMap[v]}: {currentAddress[key][v]}
                </p>)
              }
            </div>
          }>
            {key}
          </Tooltip>
          </Option>)
        }
      </Select>
    </Form.Item>
  );