(一)appium-desktop定位元素原理

初衷

最近在编写Android App自动化用例，其中元素定位相对来讲耗费的时间比较长。咱们都知道Appium-desktop拥有本身的录制功能，咱们就在想是否是能够把录制功能跟我司的自动化框架(ATK)打通，直接生成咱们框架能够识别的自动化脚本，甚至能够产出java版的IDE。这样就能够节省大量的元素定位和脚本编写时间。因此最近经过debug分析Appium-desktop的源码，梳理了Appium-desktop定位/查找元素的原理。

因为appium-desktop使用react编写了大量的组件，且使用的是electron框架，因此先来了解一下几个概念以及调试代码须要的环境准备

1、写在前面

一、区分几个概念

名称	概念	下载连接	现状
appium/appium server	这是appium体系的核心，它自己也是一个web接口服务，因此也会被称为appium server，对外默认开启包括4723等多个端口	一、安装nodejs；二、安装appium server，命令npm install -g appium；三、运行appium server appium --session-override	appium Server不在更新，后续使用Appium Desktop
Appium Desktop	为了Appium更好用、入门更容易、让调试和界面分析更方便，官方开发了GUI的工具，由于它内嵌了appium，不少人会觉得它叫appium，其实它是个综合性的桌面工具。只有分析时候才用，平时都是用appium。	https://github.com/appium/appium-desktop/releases/	按照本身的节奏发布，并拥有本身的版本控制系统
Appium Client	appium只是一个web接口，他接受http请求，因此各个语言均可以本身封装发送请求，因而就有appium下的各个子项目	https://github.com/appium/appium/blob/master/docs/en/about-appium/appium-clients.md	每一个子项目各自迭代
Appium GUI	也是把Appium server封装成一个图形界面，下降使用门槛。前几年开始接触appium,大部分教程都是基于这个GUI来说解的，因此不少人提及Appium就认为是这个	https://bitbucket.org/appium/appium.app/downloads/	2015中止更新

 

二、一门语言(react)、一个框架(electron)

2.一、React

2.1.一、概念

       React是Facrbook内部的一个JavaScript类库，不是一个完整的MVC框架，最多能够认为是MVC中的V。React推荐以组件的方式去从新思考UI构成，将UI上每个功能相对独立的模块定义成组件，而后将小的组件经过组合或者嵌套的方式构成大的组件，最终完成总体UI的构建。

2.1.二、专一

      它专一于两件事情--更新DOM和响应事件。

2.1.三、工做流

      React以渲染函数为基础。这些函数读入当前的状态，将其转换为目标页面上的一个虚拟表现。只要React被告知状态有变化，他就会从新运行这些函数，计算出页面的一个新的虚拟表现，接着自动把结果转换成必要的DOM更新来反映新的表现

2.1.四、more

更多介绍：https://react.docschina.org

使用教程：http://www.runoob.com/react/react-component-life-cycle.html

2.二、electron

2.2.一、概念

Electron是用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron经过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来。

2.2.二、核心

electron核心能够分红2个部分，主进程和渲染进程。主进程链接着操做系统和渲染进程，能够把它看作页面和计算机沟通的桥梁。渲染进程就是咱们所熟悉前端环境了。主进程与渲染进程之间不能直接互相访问，须要经过ipcMain和ipcRenderer进行通讯。

主进程：有且只有一个主进程, package.json中的main字段标明脚本的进程称为主进程.好比appium-desktop的主进程为dist/main.js的进程。

渲染进程：每一个页面都运行在本身的渲染进程。

通讯：主进程和渲染进程经过消息监听机制通讯。其中主进程经过ipcMain.on和event.sender.send实现监听渲染进程发来的消息和向渲染进程发送消息；渲染进程经过ipcRenderer.on和ipcRenderer.send实现监听主进程发来的消息和向主进程发送消息。

2.2.三、调试

 渲染进程调试：能够在开发者工具里的 Sources进行断点调试。开发者工具经过这段代码开启mainWindow.webContents.openDevTools()，须要查看该段断码是否被注释。appium-desktop是经过是否dev环境来判断是否开启，启动脚本传递NODE_ENV=development即为dev环境。package.json中有写好的脚本(start-dev),直接npm run start-dev便可。

主进程调试：经过electron进行调试,配置在Run/Debug Configurations中的Node.js运行环境中。以下图

2.2.四、more

更多介绍：https://electronjs.org

使用教程：https://www.w3cschool.cn/electronmanual/

2.三、环境

2.3.一、安装cnpm

由于npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，咱们通常使用淘宝cnpm。

命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm config set registry http://registry.cnpmjs.org

2.3.二、install和build

下载依赖：cnpm install

编译：cnpm run build. 通常Electron工程不须要build，直接运行就能够，appium-desktop由于主进程在build后的dist目录下，因此须要build。

2、流程图

获取页面dom文件，从新解析并渲染出来

3、主要步骤源码解析

   appium-desktop定位元素主要是把获取到的当前页面的DOM文件解析为json,并增长key字段做为后续操做的惟一标示，而后经过React把解析后的DOM文件从新渲染出来。经过事件点击获取到key,经过惟一key就能够从json中获取到控件的全部属性信息

      3.一、获取页面dom文件

     

 

   经过bootstrap脚本执行命令 获取页面dom文件，返回文件相似：

<?xml version=\"1.0\" encoding=\"UTF-8\"?><hierarchy rotation=\"0\"><android.widget.FrameLayout index=\"0\" text=\"\" class=\"android.widget.FrameLayout\" package=\"com.zhangdan.app\" content-desc=\"\" checkable=\"false\" checked=\"false\" clickable=\"false\" enabled=\"true\" focusable=\"false\" focused=\"false\" scrollable=\"false\" long-clickable=\"false\" password=\"false\" selected=\"false\" bounds=\"[0,0][1080,1920]\" resource-id=\"\" instance=\"0\">

能够看出文件中显示关于控件的全部信息

3.二、把dom文件解析为json

 3.2.一、xmlDoc

经过xmlDoc = (new DOMParser()).parseFromString(source, 'application/xml'); 获取到的xmlDoc其实已是树状的控件信息，如图

 3.2.二、element

返回元素信息包括 children,tagname,attributes,xpath,path.   xpath是元素的全路径；path是控件在json中的顺序，这个是后面识别的惟一标示；attributes元素的属性信息

3.三、从新定义元素

appium-desktop 从新根据本身的需求增长了key=path的属性做为后续操做的标示，并使用react的功能渲染一个虚拟DOM显示。

3.四、加载各个功能组件

 appium-desktop 把各个功能点都做为组件来使用，因此源码中compenents下面都是功能组件，而后利用react动态渲染DOM。如图：