微信小程序自动化测试最佳实践（附 Python 源码）

杰力發表於 2020-8-17 15:20:00

微信小程序自动化测试最佳实践（附 Python 源码）

<blockquote>
本文为霍格沃兹测试学院测试大咖公开课《微信小程序自动化测试》图文整理精华版。
</blockquote>
随着微信小程序的功能和生态日益完善，很多公司的产品业务形态逐渐从 App 延升到微信小程序、微信公众号等。小程序项目页面越来越多，业务逻辑也越来越复杂，全手工测试已无法满足快速增长的业务需求。
然而，由于小程序本身的一些特性，导致业界目前缺乏成熟完善的解决方案，总会出现各种问题（包括腾讯微信官方提供的自动化工具）。如何做好小程序的自动化测试就成为测试同学当下普遍面临的一个痛点难题。
本节课就主要分享下微信小程序自动化测试的一些最佳实践心得，包括微信小程序的基本测试技术和操作方法，以及如何利用 Appium 的 WebView 测试技术 + adb proxy 完成微信小程序的自动化测试（可能是目前最实用的小程序自动化测试技术），并附上 Python 版源码。
<h3>小程序运行环境</h3>
<img src="https://img-blog.csdnimg.cn/20200817150223313.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjYzNTA5MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="" width="566" height="316" style="display: block; margin-left: auto; margin-right: auto">
平台差异：尽管各运行环境是十分相似的，但是还是有些许区别：
JavaScript 语法和 API 支持不一致：语法上开发者可以通过开启 ES6 转 ES5 的功能来规避（详情）；此外，小程序基础库内置了必要的Polyfill，来弥补API的差异。
WXSS 渲染表现不一致：尽管可以通过开启样式补全来规避大部分的问题，还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。
<h3>微信小程序技术架构</h3>
<ul>
<li>微信小程序技术架构如下图所示： <img src="https://img-blog.csdnimg.cn/20200817150253719.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjYzNTA5MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="" width="683" height="384" style="display: block; margin-left: auto; margin-right: auto"></li>

</ul>
<h3>使用 Chrome 调试小程序</h3>
<ul>
<li>用 Chrome 浏览器提供的 inspect 分析工具，在浏览器中输入如下地址：</li>

</ul>
<pre class="prettyprint"><code class="has-numbering">chrome://inspect/#devices
</code></pre>
<ul class="pre-numbering">
<li>1</li>
</ul>
<ul>
<li>
使用 Chrome 浏览器查看手机上打开的 WebView 进程与基本信息： <img src="https://img-blog.csdnimg.cn/20200817150338803.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjYzNTA5MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="" width="739" height="501" style="display: block; margin-left: auto; margin-right: auto">

</li>
<li>
可以使用 chrome inspect 分析微信小程序的控件结构与布局： <img src="https://img-blog.csdnimg.cn/20200817150351248.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjYzNTA5MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="" width="747" height="339" style="display: block; margin-left: auto; margin-right: auto">

</li>
<li>
使用 console 执行自己的 JavaScript 代码： <img src="https://img-blog.csdnimg.cn/20200817150402428.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjYzNTA5MQ==,size_10,color_FFFFFF,t_70#pic_center" alt="" width="300" style="display: block; margin-left: auto; margin-right: auto">

</li>

</ul>
<h3>小程序的性能测试</h3>
<ul>
<li>这里附一张小程序性能测试图： <img src="https://img-blog.csdnimg.cn/20200817150836530.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjYzNTA5MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="" style="display: block; margin-left: auto; margin-right: auto"></li>

</ul>
<h3>微信小程序的自动化测试<img src="https://img-blog.csdnimg.cn/20200817150859478.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjYzNTA5MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="" style="display: block; margin-left: auto; margin-right: auto"></h3>
<ul>
<li>微信小程序自动化测试的关键步骤</li>

</ul>
<ol>
<li>Native 原生自动化方式。</li>

</ol>
<ul>
<li>使用 Appium 即可完成，缺点就是控件定位不够准确，无法深入小程序内部；</li>

</ul>
<ol start="2">
<li>Webview 自动化方式：可以获取更多小程序内部质量数据。</li>

</ol>
<ul>
<li>设置 chromedriver 正确版本</li>
<li>设置 chrome option 传递给 chromedriver</li>
<li>使用 adb proxy 解决 fix chromedriver 的 bug</li>

</ul>
为什么仍然有很多人搞不定？
<ul>
<li>低版本的 chromedriver 在高版本的手机上有 bug</li>
<li>chromedriver 与微信定制的 chrome 内核对接实现上有问题</li>

</ul>
解决方案：如何 fix it？
<ul>
<li>chromedriver 没有使用 adb 命令，而是使用了 adb 协议</li>
<li>参考课程中提到的 adb proxy 源代码</li>

</ul>
<h3>源码-微信小程序自动化测试 Python 版代码示例</h3>
<div class="cnblogs_code">
<pre>class TestWXMicroWebView:
# 为了演示方便，未使用page object模式
def setup(self):
 caps = {}
 caps["platformName"] = "android"
 caps["deviceName"] = "测试人社区 ceshiren.com"
 caps["appPackage"] = "com.tencent.mm"
 caps["appActivity"] = "com.tencent.mm.ui.LauncherUI"
 caps["noReset"] = True
 caps['unicodeKeyboard'] = True
 caps['resetKeyboard'] = True

 caps['chromedriverExecutable'] = \
 '/Users/seveniruby/projects/chromedriver/chromedrivers/chromedriver_78.0.3904.11'

 # options = ChromeOptions()
 # options.add_experimental_option('androidProcess', 'com.tencent.mm:appbrand0')
 caps['chromeOptions'] = {
 'androidProcess': 'com.tencent.mm:appbrand0'
 }

 caps['adbPort'] = 5038

 self.driver = webdriver.Remote("http://localhost:4723/wd/hub", caps)
 self.driver.implicitly_wait(30)

 self.driver.find_element(By.XPATH, "//*[@text='通讯录']")
 self.driver.implicitly_wait(10)

 self.enter_micro_program()
 print(self.driver.contexts)

def enter_micro_program(self):
 # 原生自动化测试
 size = self.driver.get_window_size()
 self.driver.swipe(size['width'] * 0.5, size['height'] * 0.4, size['width'] * 0.5, size['height'] * 0.9)
 self.driver.find_element(By.CLASS_NAME, 'android.widget.EditText').click()
 self.driver.find_element(By.XPATH, "//*[@text='取消']")
 self.driver.find_element(By.CLASS_NAME, "android.widget.EditText").send_keys("雪球")
 self.driver.find_element(By.CLASS_NAME, 'android.widget.Button')
 self.driver.find_element(By.CLASS_NAME, 'android.widget.Button').click()
 self.driver.find_element(By.XPATH, "//*[@text='自选']")

def find_top_window(self):
 for window in self.driver.window_handles:
 print(window)
 if ":VISIBLE" in self.driver.title:
 print(self.driver.title)
 else:
 self.driver.switch_to.window(window)

def test_search_webview(self):
 # 进入webview
 self.driver.switch_to.context('WEBVIEW_xweb')
 self.driver.implicitly_wait(10)
 self.find_top_window()

 # css定位
 self.driver.find_element(By.CSS_SELECTOR, "").click()
 # 等待新窗口
 WebDriverWait(self.driver, 30).until(lambda x: len(self.driver.window_handles) > 2)
 self.find_top_window()
 self.driver.find_element(By.CSS_SELECTOR, "._input").click()
 # 输入
 self.driver.switch_to.context("NATIVE_APP")
 ActionChains(self.driver).send_keys("alibaba").perform()
 # 点击
 self.driver.switch_to.context('WEBVIEW_xweb')
 self.driver.find_element(By.CSS_SELECTOR, ".stock__item")
 self.driver.find_element(By.CSS_SELECTOR, ".stock__item").click()</pre>
</div>
 
<h3>小程序自动化测试需要跨过的几个坎</h3>
<ul>
<li>WebView 开关 /x5 内核调试开关</li>
<li>ChromeOption 选项需要填写</li>
<li>WebView 版本和 ChromeDriver 版本对应问题</li>
<li>低版本 ChromeDriver 需要修复 ps 命令的 bug</li>
<li>Context API 有一定的延迟需要等待</li>
</ul>
以上，更多内容（ChromeDriver 的资料与 WebView 自动化关键代码，Appium 配置，mapping.json，常见错误等），请点击下方链接入群获取。
<h4>免费领取：接口测试+性能测试+自动化测试+测试开发+测试用例+简历模板+测试文档</h4> 
来源：https://www.cnblogs.com/hogwarts/p/13517781.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序自动化测试最佳实践（附 Python 源码）