测试用例运行事件历经过程一

在测试用例管理界面，我们可以点击运行按钮，执行用例，并且在测试结果中显示运行状态。这是怎么实现的呢？今天这篇博文就是介绍这一事件的历经过程。
首先客户端向服务器发送get请求，服务器返回测试用例信息到前端。操作设置中运行事件的点击代码在这里：

tr += '<a href="javascript:void(0);" class="pointer" οnclick="running(' + res.data.testcase[i].projectId + ',' + res.data.testcase[i].id + ')">运行</a> - ';

这里可以看到，这段代码是在前端运行running函数参数为项目id和用例id。running函数是做什么的呢，我们来看源代码：

function running(projectId, testcaseId) {
        $("#message").html("");
        $("#browsers").val("");
        $("#es").find("option").remove();
        $("#running").modal("show");
        $.ajax({
            url: '/api/v1/environment?p=1',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify({"projectId": projectId, "pageSize": 9999999}),
            success: function (res) {
                if (res.code == 200) {
                    for (var i = 0; i < res.data.environments.length; i++) {
                        if (projectId == res.data.environments[i].projectId) {
                            $("#es").append('<option value="' + res.data.environments[i].id + '">' + res.data.environments[i].name + '</option>');
                        }
                    }
                }
            }
        });
        $("#runningTestCase").attr("onclick", "runningTest(" + testcaseId + ")");
    }

message是后端返回的错误信息，这里先初始化。browsers是选择的运行浏览器，es是运行的项目环境。这里都先进行初始化。初始化的目的是为了让下拉框每次打开都是初始化的状态，不是默认选择上一次的。
这里细心的人发现了，browser为什么没有显示，因为我把它的显示放在了外边，因为post的url不一样，所以需要分开。

    $.ajax({
        url: '/api/v1/browser',
        type: 'POST',
        dataType: 'json',
        success: function (res) {
            if (res.code == 200) {
                var options = ""
                for (var i = 0; i < res.data.browsers.length; i++) {
                    options += '<option value="' + res.data.browsers[i].id + '">' + res.data.browsers[i].name + '</option>';
                }
                $("#browsers").append(options)
            }
        }
    });

这两个函数是显示的这个画面：

选择好之后点击运行，这里的函数是runningTest()，用例id作为参数传过去。

function runningTest(testcaseId) {
        var browsers = $("#browsers").val();
        var environments = $("#es").val();
        if (browsers == null) {
            $("#message").html("请选择运行的浏览器");
            return;
        }
        if (environments == null) {
            $("#message").html("请选择运行的环境");
            return;
        }
        $.ajax({
            url: '/api/v1/testcase/running/' + testcaseId,
            type: 'post',
            dataType: 'json',
            data: JSON.stringify({"browsers": browsers, "environments": environments}),
            success: function (res) {
                if (res.code == 200) {
                    $("#running").modal("hide")
                    $("#tjcg").modal("show");
                    // $("#gotoResult").attr("onclick", "toResult(" + res.data + ")")
                } 
                else {
                    $("#message").html(res.message);
                }
            }
        });
    }

获取browser和es的value值传到后台。处理成功running窗口隐藏，窗口打开。不成功返回错误信息。

后台对应的代码为：

 @staticmethod
    @post
    def test(request, testcase_id):
        tc = get_model(testcase, id=testcase_id)
        if not tc:
            return JsonResponse.BadRequest("该测试用例不存在")
        try:
            parameter = get_request_body(request)
        except ValueError:
            return JsonResponse.BadRequest("json格式错误")
        browsers = parameter.get("browsers", [1])
        environments = parameter.get('environments', [])
        if not (browsers and isinstance(browsers, list)):
            return JsonResponse.BadRequest("参数错误：browsers应该是个列表")
        for browser in browsers:
            if not (str(browser).isdigit() and int(browser) > 0):
                return JsonResponse.BadRequest("参数错误：browser应该是个正确的Id")
        r = Result.objects.create(projectId=tc.projectId, testcaseId=tc.id, checkValue=tc.checkValue,
                                  checkText=tc.checkText, selectText=tc.selectText,
                                  checkType=tc.checkType, title=tc.title, beforeLogin=tc.beforeLogin,
                                  steps=tc.steps, parameter=tc.parameter,
                                  browsers=json.dumps(browsers, ensure_ascii=False),
                                  environments=json.dumps(environments, ensure_ascii=False))
        SplitTask.delay(r.id)
        return JsonResponse(200, 'ok', r.id)

流程是这样的：判断是否存在这个用例，存在用parameter将json转码。获取到browser和environment。创建一条result数据。接下来最重要的，需要celery登场了，运行SplitTask.delay()函数，参数是id。