<font size='9' face='黑体'>目录</font>

[TOC]

扩展连接

https://blog.csdn.net/galen2016/article/details/53534366

一、 移动端的应用

<font size="4">
        在手机移动端，支持3种应用格式：<font color='red'>Native应用</font>、<font color='red'>Web应用</font>以及<font color='red'>Hybird应用</font>。
</font>

1.1 Native应用

<font size="4">
        Native，是安卓手机的原生应用，可以理解为普通的app；
</font>

1.2 Web应用

<font size="4">
        Web应用依托于浏览器展示，也就是我们所说的网页；
</font>

1.3 Hybird应用

<font size="4">
        Hybird应用是介于Native和Web应用之间的应用模式，在Native应用中嵌入web页面实现应用展示界面的个性化定制，也就是在应用中嵌入H5程序，比较常见的有微信小程序等，这些H5页面再移动端通过Webview（<font color='blue'>Android提供的显示网页的系统控件</font>）访问。通过uiautomatorviewer在定位元素时，只有一个UI WebView的界面，无法获取元素细节，如图1.1所示。
</font>

<div align='center'>
<img src='https://i.loli.net/2018/04/14/5ad1a6c123354.png' width='600' height='450' align=center />
</div>

二、 Hybird应用H5元素获取

2.1 思路

<font size="4">
        获取Native应用的嵌入的H5页面的元素，可以通过获取该页面的URL地址，然后在web端利用chrome浏览器，获取该控件的定位语句，即可完成H5页面元素的定位。
</font>

2.2 步骤

2.2.1 识别app中的H5视图

<font size="4">
        识别app中的H5视图，可以打开手机的开发者模式，然后在开发者选项中打开显示布局边界的开关，打开开关之后，app的各个应用的组件的边界就会显示出来。如果是H5界面，可以看到，如下视图（图2.2）
</font>

<div align='center'>
<img src='https://i.loli.net/2018/04/14/5ad1a75349c2a.png' width='300' height='600' align=center />
</div>

<font size="4" color='blue'>
         如果是H5界面，可以看到，如下视图。
</font>

<div align='center'>
<img src='https://i.loli.net/2018/04/14/5ad1a78054eea.png' width='300' height='600' align=center />
</div>

2.2.2 在桌面端的谷歌浏览器中识别这个H5界面

<font size="4">
        对于Hybird中的H5界面，在谷歌浏览器中识别后，点击inspect，可以查看，当前这个H5页面的元素，谷歌浏览器识别app端Hybird应用H5页面的的准备工作如下：

        <font color='blue'>①</font><font color='red' face='楷体'>手机和电脑连接上，打开手机开发者模式，启动USB调试功能；</font>

        <font color='blue'>②</font> <font color='red' face='楷体'>需要开发在打包代码时，开启<font color='blue'>webview的debug属性setWebContentDebuggingEnabled(true)</font>；
</font>

             <font size='4'>但是，对于线上的开发包来说，一般都是把webview的debug属性关闭了的，从线上包，在桌面端，基本无法获取到hybird应用H5页面，但是，我们可以利用第三方工具强制开启webview的debug属性。这里，我使用的第三方工具是<font color='blue'>VirtualXposed</font>，安装这个工具后，需要安装<font color='blue'>WebviewDebugHook</font>这个模块才能正常使用</br>
</font>

             <font size='3' face = '楷体'><font color='red'>需要注意，VirtualXposed是才发布的一个软件，可能有一些bug。</font>VirtualXposed这个模块自带了root环境，可以在非root的环境下运行Xposed，免去了手机root的麻烦，其下载地址如下<font color='blue'>https://github.com/android-hacker/VirtualXposed/releases</font>，WebviewDebugHook的github地址如下<font color='blue'>https://github.com/feix760/WebViewDebugHook</font>。上述两个软件都只需要下载apk包即可（<font color='red'>如果使用Xposed，按安卓版本不同，会有两个版本的Xposed安装，在点击进入WebViewDebugHook的github下载地址后，在帮助文档中，有给适用于较低版本的Xposed的安装地址<font color='blue'>http://repo.xposed.info/module/de.robv.android.xposed.installer</font>，高版本地址在链接中有给出<font color='blue'>http://forum.xda-developers.com/showthread.php?t=3034811</font>。</font>）。需要注意的是，安装了VirtualXposed之后，进入软件后，VirtualXposed，会发现自动安装了Xposed，而在安装软件时，会有两个安装选项，一个是VirtualXposed，一个是安卓系统上，对于上面提到的<font color='red'>WebViewDebugHook模块，以及我们所需要使用的应用，都需要安装到VirtualXposed中</font>。安装好应用后，如下图所示：</br>
</font>

              <font size='3' face = '楷体'><font color='red'>注意：</font> 对于腾讯系的应用（比如<font color='red'>微信</font>，默认使用的是<font color='red'>X5内核</font>），不是谷歌浏览器的内核，在使用Xposed+WebviewDebugHook的情况下(<font color='red'>对于使用开启webview的debug属性的工程包或者VirtualXposed的环境，暂时不知道解决办法</font>)，需要在手机根目录下建立一个debug.conf目录文本内容如下：</br>
</font>

    result_QProxy=false
    result_systemWebviewForceUsed=true
    setting_forceUseSystemWebview=true

<div align='center'>
<img src='https://i.loli.net/2018/04/14/5ad1fc2c1b11d.png' width='350' height='600' align=center />
</div>

        <font color='blue'>③</font> <font color='red' face='楷体'>电脑安装谷歌浏览器，在浏览器中输入<font color='blue'>chorome://inspect/#devices</font>,如下图所示，可以显示对应的H5页面的url地址，但是显示手机客户端的url地址，需要进行一些设置：</font>

             a）电脑需要能翻墙</br>

             b） 如果电脑翻墙后，仍然没有显示对应app的url，需要修改<font color='dark'>C:\Windows\System32\drivers\etc\hosts</font>

                         61.91.161.217 chrome-devtools-frontend.appspot.com

                         61.91.161.217 chrometophone.appspot.com
</font>

<div align='center'>
<img src='https://i.loli.net/2018/04/14/5ad1fe224d6c0.png' alt='利用谷歌浏览器成功获取到手机网页元素截图' width='600' height='300' align=center />
</div>

2.2.3 代码端进入H5视图界面

<font size="4">
        在代码端，进入H5视图之后，才能回H5元素进行操作，进入H5视图需要调用的语句是<font color='red'>driver.switch_to.context(webview视图)</font>，示例代码如下：(<font color='red'>上述代码需要在appium的14版本执行，在appium15版本，VirtualXposed中安装的软件会全部清空</font>)

conf = ConfigParser()
conf.read("app.conf")
desired_caps_right = eval(conf.get("app", "desired_caps_right"))

driver = webdriver.Remote("http://127.0.0.1:4723/wd/hub", desired_caps_right)
time.sleep(5)


def getSize():
    x = driver.get_window_size()['width']
    y = driver.get_window_size()['height']
    return (x, y)

try:
    time.sleep(3)
    winSize = getSize()
    x1 = int(winSize[0] * 0.5)
    y1 = int(winSize[1] * 0.9)
    y2 = int(winSize[1] * 0.1)

    # 不能加时间，加了会有点击操作
    driver.swipe(x1, y1, x1, y2)
    time.sleep(1)
    
    # 找到柠檬班app位置，进入柠檬班app
    app_ele = driver.find_elements_by_id("io.va.exposed:id/icon")[0]
    app_ele.click()
    time.sleep(5)
    
    # 点击进入全程班
    qcb_ele = driver.find_element_by_xpath("//android.widget.TextView[@text=\'全程班\']")
    qcb_ele.click()

    time.sleep(3)
    # 打印contexts
    print(driver.contexts)

except Exception as e:
    print(e)
finally:
    driver.quit()

        contexts打印下图所示(其 <font color='blue' face='楷体'>格式为WEBVIRE_context名称</font>)，该H5页面的context就是最后一项，需要注意的是，获取H5页面的context需要开发辅助进行一些设置，设置方式如下：

        <font color='blue'>①</font><font color='red' face='楷体'>需要开发在打包时，开启webview的debug属性<font color='blue'>setWebContentDebuggingEnabled(true)</font>；（这一步是获取url的必须项）</font>

        <font color='blue'>②</font><font color='red' face='楷体'>如果在手机模拟器中，可以打印该webview界面的context，但是在真机上没有，此时，手机需要root；（如果使用了VirtualXposed,自带root环境，也不需要进行设置）</font>
</font>

图2.4 contexts打印结果

2.2.4 操作H5视图界面元素

<font size="4">
        获取到Hybird应用H5页面的context后，可以通过<font color='red'>driver.switch_to.context("webview名")</font>进入H5页面的context，之后就可以在这个界面，通过web页面的定位方式对H5页面的元素进行操作，由于web页面，针对浏览器不同，会需要不同的驱动程序，非腾讯系应用，使用的是安卓自带的谷歌浏览器解析以及渲染页面的H5元素，所以需要安装一个对应版本的谷歌驱动，将这个chromedriver放在appium安装目录下的<font color='blue'>\node_modules\appium\node_modules\appium-chromedriver\chromedriver\win</font>下。(我的安卓系统内核谷歌浏览器为53版本，对应的驱动为2.23版本，各版本谷歌浏览器对应驱动版本如下：<font color='red' face = '楷体'>https://blog.csdn.net/huilan_same/article/details/51896672</font>)，总结查看手机对应的谷歌浏览器版本有如下方法：

        <font color='blue'>①</font><font color='red' face='楷体'> 在chrome://inspect/#devices中可以查看手机谷歌浏览器的版本；</font>

图2.5 在谷歌浏览器中显示手机谷歌浏览器版本

        <font color='blue'>②</font> （注意：这一操作在实操中并未找到）<font color='red' face='楷体'> 在appium控制台中可以显示当前系统webview的版本（<font color='blue'>搜索Webview version关键字</font>，结果如图2.6所示）；</font>
</font>

<div>
<img src="https://i.loli.net/2018/04/15/5ad2a9044520f.png" width='500' />
</div>

<font size="4">
         <font face='楷体' color='red'>对于腾讯系机遇X5内核的应用，需要哪种驱动，笔者暂时不清楚，但找到一篇相关介绍的文章<font color='blue'>http://fantaxy025025.iteye.com/blog/2379692</font> 。
</font>

三、 appium操作H5元素代码示例

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

# 前期操作，进入H5视图界面
prep_ele = driver.find_element_by_xpath('//android.,widget.TextView[@text=\"全程班\"]')
prep_ele .click()
time.sleep(5)

# 打印H5界面的上下文
contexts = driver.contexts
print(contexts)

# 切换进webview视图
view_context = 'WEBVIEW_com.lemon.lemoonban' #view_context的值由contexts的打印中获取
driver.seitch_to.context(view.context)

# 操作H5页面元素
fav_button_id = 'js-bottom-fav'
driver.find_element_by_id(fav_button_id ).click()

# 切换回默认context
driver.switch_to.context(None)

        <font color='blue' size='4'>实际测试中，并没有点击到WebView中的收藏按钮，由于无法获取到该app开启Webview的debug属性的工程包，猜测是在VirtualXposed环境环境上点击H5元素有问题导致的。</font>

        <font color='blue' size='4'>尝试过使用夜神模拟器，开启root后，安装Xposed，并在Xposed中安装WebViewDebugHook模块模块，但在chrome端并不能获取到对应H5界面的url。</font>