测试平台系列(145) 收尾录制接口页面筛选和生成功能.md

2022/6/25 测试平台接口测试FastApiPythonReact

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

# 回顾

上一节我们实现了证书下载功能,并解决了录制到不相关api的问题,但其实我们还差一个地方没有实现。一起来看看:

首先数据量比较多,我们没有做分页,其实不是太好显示。其次我们不能剔除以及搜索我们想要的api,因为我们难免会录制到一些额外的api请求。

所以今天我们要重点介绍的就是搜索剔除接口请求数据。

# 调整RequestInfo

  • 筛选接口

    其实antd的Table组件是支持过滤数据的,不过我看了一下,真的很麻烦(比起之前)。

我们大概是要找到这样的组件,让用户可以点击放大镜然后查看对应的数据。

  const getColumnSearchProps = (dataIndex: DataIndex): ColumnType<DataType> => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={searchInput}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => handleSearch(selectedKeys as string[], confirm, dataIndex)}
          style={{ marginBottom: 8, display: 'block' }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => handleSearch(selectedKeys as string[], confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            Search
          </Button>
          <Button
            onClick={() => clearFilters && handleReset(clearFilters)}
            size="small"
            style={{ width: 90 }}
          >
            Reset
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => {
              confirm({ closeDropdown: false });
              setSearchText((selectedKeys as string[])[0]);
              setSearchedColumn(dataIndex);
            }}
          >
            Filter
          </Button>
        </Space>
      </div>
    ),
    filterIcon: (filtered: boolean) => (
      <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
    ),
    onFilter: (value, record) =>
      record[dataIndex]
        .toString()
        .toLowerCase()
        .includes((value as string).toLowerCase()),
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => searchInput.current?.select(), 100);
      }
    },
    render: text =>
      searchedColumn === dataIndex ? (
        <Highlighter
          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
          searchWords={[searchText]}
          autoEscape
          textToHighlight={text ? text.toString() : ''}
        />
      ) : (
        text
      ),
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

这仅仅只是针对一个字段要加的方法,可以看到非常的复杂,包括设置高亮编辑文本等状态。不过好在官方给了个实例,我们就cv一下:

主要是在url字段这里,加上searchprops,也就是上面我们贴出来的部分。其他地方我们都微调一下就好。

接着我们来测试下对不对:

可以看到,搜索后还能高亮,比较方便了。至于这个编号,我们需要调整下这里:

  • 删除接口

    有时候我们觉得接口太多,很碍事,有些还是重复的,所以我们最好也给个删除的选项。

接着我们编写onRemoveRecord方法,这里接收的参数是一个索引:

我们通过索引,去后台把redis list里面的数据删掉即可。

# 编写后端部分

本以为redis list删除数据很方便,结果他并不能根据索引来删除。我们来看看lrem的参数:

参数分别是key, 要删除的数量,目标value。比如我们有个数组:

[1,2,3,4,5]
1

我们要删除3,并不能根据索引2来删除,必须是lrem(key, 1, 3)。也就是删除value=3的1条数据。

这可就犯难了,要知道我们的录制数据存的value都是又长又臭的。在Stack Overflow的帮助下,我找到了一种折中方案:

    1. 先根据索引把value替换为一个固定值
    1. 删除这个固定值的数据

    看起来很合理,缺点是多了一个步骤,而且必须找一个很独特的值。但其实我们找一个list里面绝壁不存在的值就可以了,比如"DELETED"就可以。

我们新增一个remove_record_data方法,接着去lset把对应索引的值改为DELETED,最后删除1条DELETED即可。

最后我们在app/routers/testcase/testcase.py加入以下接口即可:

# 效果

点击删除按钮后,删除了2条数据。

# 前端部分加入用例生成表单

我们在用例录制页面也可以选择对应的项目+目录,生成对应的数据了。之前我们是写死directory_id=5的,如今我们也要进行一下改造:

加入modal,展示对应的表单。

# 现在改从form里面获取directory_id和name了,注意左侧黄色部分是修改,绿色是新增。底部的request_cookies默认也是需要一个字典,所以我们用JSON.parse转换了一下。

今天的内容就到这里了,咱们下期见~