问答 h5 兼容性自动化测试如何获取 webview 的白屏时间,首屏加载时间,DOM 树节点?

南山老人i · 2022年08月18日 · 最后由 南山老人i 回复于 2022年09月23日 · 10605 次阅读


问一下大佬们,我在用手机启动 h5 的时候,如何拿到上述图片中的:白屏时间,首屏时间,DOM 树节点等性能指标。
遇到的问题:
1、使用 mitmproxy 抓安卓手机包的只能抓到 requests 请求时间的部分,并无白屏时间首屏时间等数据
2、解析 dom 树的时间,白屏时间,tcp 连接时间有什么好的移动端工具可以抓吗
3、编程语言中对 python 比较熟悉,但是 python 中无解析 dom 树白屏时间的包,求教!
4、有一个 java+js 项目可以获取但是不太熟悉 js 暂时还没有吃透,不懂如何使用(如果有简单的调用 API 最好)
5、tcpdump 无法在 root 过的真机上使用(也有可能是我使用的 tcpdump 不正确,因包不是官网包,有大佬指教也可)
已经参考过的链接:
参考的方案链接:https://testerhome.com/articles/16918
捕捉 dom 树白屏时间的链接:https://github.com/jwcqc/WebViewMonitor

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 6 条回复 时间 点赞

我看你给的参考连接里,第一个社区 360 团队的文章,你上面提到的几个问题,都有很详细的说明了。

对于白屏时间、首屏加载时间这块,大致原理我的理解是:

1、在 webview 启动上加料,让它注入监控相关的 api 调用,获取数据。这个就是 https://github.com/jwcqc/WebViewMonitor 这个项目干的活。
2、解析数据获取到的数据,就可以得到你提到的几个指标了。

然后文章里还提到的 pacap、pacap2har、harviewer 之类的,主要是分析资源请求情况用的(类似浏览器里的 network 标签内容),用于辅助定位为何白屏时间长这类问题。和获取白屏时间本身是不同的东西。

然后你提到编程语言,建议你先不要受制于语言,现在哪个工具比较适合,就去快速上手这个工具,别纠结自己不懂这个语言,非得找自己懂的那个语言的。

补充下,如果你只是要手工拿数据,不需要自动化或者转换为数据记录到独立平台,那直接用 chrome 的 devTools 就好了,有图形化的展示,数据也齐全。

Performance insights 应该可以直接获取到你提的白屏时间等指标:

详细的,你看看 chrome devTools 自己的相关文档研究下吧。

陈恒捷 回复

感谢大佬最后一段话的建议,是我眼界受限了,其实我现在有一种感觉就是明明材料都找齐了但是好像又无法开展工作。听完最后一段话之后觉得,快速上手就好了!无非就是时间问题,感谢感谢。那我继续针对 webviewmonitor 开战研究

继续求助:
步骤:
1、初始化手机、启动 appium 服务
2、打开指定浏览器内核的 WebView(已经打开 debug 模式的套壳 APP、也使用手机 edge 浏览器打开尝试过)
3、访问指定的 url
4、使用 appium 方法 driver.execute_script(js) // 执行 js 代码注入
5、获取性能指标
问题步骤:4
问题描述:在第四步进行 js 注入时,出现报错:selenium.common.exceptions.WebDriverException: Message: Method is not implemented
问题分析:根据报错分析浏览器驱动问题,但是我电脑上驱动没有问题。要么是驱动需要跟手机上套壳 APP 内核/浏览器内核版本对应,要么是手机上浏览器内核驱动需要如何匹配一下
关于 js 注入:
1、编写了 appium 注入 js 代码的一段 python 代码,如下图 1
2、把 collector.js 放到了 tomcat 中并以 http 形式访问,url 也是 http 形式

跟踪进度,先说一下已解决,方案采用的 performance,在 appium 中切换到 webview 然后使用 performance 获取页面性能,具体流程后续补充(如果使用 appium,那不需要 js 注入)

环境需求:Android SDK;appium;python;一个开启了允许 webview 调试的 App;mixmproxy(代理抓包检测 h5 中接口,若不需要可以不要)
实现步骤:
1、启动 appium 服务
2、开启 mixmproxy 抓包、进入 h5 页面
3、使用 appium 切换到 webview 窗口中
4、在 webview 中执行 window.performance.timing 来获取 webview 页面加载性能
输出:
1、获取 webview 性能可以得到:DNS 连接耗时、重定向耗时、TCP 连接耗时、请求耗时、DOM 树加载耗时、白屏耗时、onload 耗时、domready 耗时、总耗时
2、根据 mixmproxy 可以得到:h5 页面中的所有接口情况,如:code、响应时间、资源大小和所有抓包数据

南山老人i 关闭了讨论 11月07日 11:54
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册