App open mixing H5 debugging

background

With the improvement of hardware performance of mobile end devices now, now web page experience gradually become acceptable, Hybrid development model now used in many applications, the use of one hand, there is the advantage of native device API's (performance, user experience is good), on the other hand takes advantage of web development (cross-platform, low development costs). Such as micro letter, QQ, 58 city, the US group, iQIYI etc. Hybrid model developed applications are used.

Hybrid applications automate how to do it?

Hybrid is a native nested web, for native page, we can use native automation framework UIAutomator / XCUITest, and for web pages, we can use ChromeDriver, a combination of both to complete the automated testing. Now popular argument is that the mobile terminal can be called embedded web H5, H5 although strictly speaking is not the same web. In order to automate H5 page, where debugging H5 pages we have to open, or by inspector element detection tool is positioned less than a page element information.

There is source code of the application

For App-house development team, we can develop direct to add the following code in the source code, then recompile hit a debug package

if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) {
    WebView.setWebContentsDebuggingEnabled(true);
}

No application source code

No source for applications, such as third party online App. This is split into two cases, one of: App using native Webview system, such as the city 58, the App class lemon, Second: App is customized through the use of Webview, such as micro-channel, QQ Tencent-based applications using a customized through the X5 kernel.

Webview native application (root state)

Preparation Tool

  • Xposed APK package
  • WebviewDebugHook APK包

This method requires advance the phone root, root as to how you can search for solutions in the corresponding models of the forum, each phone is different schemes. If a simulator, simulators are generally support the root, as night God:

Xposed system mounted to the frame, the frame activation Xposed

WebviewDebugHook installed into the system, the selection module check in Xposed

To 58 city, for example, to be opened after the H5 page, you can click on the current page information inspect detected H5

Webview native applications (non-root state)

Preparation Tool

  • VirtualXposed APK package
  • Xposed APK package
  • WebviewDebugHook APK包

安装VirtualXposed到系统中,此应用的工作原理类似于应用分身功能,会将应用安装到一个独立的环境当中。

将要调试的应用、WebviewDebugHook、Xposed 安装到VirtualXposed中,勾选模块管理->WebviewDebugHook

在VirtualXposed中打开58同城

X5内核应用(微信、QQ)

针对微信版本在7.0以下,可以只需要在任意聊天窗口输入debugx5.qq.com即可打开

针对微信版本在7.0+,微信有对H5开关做了调整,需要在聊天窗口输入如下:

进入到搜一搜->搜索微信小程序->进入到小程序中,即可识别到到URL:

======================================== PS ========================================

请大家支持原创,尊重原创,如要转载,请注明出处:“转载自:https://www.cnblogs.com/yyoba”,谢谢!!有任何疑问,欢迎大家留言区艾特我。

背景

随着现在移动端设备的硬件性能的提高,现在web页面的体验逐渐变得可以接受,现在很多的应用都采用的Hybrid开发模式,一方面有利用了原生设备的API的优势(性能好、用户体验好),另一方面利用了web开发的优势(跨平台,开发成本低)。比如微信、QQ、58同城、美团、爱奇艺等等应用都是采用的Hybrid开发模式。

Hybrid应用如何去做自动化呢?

Hybrid是native嵌套了web,对于native页面,我们可以采用原生的自动化框架UIAutomator/XCUITest,而对于web页面,我们可以采用ChromeDriver,两者相结合完成自动化测试。现在流行的说法是移动端内嵌的web可以称为H5,虽然严格意义上来说H5不等同web。为了实现H5页面的自动化,其中H5页面的调试开关我们是必须要打开,否则通过inspector元素探测工具是定位不到页面的元素信息。

有源码的应用

针对公司内部团队开发的App,我们可以要开发直接在源代码中加上如下的代码,然后重新编译打一个debug包

if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) {
    WebView.setWebContentsDebuggingEnabled(true);
}

无源码的应用

对于无源码的应用,如第三方线上App。这里分成两种情况,其一:App使用的是系统原生webview,如58同城、柠檬班App,其二:App使用的是经过定制过的webview,如微信、QQ腾讯系应用使用的是定制过的X5内核。

原生webview应用(root状态)

准备工具

  • Xposed APK包
  • WebviewDebugHook APK包

此种方法需要提前对手机进行root,至于如何root可以在对应的机型论坛搜索解决方案,每家手机的方案都不同。如果是模拟器,一般模拟器都是支持root的,如夜神:

安装xposed框架到系统中,激活Xposed框架

安装WebviewDebugHook到系统中,在Xposed中选择模块勾选

以58同城举例,打开之后进行到H5页面,即可点击inspect探测到当前H5页面信息

原生webview应用(非root状态)

准备工具

  • VirtualXposed APK包
  • Xposed APK包
  • WebviewDebugHook APK包

安装VirtualXposed到系统中,此应用的工作原理类似于应用分身功能,会将应用安装到一个独立的环境当中。

将要调试的应用、WebviewDebugHook、Xposed 安装到VirtualXposed中,勾选模块管理->WebviewDebugHook

在VirtualXposed中打开58同城

X5内核应用(微信、QQ)

针对微信版本在7.0以下,可以只需要在任意聊天窗口输入debugx5.qq.com即可打开

针对微信版本在7.0+,微信有对H5开关做了调整,需要在聊天窗口输入如下:

进入到搜一搜->搜索微信小程序->进入到小程序中,即可识别到到URL:

Guess you like

Origin www.cnblogs.com/wolf-eye/p/12154491.html