《移动App测试的22条军规》——第5章,第5.2节WebView的测试

简介:

本节书摘来自异步社区《移动App测试的22条军规》一书中的第5章,第5.2节WebView的测试,作者 黄勇,更多章节内容可以访问云栖社区“异步社区”公众号查看

5.2 WebView的测试
移动App测试的22条军规
对于WebView的显示,除了需要关注它对于横竖屏的影响,还需要关注它在不同设备上的显示。因为不同设备会有不同的屏幕宽度和高度,所以WebView的显示效果通常也是千差万别的。比如显示宽度过宽(如图5.7所示),显示宽度过窄(如图5.8所示),或者显示位置太靠下从而导致页面出现很大的空白(如图5.9所示)等。


2201da475b145c40048f55d21f6e4c5b537fb726


457073701fc0b0d63c53983f8bc64742ca5ef129

如果是具有特定格式的WebView,在不同设备上的显示效果很可能差异更大,例如图5.10所示表格的显示差异。


195eb6a966f4674264e9269a3b8de348120e53ef

在手机App中嵌入的WebView显示样式和在Web上是不一样的

如果在嵌入WebView的页面输入文本,可能会出现更多的问题,如图5.11所示。


7bb40e063e7f6dd53e5023458ef4d0edc2ce83e9

在嵌入的WebView中点击Google搜索栏输入的时候,页面显示会出现问题

通常,开发移动App时想要在App里嵌入WebView,都是基于已经有了产品的Web版本。如果构建移动App的时候能使用已有的功能和资源,会节约开发的成本,降低开发难度。

是的,理论上是这样没错,但是如果在Web端没有做到响应式设计“Responsive Design”(如图5.12所示),在设计Web架构的时候没有考虑到Web端和移动App端功能以及特性的不同,就会造成在桌面端显示正常的Web页面被嵌入移动App之后会出现很多诸如前述的样式显示的问题。


ea9bce39ea6fcc615ff353e81da8f740c19b195d

响应式设计“Responsive Design”的理念是集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局

所以最好不要在移动App中嵌入WebView,而是通过服务器返回信息,由原生代码控制显示的样式,这样可以更好地使用操作系统的特性来避免显示问题。

但是如果想使用WebView的优势,也就是在不改变客户端代码的情况下实现功能和样式的更新时,就要尽量保证在Web端和移动App端都能实现响应式设计(如图5.13所示为iPhone上的App Store从iOS 6升级到iOS 7时的变化)。


804ad8b7ac7993b5129fc84d8ece044456c37f38

App Store使用的就是WebView,所以即使设备没有从iOS 6升级到iOS 7,
也可以体验到新版的App Store

相关文章
|
19天前
|
Java Android开发
Rockchip系列之CAN APP测试应用实现(4)
Rockchip系列之CAN APP测试应用实现(4)
24 1
|
1月前
|
测试技术 UED Python
App自动化测试:高级控件交互技巧
Appium 的 Actions 类支持在移动应用自动化测试中模拟用户手势,如滑动、长按等,增强交互性测试。ActionChains 是 Selenium 的概念,用于网页交互,而 Actions 专注于移动端。在Python中,通过ActionChains和W3C Actions可以定义手势路径,例如在手势解锁场景中,先点击设置,然后定义触点移动路径执行滑动解锁,最后验证解锁后的元素状态。此功能对于确保应用在复杂交互下的稳定性至关重要。
35 5
|
1天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
|
3天前
|
XML 数据格式
Xpath高阶定位技巧,轻松玩转App测试元素定位!
XPath是一种用于XML文档中节点定位的语言,支持逻辑运算符(and、or、not)、轴定位、谓词和内置函数。
13 0
|
23天前
|
XML 数据格式 Python
App测试中,强制等待和隐式等待谁更强?
本文介绍了在自动化脚本中添加等待以确保与应用程序同步的重要性。由于应用响应时间的不确定性,适当等待能防止脚本在操作未完成前继续执行,提高测试稳定性。等待包括强制等待(如`time.sleep()`)、隐式等待(全局设置查找元素的等待时间)和显式等待(根据预期条件等待)。示例代码展示了如何在Python的Appium测试中应用这些等待策略,以优化脚本的可靠性和与应用的同步。
24 0
|
24天前
|
测试技术 Python
App自动化测试中,如何更好地处理弹窗?
在App自动化测试中,处理弹窗异常是保证测试稳定性和可靠性的重要环节。当遇到广告弹窗、升级提示等不定时出现的UI元素时,可以采用黑名单处理方法,如上述Python代码示例,通过尝试点击黑名单中的元素来避免干扰。同时,利用异常处理装饰器可以增强函数功能,保持代码整洁,当异常发生时记录日志、截图并保存页面源代码,便于问题排查。这两种策略能有效提升测试的效率和质量。
8 0
|
2月前
|
XML 测试技术 数据格式
解决 App 自动化测试的常见痛点
在App自动化测试中,常见挑战包括启动加载慢和弹框干扰。为处理弹框,可以创建一个黑名单列表,遍历并点击消除。使用`handleAlertByPageSource()`方法结合`getPageSource()`判断弹框元素在当前页面的存在性,提高效率。对于首页加载延迟,使用显示等待特定元素如`user_profile_container`,但需注意弹框可能阻止元素定位。因此,结合PageSource判断首页元素和弹框,确保加载完成判断的准确性。通过这样的优化,能更有效地处理自动化测试中的中断问题。
25 1
|
2月前
|
测试技术 Android开发 索引
XPath定位如何在App自动化测试中大显神威
本文介绍了如何在Appium中使用XPath进行自动化App测试。通过淘宝App实例,展示了XPath在定位元素上的应用,包括基础定位(如通过text、resource-id、class和content-desc属性),contains模糊定位,组合定位以及层级定位(如父、子、兄弟和祖元素定位)。XPath的灵活性和强大功能使得在Appium中高效地定位元素成为可能,从而提升移动应用的测试效率。
17 0
|
20天前
|
网络协议 安全 测试技术
性能工具之emqtt-bench BenchMark 测试示例
【4月更文挑战第19天】在前面两篇文章中介绍了emqtt-bench工具和MQTT的入门压测,本文示例 emqtt_bench 对 MQTT Broker 做 Beachmark 测试,让大家对 MQTT消息中间 BenchMark 测试有个整体了解,方便平常在压测工作查阅。
114 7
性能工具之emqtt-bench BenchMark 测试示例
|
14天前
|
机器学习/深度学习 数据采集 人工智能
【专栏】AI在软件测试中的应用,如自动执行测试用例、识别缺陷和优化测试设计
【4月更文挑战第27天】本文探讨了AI在软件测试中的应用,如自动执行测试用例、识别缺陷和优化测试设计。AI辅助工具利用机器学习、自然语言处理和图像识别提高效率,但面临数据质量、模型解释性、维护更新及安全性挑战。未来,AI将更注重用户体验,提升透明度,并在保护隐私的同时,通过联邦学习等技术共享知识。AI在软件测试领域的前景广阔,但需解决现有挑战。