目的
对appium-desktop脚本录制功能进行二次开发,增加录制ATK脚本功能。录制样式为
{"preSteps": [----------前置条件为打开页面PG或者启动Driver(需要根据page参数判断)
],"stepSets": [
[----------支持 点击、输入、滑动、坐标点击、返回操作、校验功能(新增校验功能)
]
],"afterSteps": [
]
}
思路
新增ATK录制脚本的JS-----准备脚本需要的参数----增加新功能---编写脚本
实现步骤
1、增加AutoTestKit.js
新增js脚本用于实现录制ATK脚本
1.1、实现方案
新增AutoTestKit.js脚本关联到Framework,并设置为默认脚本
1.2、代码修改
1.2.1、新增脚本
注意设置脚本最后面的readableName和export
AutoTestKit.readableName = 'Java - ATK';
exportdefault AutoTestKit;
1.2.2、增加到frameworks
在lib/client-frameworks/index.js 常量中增加atk: AutoTestKit,注意要import AutoTestKit.
1.2.3、特殊处理AutoTestKit
AutoTestKit.js与其它语言录制脚本格式不一致,不能采用默认的跳转,需要重新设置。
首先需要在Inspector/RecordedActions.js中进行actionFramework参数传递。注意本次除了增加actionFramework参数外,还增加了sendElementName、page后面会用到
其次根据actionFramework路由到AutoTestKit.js
1.2.4、设置为默认
在reducers/Inspector.js中设置DEFAULT_FRAMEWORK='atk'
2、增加当前Activity值参数
脚本中需要根据activity值的不同设置前置条件
2.1、实现方案
在startRecording和RefreshSource操作中获取当前页面的activity, 并设置为action,如果是RegisterGuideActivity前置条件设置为启动driver,否则设置为打开PG。
在ClearActions时把设置的activity重置为空
2.2、代码修改
2.2.1、获取activity
在Inspector/Inspector.js 修改refreshSource和startRecording的onClick 方法,在原来操作的基础上增加设置当前页面的activity到全部变量中。注意:refreshSource是先跟device交互再获取activity.
atkStartRecording(){this.props.startRecording();this.getPage();
}
atkRefreshSource(){this.props.applyClientMethod({methodName: 'source'});this.getPage();
}/**
* 获取当前页面的activity
* @returns {*}*/getPage() {
let exec= require('child_process').execSync;
let last= exec('adb shell dumpsys window windows | grep mCurrent');
let page=last.toString("utf8").trim();this.props.setFieldValue("page",page.substring(page.lastIndexOf(".")+1,page.length-1));
}
2.2.2、传递到Framework
在Inspector/RecordedActions.js中进行page参数传递。
如1.2.3图
2.2.3、设置前置条件
目前没有办法直接获取当前页面的PG,只能手动维护一个activity与PG的对应关系,后续如果出现新的activity,需要手动维护。RegisterGuideActivity 是启动成功页面。
2.2.4、clearActions
清楚actions时需要重置全局变量中page的值,否则不能获取新页面的值。
atkClearActions(){this.props.clearRecording();this.props.setFieldValue("page","");
}
3、增加assert校验功能
自动化脚本需要assert校验,现有录制没有该功能,需要新增。
3.1、实现方案
在Tap、Send Keys、Clear后面增加Assert功能,Assert只需要校验定位的元素存在即可,不需要和device交互。
3.2、代码修改
3.2.1、增加Assert按键
由于不需要和device交互,所以参数中不存在定位元素的属性,需要手动把findDataSource参数传递下去。
actions/Inspector.js中增加atkAssertResult()方法
export functionatkAssertResult (params) {return (dispatch) =>{
let args=[];
args= args.concat(params.args ||[]);
dispatch({type: RECORD_ACTION, action: params.methodName, params: args });----说明是录屏操作
dispatch({type: METHOD_CALL_DONE});---方法调用结束标示
};
}
4、ATK脚本编写
录制为ATK脚本
4.1、实现方案
根据操作类型action对应不同的AW,action=findAndAssign 获取定位元素的属性(ID 、xpath);action=click、sendKeys、swipe、tap对应AWAppiumComponentInit;action=back对应AWKeyBoardAction;action=assert对应AWDriverActionAssertBatch
4.2、代码实现
4.2.1、获取元素的描述信息
获取元素的text或者content-desc信息用于显示脚本中remark
let note="";if(selectedElement&&selectedElement.attributes.text!==""){
note=selectedElement.attributes.text;
}else if(selectedElement&&selectedElement.attributes["content-desc"]!==""){
note=selectedElement.attributes["content-desc"];
}
因为一个脚本会有多个action,所以要把元素和action进行绑定。
修改reducers/Inspector.js,每个录屏操作原来都有action、params参数,现在增加selectedElement
caseRECORD_ACTION:return{
...state,
recordedActions: [
...state.recordedActions,
{action: action.action, params: action.params,selectedElement:state.selectedElement}
]
};
结果如图:
4.2.2、switch-case
其中assert与back逻辑一致
switch(action){case "findAndAssign"://取出type和value
type=params[0];
value=params[1];break;case "click":
str+=` ["${note}", "${type}","${action}","${value}"]`;break;case "sendKeys":
str+=` ["${note}", "${type}","${action}","${params[2]}", "${value}"]`;break;case "swipe":
str+=` ["滑屏", "","${action}","${params[2]}","${params[3]}","${params[4]}","${params[5]}"]`;break;case "tap":
str+=` ["坐标点击", "","${action}","${params[2]}","${params[3]}"]`;break;case "back":
let backAction="back",frontAction="back";//获取下一次操作
if(i!==actions.length-1){
backAction=actions[i+1].action;
}//获取上一步操作
if(i!==0){
frontAction=actions[i-1].action;
}//如果返回操作是第一个操作的情况
if(i===0){
str=`{\n \"preSteps\": [\n${preStep} ],\n \"stepSets\": [\n [\n`;
}else{
if("back"!==frontAction&&"assert"!==frontAction){
//上一步操作不是返回、校验操作,去除最后一个逗号
str=str.substring(0,str.length-2);
str+=`\n ]\n },\n`;
}
}
str+=` {\n"className":"AWKeyBoardAction"\n }`;
//如果back不是最后一个操作,则重新开始
if(i!==actions.length-1){
str+=`,\n`;
if("back"!==backAction&&"assert"!==backAction){
//如果下一个操作不是返回,校验操作,则添加
str+=` {\n"className": "AWAppiumComponentInit",\n "remark": "",\n "elementInfoList": [\n`;
}
}
break;
5、增加元素名称的输入框--暂时不需要
由于ATK脚本中元素是以“app-page-element”的方式定位元素,所以需要用户输入page名称和element名称,并保存到数据库中。
5.1、实现方案
在现有的Tap、Send Keys、Clear操作上增加元素输入框操作,如图
5.2、代码修改
5.2.1、修改onClick方法
修改Inspector/SelectedElement.js 中tab、Tap、Send Keys、Clear的onClick方法,修改为通过在actions/Inspector.js中新增showSendElementNameModal()方法来控制弹出框, 该方法会把type设置为
SHOW_SEND_ELEMENT_NAME_MODAL, 在reducers/Inspector.js中中新增switch-case的一个分支,来设置sendElementNameModalVisible=true
export functionshowSendElementNameModal () {return (dispatch) =>{
dispatch({type: SHOW_SEND_ELEMENT_NAME_MODAL});
};
}caseSHOW_SEND_ELEMENT_NAME_MODAL:return{
...state,
sendElementNameModalVisible:true};
5.2.2、增加输入框
新增输入element的输入框,当sendElementNameModalVisible=true时该输入框显示,点击OK时,调用新增的handleSendElementName()方法,进行元素的获取和这是输入框隐藏
handleSendElementName () {
const {sendElementName, applyClientMethod, hideSendElementNameModal, selectedElementId: elementId}= this.props;
applyClientMethod({methodName:'click', elementId});
hideSendElementNameModal();---同showSendElementNameModal()方法
}
6、保存元素名称到数据库-暂时不需要
表单提交元素名称后,需要把元素名称保存到数据库中,
6.1、实现方案
使用react已经引入JQuery的网络请求方案。通过POST方式把数据提交到数据库中
6.2、代码修改
Framework.js是各个语言录制脚本(java.js、python.js、ruby.js等)的父类。所以在Framework.js中进行数据库的统一添加
6.2.1、传参修改
Framework.js 的getCodeString()方法 增加sendElementName参数。通过RecordedActions传递过来。代码修改如下
如1.2.3图
6.2.2、post请求
其中page、element、expectedvalue需要用户填写,其它值可以通过代码获取。
postJSON() {var obj = { "app":"guanjia", "element":'aaaa', "expectedimg":"bbbb","expectedvalue": "cccc","os": "Android","page": "eeee","type": "id","value": "rwa"};--测试数据
const req= newXMLHttpRequest()
req.open('POST', 'http://10.247.39.5:7070/wisper/api/v1/atk/appium/elementinfo')
req.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
req.send(JSON.stringify(obj))
}