测开之路六十五: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); //保存按钮
});
讨论群:249728408