微信小程序自动化实践

阅读量:

前言

小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

现在公司有许多产品通过小程序来进行使用与分享,了解微信小程序的测试常识变得必不可少

概述

本文主要介绍一下小程序测试的基础知识,自动化测试相关的实践

1.基础部分包含:小程序测试环境搭建、小程序测试基础、测试注意点

2.自动化测试使用在pytest中以插件的方式封装官方提供的MiniTest

小程序测试环境搭建

微信开发者工具

在进行小程序测试的时候,有时候会有如下的一些需求

  1. 查看小程序在不同机型上的展示
  2. 查看接口请求与响应
  3. 开发修改后快速验证
  4. 查看js的报错
  5. 分析代码质量\性能情况\主包大小...
  6. ...

这时候可以使用「微信开发者工具」

  1. 前往官网进行下载IDE
  2. 联系小程序负责人申请小程序的开发者权限
  3. 打包小程序
  4. 使用微信开发者工具打开小程序打包产物

小程序测试基础知识

渲染层和逻辑层

小程序的渲染层和逻辑层分别由2个线程管理:

  • 渲染层的界面使用了WebView 进行渲染;
  • 逻辑层采用 JsCore 线程运行 JS 脚本。

一个小程序存在多个界面,所以渲染层存在多个 WebView 线程

这两个线程的通信会经由微信客户端( Native )做中转,逻辑层发送网络请求也经由 Native 转发。

小程序不同版本

不同版本的入口

  • 开发版:使用「微信开发者工具」预览,二维码有效期30分钟

体验版:酷家乐小程序平台-对应的小程序-版本管理,二维码固定不变,永久有效

正式版:微信中直接搜索

在使用开发版或者体验版进行测试的时候需要开启调试模式

如果不开启调试会出现

1.无法访问没在小程序后台配置的域名    会提示表现为「获取失败,请检查网络链接」

2.无法查看调试信息

公司内部平台上可以进行环境切换

修改env变量切换线上或线下等环境

启动机制

小程序生命周期

为了保证⼩程序的快速访问和⽤户体验,微信会缓存整个⼩程序,包括⼩程序⽂件、授权数据、登录数据等等。因此⽤⼩程序常碰到缓存问题,例如切换环境(线上线下互切)、发布、登陆等有时候会发⽣数据切换不过来的场景,为了避免⼀些不必要的缓存问题,简单粗暴的⽅法就是,将⼩程序删掉重新进⼊。

  • 冷启动:用户首次打开,或小程序销毁后被用户再次打开,此时小程序需要重新加载启动,即冷启动。
  • 热启动:用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时小程序并未被销毁,只是从后台状态进入前台状态,这个过程就是热启动。

访问外部网页限制和公众号文章限制

很多小程序中会内嵌H5页面

在非正式版的时候可以选择「不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书」来进行测试,但是到了正式版本后需要将外部链接加入到白名单

小程序内关联的文章也是有限制,必须是当前小程序关联的公众号

程序包限制

目前小程序分包大小有以下限制:

  • 整个小程序所有分包大小不超过 20M;
  • 单个分包/主包大小不能超过 2M。

开发者工具中如何查看分包大小

性能数据

在「微信开发者工具」中的调试器中的「Show console drawer」中点击「Task」即可看到实时的性能数据了

Mock数据

有一个获取客户列表的接口:https://beta.kujiale.com/kuaida/intelligent/match/customer/pagelist

现在需要修改它的返回值

准备数据

数据格式为:

{
"data": "",
"statusCode": "",
"header": ""
}

这次mock后让它就返回一个客户的信息

{"c":"0","m":"","d":{"pageIndex":1,"pageSize":20,"rowTotal":1,"pageTotal":1,"data":[{"obsCustomerId":"3FO4K4VYBUKQ","customerName":"听白","customerPhone":"","designNames":null}]},"f":null}

合并一下

{
"data": {"c":"0","m":"","d":{"pageIndex":1,"pageSize":20,"rowTotal":1,"pageTotal":1,"data":[{"obsCustomerId":"3FO4K4VYBUKQ","customerName":"听白","customerPhone":"","designNames":null}]},"f":null},
"statusCode": 200,
"header": ""
}

匹配接口

使用正则的方式匹配的接口为https:\/\/beta.kujiale.com\/kuaida\/intelligent\/match\/customer\/pagelist

测试

刷新一下页面进行测试,查看是否mock成功

修改一下响应的内容

{
"obsCustomerId": "3FO4K4VYBUKQ",
"customerName": "听白1111111111111111111111111111111111111",
"customerPhone": "123",
"designNames": null
}

查看效果

测试注意点

免登录场景

分享出去的⻚⾯,这个链接⼀般是免登录的,需要使⽤完全没有登录过的⼿机或者清理干净缓存再去验证

右上角操作

右上⻆开放出了哪些功能,我们都需要验证⼀边,确保正常。

特别是浮窗切换,前台后台切换的时候,容易出现⻚⾯错乱或者⽩屏的现象

支付功能

  • 微信支付
  • 二维码支付
  • 第三方支付

需要测试各个支付方式都能正常唤起并支付

缓存

⼩程序为了快速流畅的⽤户体验缓存了整个⼩程序,⼏乎每个⻚⾯都会存在⼤量的缓存.

我们需要明确哪些我们需要缓存,哪些⽆需缓存,注意⻚⾯切换或者账号切换时数据的正确性。

入口有效性

  • 可以通过「发现」模块下的「⼩程序」中的搜索框搜索到对应的⼩程序;
  • 可以通过「附近的⼩程序」找到⼩程序;
  • 已打开过的⼩程序,还可以通过微信聊天⻚⾯的下拉框找到⼩程序;
  • 分享链接可正常打开⼩程序;
  • ⼩程序码扫描可正常打开⼩程序;
  • 删除⼩程序后重新发现正常可正常进⼊。

兼容性

操作系统兼容性

不同运行环境下,脚本执行环境以及用于组件渲染的环境是不同的,性能表现也存在差异:

  • 在 iOS、iPadOS 和 Mac OS 上,小程序逻辑层的 JavaScript 代码运行在 JavaScriptCore 中,视图层是由 WKWebView 来渲染的,环境有 iOS 14、iPad OS 14、Mac OS 11.4 等;
  • 在 Android 上,小程序逻辑层的 JavaScript 代码运行在 V8 中,视图层是由基于 Mobile Chromium 内核的微信自研 XWeb 引擎来渲染的;
  • 在 Windows 上,小程序逻辑层 JavaScript 和视图层都是用 Chromium 内核;
  • 在 开发工具上,小程序逻辑层的 JavaScript 代码是运行在 NW.js 中,视图层是由 Chromium Webview 来渲染的。

JavaScriptCore 无法开启 JIT 编译 (Just-In-Time Compiler),同等条件下的运行性能要明显低于其他平台。

机型兼容性

主要是屏幕的适配

微信小程序定义了一个新的尺寸单位 rpx(responsive pixel) 可以适配不同尺寸的屏幕,在页面上定义对象的单位是 rpx 就可以在不同的屏幕上适配。

部分机型会出现边框缺失:小程序1rpx边框不完美解决方案

微信版本兼容性

基础库

为了避免新版本的基础库给线上小程序带来未知的影响,微信客户端都是携带 上一个稳定版 的基础库发布的。

小程序的能力需要微信客户端来支撑,每一个基础库都只能在对应的客户端版本上运行,高版本的基础库无法兼容低版本的微信客户端。

有条件可以切换多个版本的微信来进行测试

交叉事件

  • 与微信的交叉事件:微信视频,语言通话等打断小程序操作
  • 与手机的交叉事件:手机电话,闹钟,文件接收等打断小程序操作

小程序不会阻止交叉事件的发生(不会打不进电话等)

查看小程序会不会出现中断,白屏,卡死,闪退等问题

网络

  1. 测试3G、4G、5G、wifi 网络下应用运行的速度。
  2. 网络不好时,提交数据是否一直处理提交中,是否会有延迟,数据交换失败是否会有提醒。
  3. 有网到无网再到有网环境时,数据是否可以自动恢复,能正常加载。

自动化测试

pytest-mini

https://pypi.org/project/pytest-mini/

该项目基于MiniTest进行pytest改造

在保留原有特性的情况下,可以使用pytest来进行代码编写,提高编写效率

安装

pip install pytest-mini --upgrade

项目结构

页面元素:components_page.py

from pytest_mini import Mini, Locator

class ComponentsPage(Mini):
view_container = Locator('view', inner_text='视图容器', desc='组件页-视图容器')

前置条件:conftest.py

import pytest

from pytest_mini import plugins
from demo.pages import ComponentsPage

pytest_plugins = plugins(
"/Users/zhongxin/github/miniprogram-demo", # 待测试的小程序项目路径
"/Applications/wechatwebdevtools.app/Contents/MacOS/cli" # 微信开发者工具路径
)

@pytest.fixture(scope="session")
def components_page(mini):
yield ComponentsPage(driver=mini.driver)

测试代码:test_home.py

import allure

from pytest_mini import compose

@compose(feature="小程序官方组件展示", story="组件", title='容器视图操作')
def test_view_container(components_page):
with allure.step("点击容器视图"):
components_page.click(components_page.view_container)
assert False, "故意失败,查看报告截图"

demo测试结果

真实项目测试结果

查看网络请求信息

相关文档

微信官方文档-小程序


comments powered by Disqus