坚持原创输出，点击蓝字关注我吧

作者：清菡

博客：oschina、云+社区、知乎等各大平台都有。

一、混合应用-H5
- 1.混合应用是什么？
- 2.怎么样分辨一个 App 页面究竟是原生的还是 Web 的？
- 3.如果 App 是 Web 的界面，那界面不会有布局边界显示，如有则说明是原生的界面。
二、想要操作这个 Html 页面
- 1.想通过代码点击立即购买，那 Web 自动化中用到了什么环境啊？
- 2.写代码点击全程班，进入全程班后该怎么办？
- 3.要求
- 4.Debug 模式怎么来呢？
三、元素定位的 4 种方式及操作
- 1.chrome://inspect，需要 fanqiang。
- 2.使用 driver.page_source 获取 Html 页面。
- 3.找开发人员要源代码文件。
- 4.uc-devtools 不需要 FQ。
- 5.想定位一个元素怎么操作？
四、代码

一、混合应用-H5

微信小程序的前提都是基于 H5，没有 H5 的情况下来操作微信小程序您可能不太明白。H5 是混合应用，有原生应用和混合应用。

1.混合应用是什么？

是在一个里面有 Html 页面，又有原生控件的标签等等。

2.怎么样分辨一个 App 页面究竟是原生的还是 Web 的？

1）在手机/模拟器中点击关于手机中的版本号 5 下，出来开发者选项。

2）在开发者选项中勾选上显示布局边界，再返回到 App 界面。

华为荣耀 p30:设置-系统和更新-开发人员选项-显示布局边界（开启）。

开启显示布局边界，你看到的每一个元素，它都把它框起来了。一个框代表一个原生控件中的一个元素（原生控件中的一个控件或者一个布局）。

整屏能操作的地方都被这样框起来了，证明所有的都是原生控件啊，也就是UiAutomator Viewer可以识别的。

但是，你看这一整块就是一整个框啊。包括立即购买、下载、打开这样的东西都没有。而是作为中间整屏放在一起的。

从图片中可以看出，上面是原生控件，下面是 Html 页面。所以，这个就是混合应用。

3.如果 App 是 Web 的界面，那界面不会有布局边界显示，如有则说明是原生的界面。

有时候，肉眼上的识别不是很信任，那么就打开截屏工具：

如果看到这个地方是个 Web View，那么绝对是个 Html 页面。

UiAutomator Viewer不能识别 Html 页面的。到了这个 Web View 就卡住了。它里面的 Html 是跟它没有关系的。

二、想要操作这个 Html 页面

得像 Web 自动化一样，先在这个界面找到立即购买的链接（也就是整个 Html 页面）找到了之后才能去点击。

1.想通过代码点击立即购买，那 Web 自动化中用到了什么环境啊？

我想驱动网页去做点事，就必须要把环境搭建好才可以。安卓手机的很多 Api 都是谷歌开发的，所以基本上只能用谷歌 Web View 了。也得安装 Chrome driver，得有驱动程序还得跟浏览器版本匹配。
从外面点击进来的时候，外面是一个原生控件，从一个原生控件点击之后，切换到一个 Html 页面中操作，它们俩很显然是不一样的东西。一个是 Html，一个是安卓控件。所以要点击立即购买，还要必须进行切换操作。
现在虽然识别了，但是不知道怎样操作它。

2.写代码点击全程班，进入全程班后该怎么办？

混合应用自动化方案

基于 UiAutomator+Chrome driver

原生控件部分则 Uiautomator，Web View 的部分走 Chrome driver，二者结合。

3.要求：

Android 4.4+
Web View 必须为 Debug 版本。

要从原生控件中切换到手机的 Html 页面中，切换操作的前提是得知道切换的是谁，得知道切换到哪去，所以这里也是一样的。首先必须能够识别到 Web View。

识别到 Web View 的前提是：下载知乎或者豆瓣，去获取所有当前可以操作的上下文，会发现没有 web view。也就是关闭了 Web View 的显示。

Windows 切换必须获取 Windows 的句柄，有才能切换。既然把 Web View 的识别给关闭了，就没办法切换到 Web View 这个元素。

所以这里有个硬性条件，Web View 必须为 Debug 版本。

浏览器除外，浏览器本身就是可以识别的，本质上就是网页性质的访问。手机上的浏览器也是一样的。

4.Debug 模式怎么来呢？

解决方法：

1、App 打包的时候需要开启 Web View 的 Debug 属性setWebContentDebuggingEnabled(true)

这个直接让开发加上就好，再去打包就可以了；（测试阶段让他加上，一般上了应用商城中的，都是把它关闭的）。

2、开启后，有些真机可能依然没有办法获取到 Web View（模拟器的 contexts 中有 Web View，但有些手机没有。）

官方给出的答案是：需要将手机 root，然后再去获取。

目前很多厂商，它的权限设置是不太一样的。有的手机需要 root，有的手机不需要 root。

开启 Web View 可见：

链接：https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews

可以识别 Web View 了，切换进来后就必须做到元素定位了。

三、元素定位的 4 种方式及操作

1.chrome://inspect，需要 fanqiang。

浏览器中输入网址：chrome://inspect/#devices

打开网址后，点击界面中的 inspect，弹出一个界面可以看到完整的 Html 界面，但是大部分同学没有 fq 的权限。所以这种方式搁置。

2.使用 driver.page_source 获取 Html 页面。

driver 有个 page_source 选项，已经切换到 Html 页面，怎么切换的？

已经切换到 Html 页面了，那我们页面源码就是完整的 Html。通过 driver.page_source 得到完整的 Html，然后将它保存在我本地的文件当中，再用浏览器去打开。这样照样可以做元素定位和元素识别。

之前写文件操作了。知道如何获取页面源码，如何获取 Html，你只要将它保存文件即可。

第二种方式有点累赘。

3.找开发人员要源代码文件。

这个呢就要借助开发的帮助，ta 要是不给你，你也没办法哦。

4.Uc-devtools 不需要 FQ。

Uc-devtools 这个工具非常好，它的效果和我们在chrome://inspect/#devices看到的是非常像的。

下载地址：https://dev.ucweb.com/download/?spm=ucplus.11199946.0.0.53974692TtSluZ#DevTool

下载下来安装的时候，直接下一步下一步就好了。

安装完毕后，它是没有桌面标识的，可以在开始-你的应用程序中找到它。

注意：这个工具只识别 Web View，如果手机打开的页面中有 Web View 网页，能识别到的情况下这里才会显示。如果没有 Web View，那这里就什么都不显示。

第一次使用的时候，可能界面显示不全，可以设置成这样：

这个是安卓手机内置的 Web View 版本，也就是安卓手机内置的浏览器版本。Web 自动化要下载浏览器驱动，那我们这个地方并没有操作的是浏览器，操作的是网页。

怎么知道下载哪个驱动呢?

78.0.3904.108 代表浏览器的版本，实际上是手机中内置的 Web View 版本。Web View 就代表了浏览器，不需要您真的安装它。下载个能支持 78.0.3904.108 的谷歌驱动。

只截取了 Web View 的部分，没有截取原生控件的。

只取了 Html 这块：

这里有个完整的 Html 页面在这里。

5.想定位一个元素怎么操作？

跟我们之前使用谷歌 F12 的套路是一样的。

一个手机中除了这个 Web View 网页，可能还有别的 Web View 网页。如果是连续的操作，不需要回退到原生控件中，可以在 Html 当中一直操作下去。Html 页面，以前写 Web 自动化的时候有写过有 iframe 就切换，没有 iframe 就不切换。都是一样的道理。

这是 Web 自动化和 App 自动化混合使用版本。现在能够找到元素也能够识别到 Web View。怎么切换？

四、代码

driver.find_element_by_android_uiautomator(loc).click()

这个步骤之后进入到了全程班的页面，进入全程班的页面也是需要时间的。Web View 这个元素当中放的才是 Html 页面，是不是等到 Html 页面加载出来之后再去获取所有的相关内容这样比较好。

万一切过来的时候，Html 页面还没有去加载就马上获取当前所有可以操作的对象，这样很容易丢失，所以一样要有等待。

首先等到 Web View 这个元素的 class 控件出现。



from appium import webdriver

import time

from selenium.webdriver.support.wait import WebDriverWait

from selenium.webdriver.support import expected_conditions as EC

from appium.webdriver.common.mobileby import MobileBy

desired_caps={}

# 平台类型

desired_caps["platformName"]="Android"

# 平台版本号

desired_caps["platformVersion"]="10"

# 设备名称

desired_caps["deviceName"]="2NSDU20410017297"

# app 包名

desired_caps["appPackage"]="填appPackage"

# app 入口 acitivity

desired_caps["appActivity"]="填appActivity"

# 连接Appium server。前提：appium desktop要启动。有监听端口。

# 将desired_caps发送给appium server。打开app

driver = webdriver.Remote('http://127.0.0.1:4723/wd/hub',desired_caps)

loc='new UiSelector().text("全程班")'

WebDriverWait(driver,20).until(EC.visibility_of_element_located((MobileBy.ANDROID_UIAUTOMATOR,locals())))

driver.find_element_by_android_uiautomator(loc).click()

# 等待Web View元素出现  -Web View里面放的是Html

WebDriverWait(driver,20).until(EC.visibility_of_element_located(MobileBy.CLASS_NAME,'android.webkit.WebView'))

time.sleep(1)#稍微sleep 1秒，确保里面的Html，所有的都能加载完成。

公众号 「清菡软件测试」 首发，更多原创文章：清菡软件测试 96+原创文章，欢迎关注、交流，禁止第三方擅自转载。