接口测试平台代码实现73: 多接口用例-13本节我们要来解决一下上次遗留的bug，因为小伙伴目前还没有很好的解决办法，所

本节我们要来解决一下上次遗留的bug，因为小伙伴目前还没有很好的解决办法，所以我们使用我的一个土方法解决。针对与这个第三方的缺陷，其实也跟我们使用不当有关，原作者的算法并不支持我们现在这样复杂的应用。所以，今天会进行稍微大一点的改来避免这个问题：

首先我们还是打开P_cases.html：

找到这个监听函数和初始化步骤函数：

图中俩处划红线的部分，就是引起我们bug的罪魁祸首。我们先删除掉～

然后在最外层，单独建立一个script，存放这两句，注意此时任何函数function都没有，也就是说，进入此页面的时候，我们有且只有一次执行这段代码：

好，我们看看现在的展示效果：

直接打开form-data看看：

切换到第一个仓库接口

结果：没问题

切换到第二个仓库接口

结果：没问题

3.点击新增参数按钮：

注意看，我们目前解决了，点击一次按钮出现多行新参数，和切换仓库接口也会自动增加许多空白行的bug，但是每行的编辑/删除按钮却丢失了。

然后我们在这两处初始化的代码中，按照下面图中删除mythead相关语句，并且扩充mytbody相关值：

每个mytbody这段代码比较长，大家最好要直接复制。不用去关心它的换行拼接，你直接复制，它会自动处理好：

 '<tr>\n' +
                '                                                <td></td>\n' +
                '                                                <td></td>\n' +
                '                                              <td name="buttons"><div class="btn-group pull-right"><button id="bEdit" type="button" class="btn btn-sm btn-default" onclick="rowEdit(this);"><span class="glyphicon glyphicon-pencil"> </span></button><button id="bElim" type="button" class="btn btn-sm btn-default" onclick="rowElim(this);"><span class="glyphicon glyphicon-trash"> </span></button><button id="bAcep" type="button" class="btn btn-sm btn-default" style="display:none;" onclick="rowAcep(this);"><span class="glyphicon glyphicon-ok"> </span></button><button id="bCanc" type="button" class="btn btn-sm btn-default" style="display:none;" onclick="rowCancel(this);"><span class="glyphicon glyphicon-remove"> </span></button></div></td></tr>';

然后我们再进行各种测试，会发现：

新步骤默认显示；

默认状态直接点击新增按钮；

切换到第一个接口显示；

切换到第二个接口显示；

来回切换；

点击新增按钮；

这些都没有问题了。

源码再最后放出链接。

好，我们继续开始本节主线-

我们来捋一捋现在我们还剩下多少内容：

4.步骤详情页的提取返回值功能

5.步骤详情页的断言返回值功能

9.用例实际执行的后台实现

10.报告的生成和保存

11.报告的展示

12.报告的word导出

13.步骤的mock功能

好，我们开始来设计和实现，返回值提取和断言功能：

这个功能才是我们多用例模块的核心和亮点所在。它可以真正实现多个接口的上下游数据关联，这也是和接口调试模块本质上的区别。如果公司开发和测试以为接口测试就是单接口测试，调试通了就可以了，那么真的太天真了，接口测试其实也是需要进行业务场景的测试，这也是为何接口测试处于集成测试阶段的理由。

首先是位置，我们计划在步骤详情页下方增加这个步骤提取设置功能。为了直观，且要把好钢用到刀柄上的原则。我们的前端复杂的设计就进行简化了。毕竟这块的代码逻辑比较难：

还是在P_cases.html上，我们要在这里去写这个提取返回值功能，注意位置。

添加如下的五个多行文本框。

    <br>
    <textarea id="get_path" rows="3" style="width: 90%;background-color: rgba(245,236,222,0.29)" placeholder="提取返回值-路径法"></textarea>
    <textarea  id="get_zz"  rows="3" style="width: 90%;background-color: rgba(245,236,222,0.29)" placeholder="提取返回值-正则法"></textarea>
    <textarea  id="assert_zz"  rows="3" style="width: 90%;background-color: rgba(245,236,222,0.29)" placeholder="断言返回值-路径法"></textarea>
    <textarea  id="assert_qz"  rows="3" style="width: 90%;background-color: rgba(245,236,222,0.29)" placeholder="断言返回值-正则法"></textarea>
    <textarea  id="assert_path"  rows="3" style="width: 90%;background-color: rgba(245,236,222,0.29)" placeholder="断言返回值-全文检索"></textarea>