appium-desktop录制脚本二次开发，生成我司自动化脚本

2023-08-20 16:53:28

目的

对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';

export default 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 function atkAssertResult (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

case RECORD_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 function showSendElementNameModal () {

  return (dispatch) => {

    dispatch({type: SHOW_SEND_ELEMENT_NAME_MODAL});

  };

}

case SHOW_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传递过来。代码修改如下