本节大纲

Ø H5 与小程序介绍

Ø 混合 App 元素定位环境部署

Ø 混合 App 元素操作

Ø Airtest 测试 App

01.H5与小程序介绍

H5概述

H5 是指第 5 代 HTML ，也指用 H5 语言制作的一切数字产品。
所谓 HTML 是“超文本标记语言”的英文缩写。我们上网所看到网页，多数都是由 HTML 写成的。
“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。而“标记”指的是
这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码 HTML ，就可以把网页内
容显示出来，它也构成了互联网兴起的基础。
H5 之所以能引发如此广泛的效应，根本在于它不再只是一种标记语言，它为下一代互联网提供了
全新的框架和平台，包括提供免插件的音视频、图像动画、本体存储以及更多酷炫而且重要的功
能，并使这些应用标准化和开放化，从而使互联网也能够轻松实现类似桌面的应用体验。

H5特点

H5 的最显著的优势在于跨平台性，用 H5 搭建的站点与应用可以兼容 PC 端与移动端、 Windows 与Linux 、安卓与 IOS 。
H5 的本地存储特性也给使用者带来了更多便利。基于 H5 开发的轻应用比本地 APP 拥有更短的启动时间，更快的联网速度，而且无需下载占用存储空间，特别适合手机等移动媒体。
而 H5 让开发者无需依赖第三方浏览器插件即可创建高级图形、版式、动画以及过渡效果，这也使
得用户用较少的流量就可以欣赏到炫酷的视觉听觉效果。

小程序概述

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或
者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。
应用将无处不在，随时可用，但又无需安装卸载。
随着 APP 市场的饱和，大部分用户已经养成了使用习惯，开发新的 APP 很难在市场生存。此外， APP 开发和推广成本高也是不争的事实。据调查：移动电商APP 的下载成本高达 120-200 元，而且这些后期未必能形成转化。互联网金融、二手车电商APP 的新客户成本，更是动辄高达数千元。
对于开发者而言，小程序开发门槛相对较低，难度不及 APP ，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。对于用户来说，能够节约使用时间成本和手机内存空间；对于开发者来说也能节约开发和推广成本。

H5与小程序的关系

简单来说，小程序是一种应用，运行的环境是微信（ App ）； H5 是一种技术，依附的外壳
是是浏览器。
H5 的运行环境是浏览器，包括 WebView ，而微信小程序的运行环境并非完整的浏览器，因
为小程序的开发过程中只用到一部分 H5 技术。
小程序中无法使用浏览器中常用的 window 对象和 document 对象， H5 可以随意使用。

02.混合App元素定位环境部署

如何区分原生App和混合App
Web app最容易区分，用浏览器打开和访问的就一定是 web app
如何区分 navicat app 、 hybird app
1. 打开开发者选项中的显示布局边界
2. 如果页面中的每个控件都是由各个框框起来的，就是 navicat app
3. 如果APP 中某些界面中的每个控件被各个框框起来，而另外个别界面的很多元素在一个大的框中间，那么这个就是hybird app 了。

混合App环境准备

1. uc-devtools.msi
主要是用来获取 Web app 和混合 app 的 H5 的元素信息
2. XposedInstaller_V3.1.5.apk
Xposed 是一个框架，能够继承很多功能模块，这些功能模块能够在不修改 APK 的情况下，
修改 APP 的运行方式。
3. webviewdebughook_v5_a5ff1e.apk
开启 APP 的 webview debug 模式

UC开发者工具安装

UC 开发者工具是安装在 PC （电脑）上
安装：双击打开 uc-devtools.msi ，默认傻瓜式安装
打开：安装完成后，在开始菜单搜索‘ uc ’，打开 uc-devtools
点击设置 -- 》选择本地 Devtools.... 选项

UC开发者获取web app元素信息

切换到 home

打开模拟器上的浏览器，在 home 中就可以看到获取的网页信息

UC开发者获取web app元素信息

点击获取页面的 inspect ，就可以在 developer tools 工具中查看到页面中的每个元素
这就是我们熟悉的 web 应用定位元素的界面

Xposed安装与配置

Xposed 是安装在设备（模拟器，真机）上，主要用来激活模拟器框架
安装：将 XposedInstaller_V3.1.5.apk 拖动到模拟器进行安装，安装后在桌面有快捷方式
配置：
1. 打开安装好的Xposed ，提示信息点击确定
2. 在安装/ 更新下点击 Version 89 ，选择 instal, 等待下载

Xposed配置

3. 下载完成后，超级用户请求的提示信息，选择永久记住选择，点击允许
4. 选择右下角的重启设备，等待模拟器重启
5. 模拟器重启后，再进入xposed, 如果显示 xposed 框架 89 版已经激活，则环境 Ok 了

webview安装与配置

webview 是安装在设备（模拟器，真机）上，主要用来开启 APP 的 webview debug 模式
安装：将 webviewdebughook_v5_a5ff1e.apk 拖动到模拟器进行安装，安装后在桌面没有快捷方式
配置：
1. 打开xposed ，点击左上角的设置，选择模块
2. 此时我们第一步安装的webviewdebughook 会显示在模块下面，将 webviewdebughook 进行勾选
3. 重启模拟器，这一步骤很重要。重启后再次进入 xposed 检查 xposed 框架 89 版是否激活，如果没激活，则重新下载、安装和重启模拟器。

03.混合App元素操作

混合App元素信息获取

1. 打开uc-devtools 工具，点击 Home
2. 在模拟器上打开58 同城，点击家政界面
3. 查看uc-devtools 工具中是否有是识别到，如果有识别到，则 OK
4. uc-devtools工具中点击识别到界面的 inspect
5. 跳转到developer tools 工具界面，就可以获取到所有的元素信息

Appium对混合App进行自动化流程操作

案例流程：
在 58 同城的首页点击家政，在家政界面点击消毒杀菌，按 2 次返回键回到首页，然后在首页点击本地服务
问题：首页是原生界面，家政是 H5 界面，操作流程涉及到不同页面的切换，怎么处理？
解决：
App 界面有一个标识，叫做 context （上下文），原生界面的上下文都是一致的。
Appium 提供了操作 context 的方法
1. driver.current_context 获取当前界面的 context ，
2. driver.contexts 获取所有上下文，存储在一个列表中
3. driver.switch_to.context(context)

Appium脚本实现

上下文切换报错

uc tools 工具获取的 H5 界面信息，是如何展示在浏览器上的，原因就是 Appium 内置了一个谷歌驱动，通过此驱动才能将H5 的界面元素信息展示在谷歌浏览器上。
在 uc tools 包名后面的数字，显示的就是谷歌浏览器的版本号，因此如果内置谷歌的驱动与包名后面的浏览器版本不一致的时候，就会出现报错的问题。
内置驱动存储位置：
C:\Users\wxy\AppData\Local\Programs\Appium\resources\app\node_modules\appium\node_modules\ap
pium-chromedriver\chromedriver\win

解决办法

确保内置的谷歌驱动跟操作混合 App H5 界面的浏览器版本保持一致即可。
谷歌驱动下载地址： https://npm.taobao.org/mirrors/chromedriver/

04.Airtest测试App

AirtestIDE工具

Airtest 是网易出品的一款基于图像识别和 poco 控件识别的一款 UI 自动化测试工具。
AirtestIDE 是一个跨平台、多端（ Windows 、 web 、 android 、 ios 、游戏）的 UI 自动化测试编辑器，支持自动化脚本录制、一键回放、报告查看。
下载地址： http://airtest.netease.com/
安装：解压打开，找到 AirtestIDE.exe 文件，双击打开即可（包含了所有组件）