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

我去热饭

发布于 2022-05-19 10:29:46

1530

发布于 2022-05-19 10:29:46

文章被收录于专栏：测试开发干货

上节我们成功搞定了后台算法，并且返回给前端一个二维数组作为结果

本节我们要想办法在前端来展示这个正交的结果。

最后结果我们仍然是可以通过动态创建来实现的，所以我们先做好存放这个结果的容器div：

然后通过js的数据动态控制，注意，每行每列都是循环，所以这个算法起码是个二层循环，并且，行数列数都不固定：

代码如下：

ret = eval(ret);
console.log(ret.res);
var res_div = document.getElementById('res_div');
res_div.innerHTML = '';

w = (100/end_keys.length).toString()+'%'; //计算输入框宽度

for(var j=0;j<ret.res.length;j++){
    var div_group = document.createElement('div');
    div_group.className = 'input-group';
    var s = document.createElement('span');
    s.className = 'input-group-addon';
    s.innerText = '用例：'+(j+1).toString();
    div_group.appendChild(s);
    for(var i=0;i<end_keys.length;i++){
        var input = document.createElement('input');
        input.className = 'form-control';
        input.type="text" ;
        input.style = 'width: -webkit-calc('+w+')';
        input.disable = 'disabled';
        input.value = end_keys[i]+' : '+ret.res[j][i];
        div_group.appendChild(input);
    }
    res_div.appendChild(div_group);
}

点击运行后效果如图：