爱测未来移动-移动端H5调试与自动化

素颜马尾好姑娘i 2022-06-14 23:24 257阅读 0赞

移动端H5调试

Web调试

下载谷歌浏览器，点击浏览器右上角“三”图标，在下拉选项中选择“更多工具”-“开发者工具”，或者直接按F12；

在弹出的面板中，选择左上角“手机”图标，浏览器内容即可变成模拟手机模式，如图所示；

通过点击模拟手机左上角的图标，还能随意切换iphone手机型号，查看对应型号下页面的展现形式；

![Center][]

远程web调试

在手机端打开web页面，在PC端打开Chrome，输入 chrome://inspect

Chrome会显示可供调试的设备和程序，选择需要调试的程序，点击inspect即可进入调试页面。

![Center 1][]

进入调试页面后就可以进行远程调试了

![Center 2][]

## 远程webview调试 ##

和远程web调试方式一样，但需要在应用程序中启用 WebView 调试。在 WebView 类上调用静态方法 setWebContentsDebuggingEnabled。

if(Build.VERSION.SDK\_INT >= Build.VERSION\_CODES.KITKAT) \{

if(0 != (getApplicationInfo().flags & ApplicationInfo.FLAG\_DEBUGGABLE))

\{WebView.setWebContentsDebuggingEnabled(true); \}

下面以微信公众号为例，首先要开启微信webview的远程调试功能。

1.在任意聊天窗口输入：debugx5.qq.com

2.点击该链接打开设置窗口

3.在“信息“页面中找到”TBS settings“相关选项，选中”是否打开TBS内核Inspector调试功能“

进入公众号，加载任意webview页面，在PC端打开Chrome，输入 chrome://inspect

选择需要调试的微信webview，点击inspect进行调试

![Center 3][]

以下是调试页面

![Center 4][]

## 微信web开发者工具 ##

可使用微信官方发布的web开发者工具进行调试

地址：

http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html\#.E4.B8.8B.E8.BD.BD.E5.9C.B0.E5.9D.80

安装完成后打开工具，扫码登录

![Center 5][]

登录后可使用微信浏览器模拟器进行调试，也可以进行移动调试，移动调试和chrome远程调试一样

![Center 6][]

## Browsersync ##

Browsersync能让浏览器实时、快速响应文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。使用browsersync后，任何一次代码保存，以上的设备都会同时显示改动。

安装

1.  安装Node.js

2.  安装BrowserSync

npm install -g browser-sync

3.  启动BrowserSync

browser-sync start --server --files"css/\*.css"

# 移动端H5自动化 #

## 通过PC端Web浏览器进行自动化 ##

PC端web自动化可使用Selenium框架

以下是示例代码

fromselenium import webdriver

fromselenium.webdriver.common.desired\_capabilities import DesiredCapabilities

caps =DesiredCapabilities.CHROME

driver =webdriver.Chrome(desired\_capabilities=caps)

driver.get('https://www.baidu.com')

printdriver.page\_source

## 通过手机端Web浏览器进行自动化 ##

手机端web自动化可使用appium框架或robotium

设置DesiredCapabilities browserName 属性，在对应的浏览器中进行测试

以下是appium示例代码

class AppiumUsageDemo(unittest.TestCase):

def setUp(self):

desired\_caps = \{\}

desired\_caps\['platformName'\] = 'Android'

desired\_caps\['platformVersion'\] = '6.0.1'

desired\_caps\['deviceName'\] = '10.71.34.101:5555'

desired\_caps\['browserName'\] = 'Chrome'

self.driver = webdriver.Remote('http://localhost:4723/wd/hub',desired\_caps)

def tearDown(self):

self.driver.quit()

def test\_get\_elements(self):

self.driver.get('http://www.baidu.com')

print self.driver.page\_source

可能出现问题：

1.ChromeDriver版本不匹配导致chrome session链接失败

## 通过微信webview进行自动化 ##

微信webview自动化可使用appium框架

首先参考“远程webview调试“章节打开微信的TBS内核调试功能

设置DesiredCapabilities的'appPackage'和'appActivity'属性，用于启动微信

设置'chromeOptions' 属性为 \{'androidProcess':'com.tencent.mm:tools'\} 用于webview切换时能够切换到指定的Process上面

最后在用例中调用

driver.switch\_to.context('WEBVIEW\_com.tencent.mm:appbrand0')

进行webview切换，切换成功后即可进行webview的自动化，自动化方式同web页面。

其中WEBVIEWID需要根据实际情况进行更新，可通过

printdriver.contexts

打印当前所有的ContextID，选择正确的WEBVIEWID进行切换。

以下是示例代码：

class WEIXINTests(unittest.TestCase):

def setUp(self):

desired\_caps = \{\}

desired\_caps\['platformName'\] = 'Android'

desired\_caps\['platformVersion'\] = '6.0.1'

desired\_caps\['deviceName'\] = '10.71.34.101:5555'

desired\_caps\['app'\] = ''

desired\_caps\['appPackage'\] ='com.tencent.mm'

desired\_caps\['appActivity'\] = '.ui.LauncherUI'

desired\_caps\['noSign'\] = 'true'

desired\_caps\['noRest'\] = 'true'

desired\_caps\['fastReset'\] = 'false'

desired\_caps\['fullReset'\] = 'false'

desired\_caps\['unicodeKeyboard'\] = 'True'

desired\_caps\['resetKeyboard'\] = 'True'

desired\_caps\['chromeOptions'\] = \{'androidProcess':'com.tencent.mm:tools'\}

self.driver = webdriver.Remote('http://localhost:4723/wd/hub',desired\_caps)

self.driver.implicitly\_wait(1)

sleep(10)

def test\_weixin\_webview(self):

self.goto\_webview()

print self.driver.contexts

self.driver.switch\_to.context('WEBVIEW\_com.tencent.mm:appbrand0')

sleep(1)

print self.driver.page\_source

self.driver.find\_element\_by\_xpath("//span\[.='语音识别'\]").click()

sleep(8)

可能出现问题：

1.  ChromeDriver版本不匹配，请更新appium的webdriver到对应的版本

公众号：itest\_forever

![Center 7][]

CSDN:http://blog.csdn**.**net/itest\_2016

QQ群：274166295（爱测未来2群）、610934609（爱测未来3群）

[Center]: /images/20220615/4000baede58246ef9de1274368928da3.png
[Center 1]: /images/20220615/703a7e8161b4440f9c5dc7cb6d7fdb8f.png
[Center 2]: /images/20220615/bd20799c48d14010bb062c51846fbac1.png
[Center 3]: /images/20220615/79466f4baff44e0f947af26e36e4521a.png
[Center 4]: /images/20220615/de15ccdf575144bebb171d7dd9e5ecf5.png
[Center 5]: /images/20220615/f321c5c7018349ef88f1855184beb343.png
[Center 6]: /images/20220615/e845f7e1fd1c4a17849216f21d5a9773.png
[Center 7]: /images/20220615/23ecb5724bf449ad9284f07affab811a.png