介面測試平臺-66: 多介面用例實現之 小用例：新增+刪除+關閉+排序

沒有誰不是路人發表於2020-11-07
排序

1. 增加小用例

開啟P_cases.html，增加點選事件

實現onclick：

// 新增小用例
function add_new_step() {
    var Case_id = document.getElementById('Case_id').innerText

    $.get('/add_new_step/', {
        "Case_id": Case_id
    }, function (ret) {
        refresh_left_div(Case_id);
    })
}

新增對映：

urls.py：

url(r'^add_new_step/$', add_new_step),  # 新增小步驟介面

views.py：

# 新增小步驟
def add_new_step(request):
    Case_id = request.GET['Case_id']
    DB_step.objects.create(Case_id=Case_id, name='我是新步驟')
    return HttpResponse('')

重啟服務 重新整理頁面 試著增加幾個步驟：

問題：1. 順序不對，2. 執行index不對，以下是解決辦法

服務重啟頁面重新整理後，再新增一下試試：

可能會遇到問題，在後臺刪除出錯：

因為之前沒有寫name，造成了髒資料；解決辦法： 

  1. 不去理會，等開發出刪除步驟功能再刪除它們

  2. sqlite3 命令列刪除，先sqlite3 你的資料庫檔案》tables; 列出所有表，然後用sql語句刪除，delete from....

  3. 直接改models.py檔案，讓它先別返回這個name，然後就可以刪除了，然後再改回來。（最簡單）

 

2. 關閉左側彈層

增加點選事件，開啟P_cases.html：

實現：

// 關閉左側div
function close_left_div() {
    $("#left_div").css("display", "none")
}

 

3. 選單被小用例遮擋問題

用z-index來解決，最大是999。把這個步驟列表的div 的z-index 從998 改成 2 即可：這樣既能比用例列表這種1的大，又能低於左側選單。

 

4. 刪除大用例刪除小用例

 

5. 刪除專案時刪除大小用例

# 刪除專案
@login_required
def delete_project(request):
    project_id = request.GET['id']
    DB_project.objects.filter(id=project_id).delete()
    DB_apis.objects.filter(project_id=project_id).delete()  # 刪除旗下介面

    all_Case = DB_cases.objects.filter(project_id=project_id)
    for case in all_Case:
        DB_step.objects.filter(Case_id=case.id).delete()  # 刪除旗下小用例
        case.delete()  # 刪除旗下大用例，用例刪除自己

    return HttpResponse('')

 

6. 刪除小用例

增加刪除事件，開啟P_cases.html：

// 重新整理小用例列表專用
function refresh_left_div(case_id) {
    // 重新整理小用例列表專用
    var d = document.getElementById('small_list');
    d.innerHTML = ''; //清空舊資料
    $.get('/get_small/',{
        'case_id':case_id
    },function (ret) {
        //開始解析ret,並展現。
        res = eval(ret);
        all_steps = res.all_steps;
        for(var i=0;i<all_steps.length;i++){
            //這裡寫 生成小用例步驟的button程式碼
            var bu = document.createElement('button');
            bu.style = 'margin-top: 5px;width: 90%;background-color: #f5f3f3;';
            bu.className = 'btn btn-defaul';
            bu.innerText = all_steps[i].name;
            bu.id = 'step_btn_'+all_steps[i].id;
            //小步驟的刪除按鈕
            var del = document.createElement('button');
            del.className ='btn btn-default';
            del.style.fontSize = 'xx-small';
            del.innerText = 'delete';
            del.style.height = '28px';
            del.style.cssFloat='right';
            del.style.marginTop='8px';
            del.idd = all_steps[i].id;
            del.onclick = function(){
                $.get('/delete_step/'+this.idd+'/',{

                },function (ret) {
                    refresh_left_div(document.getElementById('Case_id').innerText)
                })
            };
            d.appendChild(bu);
            d.appendChild(del);
        }
    })
}

效果如下：

新增對映：

urls.py：

url(r'^delete_step/(?P<eid>.*)/$', delete_step),  # 刪除小步驟介面

views.py：

# 刪除小步驟
def delete_step(request, eid):
    step_id = eid
    DB_step.objects.filter(id=eid).delete()

    return HttpResponse('')

重啟服務/重新整理頁面，我們測試一下：

 

7. 優化排序問題

忽略了一個問題：現在要在頁面上顯示出 這些步驟的index執行順序，以便之後除錯。

不要忘了，之前重新整理功能獲取的只有id和name，現在因為要考慮到排序順序，所以得增加上index：

重啟服務，重新整理頁面：

 

假如刪除了 序號為2的步驟，那麼剩下的步驟怎麼辦？序號是1 和 3，還是 1和2（3自動變成2）呢？希望 後者

重寫del_step函式～

# 刪除小步驟
def delete_step(request, eid):
    step = DB_step.objects.filter(id=eid)[0]  # 獲取待刪除的step
    index = step.index  # 獲取目標index
    Case_id = step.Case_id # 獲取目標的所屬大用例id
    step.delete()  # 刪除目標step

    for i in DB_step.objects.filter(Case_id=Case_id).filter(index_gt=index):  # 遍歷所有大用例下的步驟中，順序號大雨目標index的步驟
        i.index -= 1  # 執行順序自減1
        i.save()

    return HttpResponse('')

其中，首次運用了雙篩選和 大於寫法 欄位__gt = 

 

重啟服務，重新整理頁面。測試一下，刪除中間的第二條後的效果：

 

相關文章