测开之路六十五：UI测试平台之js

//添加网址的函数，生成一个输入网址的标签，并且把标签append到id为cases下
function browser() {
    var html = '\
    <div class="row" command="browser">\
        <label>打开网址：</label>\
        <input type="text" placeholder="http://www.baidu.com/">\
    </div>\
    '
    $('#cases').append(html)
}

//选择元素选择器（xpath、css···），和对应的元素表达式
//selenium的BY支持：id、xpath、link text、partial link text、name、tag name、class name、css selector"
function find() {
    var html = '\
    <div class="row" command="find">\
        <label>定位方式：</label>\
        <select>\
            <option value="xpath">xpath</option>\
            <option value="css selector">css selector</option>\
            <option value="name">name</option>\
        </select>\
        <label>元素：</label>\
        <input type="text">\
    </div>\
    '
    $('#cases').append(html)
}

//输入内容
function send() {
    var html = '\
    <div class="row" command="send">\
        <label>填写内容：</label>\
        <input type="text">\
    </div>\
    '
    $('#cases').append(html)
}

//动作选项下的动作，目前只做了click，还有获取文本等操作未实现
function click() {
    var html = '\
    <div class="row" command="click">\
        <label>选择动作：</label>\
        <select>\
            <option value="click">click</option>\
        </select>\
    </div>\
    '
    $('#cases').append(html)
}

//command被点击时的处理方法，取option的值（对应html的select标签下option的value）判断是要做什么操作，调对应的函数
// 如：打开网页、点击、定位、输入内容···
function add_element() {
    var command = $('#option').val()
    if (command == 'browser') {
        browser();  //调browser函数
    } else if (command == 'find') {
        find(); //调find函数
    } else if (command == 'send') {
        send()  //调send函数
    } else if (command == 'click') {
        click()  //调click函数
    } else {
        alert("错误的方法！")
    }
}

//提取参数，解析操作
function parse_parameters(html) {
    var data = {}
    //获取command的属性，用来判断对应的操作
    var command = $(html).attr("command")
    //如果command是browser，即打开浏览器操作，则执行以下操作
    if (command == 'browser') {
        data['command'] = 'browser';  //把command的值初始化为browser
        data['parameter'] = {  //parameter的值初始化为input标签里的值，即网址
            'value': $(html).find('input').val()
        }
    //如果command是find，则执行以下操作
    } else if (command == 'find') {
        data['command'] = 'find';  //把command的值初始化为find，用于后台反射
        data['parameter'] = {
            'selector': $(html).find('select').val(), //selector取select标签的值
            'value': $(html).find('input').val(), //value取input标签的值
        }
    //如果是send操作，value取input标签的值
    } else if (command == 'send') {
        data['command'] = 'send';
        data['parameter'] = {
            'value': $(html).find('input').val()
        }
    //点击操作，不需要参数
    } else if (command == 'click') {
        data['command'] = 'click';
        data['parameter'] = {
        }
    } else {
        //目前没有写的操作，均视为错误
        console.log("错误的HTML！")
    }
    console.log(data)
    return data;
}

//成功，打印数据
function success(data) {
    alert(data['message'])
    //console.log(data)
}

//失败，打印数据
function fail(data) {
    alert(data['message'])
    //console.log(data)
}

//运行操作
function run() {
    //取出cases下的所有div标签
    var list = $('#cases').find('div');
    //定义data的数据结构为{'casename': casename, 'commands': []}
    var data = {
        'casename': $('#name').val(),
        'commands': []
    };
    //把list里的每一个元素解析出来，数据结构如下
    // data = {
    //     'commands': [
    //     {'command': 'get',
    //      'parameter': {'value': 'www.xxx.com'}
    //      }, {}]}
    $(list).each(function(index, item){
        var command = parse_parameters(item)
        data['commands'].push(command)
    });
    console.log(data)
    var url = host + '/automation/api/v1/run';  //把数据发送到/automation/api/v1/run接口处理
    http(url, data, 'POST', success, fail);
}

//保存操作（和run一样）
function save() {
    var list = $('#cases').find('div'); //提取数据
    var data = {
        'casename': $('#name').val(),
        'commands': []
    };
    $(list).each(function(index, item){
        var command = parse_parameters(item)
        data['commands'].push(command)
    });
    console.log(data)
    var url = host + '/automation/api/v1/save';
    http(url, data, 'POST', success, fail);
}

//js处理入口
$(function() {
    $('#command').click(add_element); //添加按钮
    $('#run').click(run); //运行按钮
    $('#save').click(save); //保存按钮
});