做网站的工具怎么使用,网站建设首页该放什么软件,如何创建私人网站,二级网站怎样做排名Appium-inspector功能 Appium Inspector 基于 Appium 框架#xff0c;Appium 是一个开源工具#xff0c;用于自动化移动应用#xff08;iOS 和 Android#xff09;和桌面应用#xff08;Windows 和 Mac#xff09;。Appium 采用了客户端-服务器架构#xff0c;允许用户通…Appium-inspector功能 Appium Inspector 基于 Appium 框架Appium 是一个开源工具用于自动化移动应用iOS 和 Android和桌面应用Windows 和 Mac。Appium 采用了客户端-服务器架构允许用户通过客户端例如 Appium Inspector与 Appium 服务器通信以自动化测试应用程序。主要用这个工具来查找获取元素的locator提升mobile UI自动化测试效率。 Appium-inspector的界面如下图所示在界面上可以点击app页面元素左边会显示被选择元素的selector在app source的具体位置等信息。 Appium-inspector工作原理
Appium-inspector的工作流程大致可以分为如下四个部分连接移动设备或模拟器Appium Inspector 连接到目标移动设备或模拟器。可以是物理设备也可以是虚拟设备模拟器或仿真器。启动移动应用Appium 服务器接收客户端Appium Inspector的指令通过相应的驱动如 uiautomator2 驱动用于 AndroidXCUITest 驱动用于 iOS启动目标移动应用。 获取应用页面源代码一旦应用启动Appium 服务器通过驱动与移动设备或模拟器通信获取当前页面的源代码DOM 树包括所有 UI 元素及其属性。这个页面源代码通常以 XML 格式表示。展示 UI 元素Appium Inspector 将获取到的页面源代码解析并展示在图形界面上。用户可以在 Appium Inspector 中看到当前应用页面的结构、元素的层次关系以及每个元素的属性如 resource-id、class、text 等。生成 Locator用户在 Appium Inspector 中可以选择某个 UI 元素Appium Inspector 会根据该元素的属性生成唯一的定位符Locator。这些 Locator 可以用来在自动化脚本中定位和操作该元素。常见的 Locator 类型包括ID、XPath、Class Name、Accessibility ID 等。
Appium-inspector如何显示mobile app UI 在appium inspector上面可以加载显示mobile app应用页面这个是如何实现的呢实际appium inspector是通过截图来显示app页面UI的实现这个过程主要有四个步骤
截图获取: Appium Inspector使用Appium Server通过WebDriver协议与移动设备建立连接。一旦连接建立Inspector会向设备发送命令以获取当前应用的屏幕截图。
截图传输: 设备收到命令后会执行截图操作并将截图数据传输回Appium Server。这通常是以base64编码的图像数据的形式返回。
解码和展示: Appium Server接收到截图数据后会对其进行解码并在Inspector界面中展示。Inspector本身会使用相关的图像处理技术如将base64编码的图像数据解析为可见的图像。
图像渲染: 解码后的图像在Inspector界面中进行渲染以显示移动应用的当前界面。这个过程涉及将图像数据转换为可视化的UI元素通常以实时或者轮询的方式更新截图以显示最新状态。 当用appium-inspector连接到appium server时可以在appium server的日志中看到如下信息可以看到调用了appium server的接口获取screenshot信息和page source信息。screenshot就是用来显示mobile app UI的。 Appium-inspector如何生成selector 当鼠标hover到某个元素时appium inspector会设置元素的xy坐标信息。有了坐标信息就可以发送给appium server来获取页面元素信息。需要补充修改
Appium-inspector源码阅读 下图是appium-inspector source codecomponent里面是用react写各个自定义组件这些组件会组合到containers下面的InspectorPage.js和SessionPage.js中其中SessionPage.js及时appium-inspector连接信息输入的界面InspectorPage.js就是连接成功后显示source pagelocator等信息的的界面。另外这里使用了react reducers技术在 React 应用中useReducer 钩子是一种处理复杂状态逻辑的方式特别是当组件状态由多个子值组成或者当状态逻辑需要根据多种不同的动作进行更改时。 以reducers目录下Inspector.js为例接受action.type,来更新state信息。 以action目录下的Inspector.js为例文件里面定义了很多方法主要是通过dispatch来分发动作。 像获取整个页面的pageSourcescreenshot等是call appium server的api来获取的这些需要与appium server进行交互的部分都封装在callClientMethod方法里这个方法也定义在action/Inspector.js文件中。 除了上面的一些关键source code当用户点击页面的某个element的时候会在appium-inspector中显示生成的selector这个是如何实现的呢在utils目录下有个locator-generation.js文件里面有getSuggestedLocactor方法里面调用了getSimpleSuggestedLocators和getComplexSuggestedLocators方法再将获取的locator进行对比选取合理的locator。 SimpleSuggestedLocators方法主要是看元素信息中是否有content-descidresource-id等信息如果有这些信息就用这些信息来生成locator。 ComplexSuggestedLocators方法主要是使用-ios class chain,-android uiautomator等来生成定义页面元素的locator。 上面生成locator的前提是要给出选定element的相关信息从appium-inspector中下载source page如下图所示source page中除了有元素的content-desc等信息外还有个关键信息是bounds也就是元素的坐标信息。当鼠标选中某个element的时候可以计算得到element的坐标信息再根据这个坐标信息从source page中获取到对应的目标元素信息。那appium-inspector是什么时候计算所选元素的坐标信息的呢 在component目录下的Screenshot.jsx文件中有个handleMouseMove的方法可以看到当鼠标移动的时候这里会调用setXsetY来设置坐标信息。 以上就是Appium-inspector源码部分解读可以看到Appium源码理解可以分为下面7部分
1:使用react来构建appium-inspector的UI主要保卡session页面和inspector页面。
2:使用了react的reducer来管理复杂的状态信息对于涉及异步调用的部分还使用了redux thunk。
3:需要与appium server交互的部分都封装在clientMethod中。
4:inspector界面显示的app UI是通过调用appium server api获取到app的截图信息然后通过截图显示来实现app UI展示的。
5:inspector界面的page source也是调用appium server的api获取的。
6:获取的page source里面包含每个页面元素的坐标信息当鼠标move到某个元素上面时会设置元素的xy坐标信息这样当选中某个元素的时候可以通过坐标信息获取目标元素在page source中的所有信息
7:获取到元素信息后封装了一些方法来生成locator主要包括简单locator生成和复杂locator生成。实际只通过坐标获取到当前元素属性信息还无法直接生成所有的locator在source code的utils目录下有个source-parsing文件即把xml格式的page source信息转换成JSON格式的信息有了JSON格式的数据才能通过当前元素查找这个元素的父亲元素从而生成完善的locator信息生成locator信息后还可以调用appium-server的api确定这个locator是否是正确和唯一的。 以下图为例当选中左边的username input输入框的时候右边的locator有两种方式第一种是通过id查找element第二种是通过xpath查找element。当确定了selector后appium-inspector会调用appium server的api来确认是否能查找到元素。 如下图所示是inspector调用apppium server的api的截图信息当输入id的信息调用接口时返回了‘no such element’当输入xpath信息调用接口返回的element的信息返回的状态码也是200说明匹配到元素。 xml格式转换成json格式 Appium-inspector中当获取到xml格式的page source后还调用了util里面的parsing方法将xml格式转换成json格式的page sourcesource code内容如下图所示 这个方法的作用就是将xml格式的page source转换成JSON格式转换后就可以检索获取当前element的层级信息了便于生成xpath信息。假设输入的xml格式的source如下图所示 调用方法后生成的JSON格式的内容如下图所示可以看到在json格式数据中可以通过path信息计算出所有元素之间的层级关系。
{children: [{children: [{children: [],tagName: title,attributes: {lang: en},path: 0.0},{children: [],tagName: author,attributes: {},path: 0.1},{children: [],tagName: year,attributes: {},path: 0.2},{children: [],tagName: price,attributes: {},path: 0.3}],tagName: book,attributes: {category: children},path: 0},{children: [{children: [],tagName: title,attributes: {lang: en},path: 1.0},{children: [],tagName: author,attributes: {},path: 1.1},{children: [],tagName: year,attributes: {},path: 1.2},{children: [],tagName: price,attributes: {},path: 1.3}],tagName: book,attributes: {category: web},path: 1}],tagName: bookstore,attributes: {},path:
}以上就是整个appium-inspector实现原理的梳理和总结。
