Xmind2testcase二次开发优化导入xmind文件后的前端页面

使用Xmind2testcase平台,导入xmind文件后的前端页面优化UI

修改如下:

1. 用例分开成操作步骤和期望结果展示,优先级/前置条件/相关需求分开展示并添加优先级的颜色.
2. 使用xmind编写时添加符号加号,导入后如下面图片中展示成背景绿色标识

场景：

1. 测试人员导入用例后,原来的模板看着比较麻烦不美观,原来模板上优先级颜色是一致的,分色展示可以更直观的区分.原模版用例步骤和预期在一起,看起来不方便
2. 用例评审后,在xmind中新增用例场景,导入后相关人员不能快速查看出新增的用例是哪些.(或是用在:在编写用例时,需要研发着重注意的用例也可以用一个符号标识来标记,导入后添加背景色来标记)

实现步骤和预期结果分开展示,只需要修改preview.html文件:

在table下新增一个tr标签 名为expectedresults:

<thead>
<tr>
    <th width="50">#</th>
    <th width="150px">Suite</th>
    <th width="5%">Priority</th>
    <th width="1500px">Title</th>
    <th width="100px">preconditions</th>
    <th width="100px">Attributes</th>
    <th width="23%">Steps</th>
    <th width="23%">expectedresults</th>
</tr>
</thead>

将tbody下的最后一个td标签内容拆分,一个获取test.steps,一个获取step.expectedresults:

				<td>
                    {% if test.steps %}
                        <ol>
                            {% for step in test.steps %}
                                <li>{{ step.actions }}
                                </li>
                            {% endfor %}
                        </ol>
                    {% endif %}
                </td>
                <td>
                    {% if test.steps %}
                        <ol>
                            {% for step in test.steps %}
                                {% if step.expectedresults %}
                                    <li>{{ step.expectedresults }}</li>
                                {% endif %}
                            {% endfor %}
                        </ol>
                    {% endif %}
                </td>

Attributes中的优先级\前置条件\相关需求拆分就不多说了,把它们放到对应tr的td中去就可以实现

实现xmind对一条用例添加符号(+),导入后该条用例背景色为绿色, 需要在parser.py文件下,修改get_test_result函数, xmind中加号对应的字段为symbol-plus,如果有用例标了加号,就把该条用例的result变量赋值为5,前端通过result变量判断:

def get_test_result(markers):
    """test result: non-execution:0, pass:1, failed:2, blocked:3, skipped:4"""
    # print(markers)      # 输入所对应的符号
    if isinstance(markers, list):
        if 'symbol-right' in markers or 'c_simbol-right' in markers:        # 符号 对号
            result = 1
        elif 'symbol-wrong' in markers or 'c_simbol-wrong' in markers:      # 符号 错误
            result = 2
        elif 'symbol-pause' in markers or 'c_simbol-pause' in markers:      # 符号 暂停
            result = 3
        elif 'symbol-minus' in markers or 'c_simbol-minus' in markers:      # 符号 减号
            result = 4
        elif 'symbol-plus' in markers or 'c_simbol-plus' in markers:        # 符号 加号
            result = 5
        else:
            result = 0
    else:
        result = 0

    return result

前端需要修改preview.html文件,通过request值=5来判断

此处会有问题

源码中,导入xmind用例后,页面使用的是 {{ loop.index }} 进行循环给序号赋值,如果使用此方法会造成循环赋值到一条数据result=5时,下方的用例序号会异常,为了解决这个问题,需要后台传给前端一个判断用例有多少条数的一个值,然后进行渲染,具体代码如下,需要修改appliaction.py文件下的preview_file函数:

@app.route('/preview/<filename>')
def preview_file(filename):
    full_path = join(app.config['UPLOAD_FOLDER'], filename)

    if not exists(full_path):
        abort(404)

    testsuites = get_xmind_testsuites(full_path)
    suite_count = 0
    steps_count = 0
    nums = []
    num_list = []
    for suite in testsuites:
        suite_count += len(suite.sub_suites)

    testcases = get_xmind_testcase_list(full_path)
    for i in range(len(testcases)):
        if len(testcases[i]['steps']) >= 1:
            steps_count += len(testcases[i]['steps'])
        if testcases[i]['result'] == 5:  # 获取新添加的用例行数
            nums.append(testcases.index(testcases[i]) + 1)
        testcases[i]['number'] = i+1    
        testcases[i]['color'] = 1   # 将每条用例加上一个color字段用来判断是否是新加的用例
    for j in range(len(testcases)):
        for k in range(len(nums)):
            if testcases[j]['number'] == nums[k]:
                testcases[j].update({"color": "2"})

    return render_template('preview.html', name=filename, suite=testcases, suite_count=suite_count,steps_count=steps_count, nums=nums, num_list=len(num_list))

将上传的用例数存入nums列表中,返回给前端,前端通过{{ test.number }}来渲染每行的序号.上面代码也把每条用例新加了color字段,默认为1(后来可依据该字段定制不同的需求),将result=5的用例color字段参数更新为2,前端判断{% if test.color == “2” %}则修改css背景颜色,从而实现该功能.

目前实现的效果图如下:

有需要目前修改的源码可私信或评论