背景

前几天接到 H5 开发人员那边的业务开发需求单，说想将 H5 接入到自动化系列中，特此记录分享一下。

环境前置准备

手机与电脑 USB 连接，开启 USB 调试模式，通过 adb devices 可查看到此设备。
电脑端、移动端安装 chrome 浏览器。（尽量保证移动端 chrome 版本低于电脑端）
App webview 开启 debug 模式
在电脑端 Chrome 浏览器地址栏输入chrome://inspect/#devices，进入调试模式：
- 此时页面显示了手机型号、驱动名称、APP 要调试的 WebView 名称
- 点击 inspect，若成功加载与 APP 端相同界面的调试页面，则配置成功
- 若获取不到 WebView 或者调试页面预览框显示空白，则需要进行破解–安装软件（由于默认的 DevTools 使用的是 appspot 服务器,这在国内是需要翻越 GWF）

尝试解决方法：

1、在 windows host 文件中增加：

61.91.161.217  chrome-devtools-frontend.appspot.com
61.91.161.217    chrometophone.appspot.com

2、使用软件，如 Lantern

环境检查

App webview 调试模式检查与开启

基础检查方式
- 打开 app 对应的 h5 页面，在chrome://inspect/#devices地址中，检查是否显示对应的 webview，如没有，则当前未开启调试模式。
- 在自动化代码中，进入到对应的 H5 页面，输出当前 context,如果一直显示为 Natvie，则 webview 未开启。
开启方式
在 app 中配置如下代码（在 WebView 类中调用静态方法 setWebContentsDebuggingEnabled）：
```
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {  
 WebView.setWebContentsDebuggingEnabled(true);
}
```
注：此步骤，一般需要 App 前端开发人员协助增加

浏览效果

chrome://inspect/#devices地址效果图类似如下：

点击 inspect，正常则显示为如下：

代码实现

下述演示 demo，均以微信 App 中的 H5 为例：
微信默认 H5 调试模式处于关闭，可用微信打开聊天窗口，输入debugx5.qq.com, 在弹出内核调试【信息】页面中勾选"是否打开 TBS 内核 Inspector 调试功能" 来打开调试功能。

Python+Appium+WebDriver

__author__ = 'mikezhou'
#coding=utf-8

#appium 微信h5自动化示例
from appium import webdriver
import time

packageName='com.tencent.mm'
appActivity='.ui.LauncherUI'

desired_caps = {}
desired_caps['platformName'] = 'Android'
desired_caps['platformVersion'] = '5.1.1'
desired_caps['deviceName'] = 'K31GLMA660800338'
desired_caps['appPackage'] = packageName
desired_caps['appActivity'] = appActivity
desired_caps['fullReset'] = 'false'
desired_caps['unicodeKeyboard'] = 'True'
desired_caps['resetKeyboard'] = 'True'
desired_caps['fastReset'] = 'false'

desired_caps['chromeOptions']={'androidProcess': 'com.tencent.mm:tools'}   #驱动H5自动化关键之一

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

driver.implicitly_wait(30)
driver.find_element_by_name('我').click()
print driver.contexts
driver.find_element_by_name('相册').click()
driver.find_element_by_xpath("//*[contains(@text,'正在繁星直播')]").click()
print driver.current_context
driver.find_element_by_xpath("//*[contains(@text,'正在繁星直播')]").click()
print driver.current_context
driver.switch_to.context('WEBVIEW_com.tencent.mm:tools')
print driver.current_context
print driver.page_source
driver.find_element_by_xpath('//*[@id="btnRecommend"]/div[1]').click()
driver.switch_to_default_content()
time.sleep(2)
driver.quit()

Python+AppiumLibrary+RobotFramework

注：RF 关键字与用例部分，只提供关键代码，一些前置需要导入的 library，自行添加:

App 启动关键字

Open MobileFx Android App_H5
    [Arguments]    ${remote_url}    ${deviceName}    ${appActivity}    ${appPackage}    ${platformVersion}    ${Process}
    ...    ${app}=${Empty}
    [Documentation]    *启动手机繁星app_H5[Android]*
    ...
    ...    入参顺序：
    ...
    ...    Arguments: 远程服务地址｜设备名称｜待测应用appActivity| 待测应用package包名|平台版本号|webveiw进程名
    ...
    ...    Examples:
    ...
    ...    | Open MobileFx Android App H5 | http://localhost:4723/wd/hub | Android Emulator | .ui.LauncherUI | 'com.tencent.mm | 4.4.2 | com.tencent.mm:tools |


    ${androidProcess}=    Create Dictionary    androidProcess=${Process}
    Open Application    ${remote_url}    alias=fanxingappForAndroid    platformName=Android    deviceName=${deviceName}    automationName=appium    appActivity=${appActivity}
    ...    appPackage=${appPackage}    platformVersion=${platformVersion}    unicodeKeyboard=True    resetKeyboard=True    app=${app}    chromeOptions=${androidProcess}

套件用例区


*** Settings ***
Suite Setup       启动app
Suite Teardown    Close All Applications
Library           AppiumLibrary

*** Variables ***
${appActivity}    .ui.LauncherUI
${appPackage}     com.tencent.mm
${deviceName}     ${get_deviceName}
${platformVersion}    ${get_platform_version}
${remote_url}     ${android_remote_url}
${androidProcess}    com.tencent.mm:tools

*** Test Cases ***
微信分享验证
    [Documentation]    检查首页搜索
    [Tags]    mikezhou    main    online
    [Setup]
    [Timeout]
    Click Element Wait    name=我
    ${contexts}    get_contexts
    ${current_context}    get_current_context
    log    ${contexts}
    log    ${current_context}
    Click Element Wait    name=相册
    ${current_context}    get_current_context
    log    ${current_context}
    Click Element Wait    xpath=//*[contains(@text,'助力鹿晗')]
    ${current_context}    get_current_context
    log    ${current_context}
    Click Element Wait    xpath=//*[contains(@text,'助力鹿晗')]
    ${current_context}    get_current_context
    log    ${current_context}
    Switch To Context    WEBVIEW_com.tencent.mm:tools
    ${current_context}    get_current_context
    log    ${current_context}
    ${page}    Log Source
    log    ${page}
    Page Should Contain Text    鹿晗    timeout=15
    Page Should Contain Text    概念诠释冒险精神
    Click Element Wait    xpath=/html/body/div[1]/div
    sleep    3
    [Teardown]

*** Keywords ***
启动app
    Open MobileFx Android App_H5    ${remote_url}    ${deviceName}    ${appActivity}    ${appPackage}    ${platformVersion}    ${androidProcess}

结束语

感慨最近事事不利，感昌近十几天了都未好转。

↙↙↙阅读原文可查看相关链接，并与作者交流