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

初衷

最近在編寫Android App自動化用例,其中元素定位相對來講耗費的時間比較長。咱們都知道Appium-desktop擁有本身的錄製功能,咱們就在想是否是能夠把錄製功能跟我司的自動化框架(ATK)打通,直接生成咱們框架能夠識別的自動化腳本,甚至能夠產出java版的IDE。這樣就能夠節省大量的元素定位和腳本編寫時間。因此最近經過debug分析Appium-desktop的源碼,梳理了Appium-desktop定位/查找元素的原理。html

因爲appium-desktop使用react編寫了大量的組件,且使用的是electron框架,因此先來了解一下幾個概念以及調試代碼須要的環境準備前端

1、寫在前面

一、區分幾個概念

名稱 概念 下載連接 現狀
appium/appium server 這是appium體系的核心,它自己也是一個web接口服務,因此也會被稱爲appium server,對外默認開啓包括4723等多個端口

一、安裝nodejs;二、安裝appium server,命令npm install -g appium;三、運行appium server appium --session-overridejava

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的構建。node

2.1.二、專一

      它專一於兩件事情--更新DOM和響應事件。react

2.1.三、工做流

      React以渲染函數爲基礎。這些函數讀入當前的狀態,將其轉換爲目標頁面上的一個虛擬表現。只要React被告知狀態有變化,他就會從新運行這些函數,計算出頁面的一個新的虛擬表現,接着自動把結果轉換成必要的DOM更新來反映新的表現android

2.1.四、more

更多介紹:https://react.docschina.orggit

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

2.二、electron

2.2.一、概念

Electron是用HTML,CSS和JavaScript來構建跨平臺桌面應用程序的一個開源庫。 Electron經過將ChromiumNode.js合併到同一個運行時環境中,並將其打包爲Mac,Windows和Linux系統下的應用來。web

2.2.二、核心

electron核心能夠分紅2個部分,主進程和渲染進程。主進程鏈接着操做系統和渲染進程,能夠把它看作頁面和計算機溝通的橋樑。渲染進程就是咱們所熟悉前端環境了。主進程與渲染進程之間不能直接互相訪問,須要經過ipcMain和ipcRenderer進行通訊。npm

主進程:有且只有一個主進程, 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。如圖:

相關文章
相關標籤/搜索