接口测试平台番外-正交工具3

我们之前的进入小工具的页面已经成功了。

本节课就来实际做一下：

所谓正交，其实就是对 多个输入条件 的多个子状态，生成用例的方法。

我们先要做的就是前端的交互。其实很简单，就是个表格，类似于我们接口请求体的form-data那种可以自行增加行数的表格，每行分为key和value，key就是输入条件的名称，value，就是具体的多个子状态（用/隔开）

但是我并不打算去复制那套第三方打的表格，而是准备自己重写一个简易版本。

首先我们在正中央新建一个div，作为容器：

然后我们在里面添加内容，再写个div作为，多行输入框的容器。

如上图，利用的是bootstrap3的输入框组。我这里写的就是个展示用的demo，之后用js进行动态生成的时候，好照着这个输入框组进行生成。

效果如下：

然后我们去做俩个按钮，一个添加，一个运行

为什么不做删除？因为麻烦～ 不想要的 把输入条件空着就行，系统不会对其进行计算的。

然后我们先搞定这个添加功能：

这个add函数要用来给div 增加子标签，也就是那个输入框组：

现在的效果如下：

点击进添加按钮

这里我们学到了一个新技巧，复制，我们之前的这种功能做法，是用creatElement的方式创建一个新的，然后添加到容器中，不过现在我们学习了新的方法，直接复制，简单快捷。

接下来就是运行功能。我们去写个运行函数：

这个运行功能，应该做什么事呢？

1. 获取上述表格的所有输入，并过滤掉名字为空的行。
2. 然后调用接口，把数据发给后台，并等待后台的结果。
3. 把结果展示出来。

我们一步一步来：

如上图，我们利用输入框的name都一样的优点，直接拿到所有。然后声明了俩个空列表用来存放。然后进行一个遍历循环，判断只要名字不是空，就给这一对都加入到俩个空列表中。

测试一下提取是否正确：

看来，提取是成功了。