https://zhuanlan.zhihu.com/p/413979228

2017年1月9号微信小程序正式上线，小程序无须安装就能使用，依托微信强大的生态环境，能做到很多 H5 所不能做的事情，因此小程序就如雨后春笋迅速占据了软件开发中的相当份额，但对于小程序如何做测试，依然没有一个完整的测试体系及专门的测试技术，我们可以借助GB-T_37729-2019智能移动终端应用软件（APP）技术要求，来指导、扩展测试的思路，在此将自己小程序测试的一些经验总结出来，希望对测试小伙伴能有帮助。
image.png

一、 小程序的简介

我们先来了解一下小程序，本部分内容借鉴了小程序的官方文档，大家也可以去官网查看[1]。

1、小程序特点

小程序掌门人张小龙在对小程序的定义的时候就进行这样的阐述，总结但不限于如下特点：
image.png

  • 类web，非HTML
  • 即用即走，随手可得（用的时候添加，不用就删除）
  • 拥有离线能力（具备但很多现有的小程序都需要网络）
  • 基于微信跨平台（微信能用，小程序就能用，微信版本的兼容）
  • 媲美原生操作的体验
  • 流量大、容易裂变

  • 功能丰富、清爽裂变

    2、小程序限制

  • 页面层级跳转不能超过 10 层。

  • 用户本地缓存不能超过 10MB。
  • 整个小程序所有分包大小不超过 20M
  • 单个分包/主包大小不能超过 2M，较大的资源需要上传CDN服务器管理。

  • 小程序发布需提交微信审核通过才可发版。

    3、小程序组件

    小程序的官方提供组件、扩展能力、接口、云开发四大部分内容。
    image.png
    接口上设备、网络、性能、媒体、位置、数据、框架、以及一些开放接口（登录、获取信息、转发、支付、订阅、地址、发票、认证等）

    4、小程序的通讯模型

    小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
    小程序采用客户端原生技术与Web技术结合的混合技术（Hybrid）
    小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）
    image.png
    小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

  • view试图层，用于渲染页面结构

  • 逻辑层，逻辑处理、数据请求、接口调用，他们在两个线程中运行
  • View和jscore共同组成了微信小程序页面前端展示和交互

  • Native是微信客户端作为中间件，同服务器端进行交互、通信。

    5、小程序支持的文件

    微信小程序项目文件结构主要包括如下几部分：
    image.png

  • Json主要用于配置文件，主要用于前后端传输、通信的文件

  • Vxml是用于微信小程序的页面展示的作用，也是以标签的形式体现的，只不过功能上要比HTML文件要少
  • Vxss：样式文件，让我们的页面更漂亮、优雅
  • Js文件主要是让，页面动态显示效果更好

其中小程序的文件于H5也有着一些对应关系。
image.png

6、小程序开发的版本分类及区别

小程序并不像服务端那样区别线上和线下版本，而是有开发版、体验版、线上版。

  • 如果只是开发后端逻辑功能，可在三个版本中任意一个进行测试；
  • 如果是开发前端功能则需在相应的开发版/测试版进行测试。

三者具体区别如下：

  • 权限层：前两者需申请开发者和体验者权限才可使用，后者则面向所有用户。
  • 性能层：开发版和体验版自身带有 vConsole 性能面板（回归需关闭此功能），而线上版则木有。
  • 代码层：开发人员可同时在多个开发版上开发互不影响；体验版当前只能有一份代码处于审核中，审核通过后可发布上线，也可直接重新提交审核，覆盖原审核版本；线上版本则为所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。
  • 代码单包大小有限制区别：开发版本不限制包大小；体验者&正式版则限制包大小。

  • 二维码：体验版保持不变，开发版 30min 后失效需重新生成。

    二、小程序测试与app测试的区别

    小程序测试因其自身的特点，与app测试是存在一些区别的。
    image.png

    三、小程序测试流程

    小程序测试的流程与app、pc软件测试的流程基本上没有太多的区别，都可以按照如下的流程展开测试。
    image.png
    但在具体实施的时候，可以注意如下的细节：
    1、测试需求分析
    需要从用户、公司客服、运营、团队及公司领导等各方获取需求，并按照总分总思路进行需求的分析：

  • 先从产品整体定位分析测试对象

  • 再进行功能需求的模块划分，直到可以设计用例的层度
  • 最后设计系统场景

2、测试设计及开发
此处所需要的方法也可以为等价类、边界值、场景法等，测试类型相对也需要考虑更全面一些，如：

  • 功能测试
  • 小程序入口测试
  • 界面UI测试
  • 兼容性测试
  • 易用性测试
  • 自动化测试
  • 性能测试
  • 安全性测试

3、测试执行准备

  • 微信版本号需在与测试版本一致。
  • qa 需申请对应小程序体验者权限&开发者权限。
  • 小程序开发版、体验版、正式版。
  • 小程序 AppID，项目地址&名字。
  • 明确小程序本次测试入口&版本。
  • 安装小程序开发助手，可方便快捷的预览和体验线上版本，体验版本以及开发版本。

4、缺陷管理
这块可以按照我们公司内部使用的缺陷管理系统进行管理即可，无非就是Jria、禅道等。

四、小程序测试

本部分小程序测试的测试点，部分借鉴于GB-T_37729-2019智能移动终端应用软件（APP）技术要求。

1、入口测试

从不同的入口进入小程序，对应的功能也需要进行验证。好友会话除了分享小程序外，可以进行点赞、投票、加速、购物链接分享等，能分享到群聊但不能朋友圈，商品可以分享到朋友圈。
image.png

2、功能测试

在满足使用要求的前提下，应实现用户文档屮描述的所有功能。

  • 所实现的功能应与其文档所描述明示的功能一致
  • 应实现功能内在、外在及与业务直接相关的隐含性需求
  • 所包含的功能应明示给用户，不应包含隐藏功能
  • 终端断网、电话接入等屮断或挂起微信时，小程序不应对终端设备产生破坏性影响如系统崩溃
  • 反复操作使用小程序相关功能后，微信、移动设备不应出现异常现象
  • 在通信信号不稳定、切换网络（2G/3G/WIFI）等的环境下运行小程序时，功能都能正常使用
  • 功能上应可以随时停止或退出操作

  • 终端锁屏、切换微信权限等操作，应不影响小程序功能的正常使用

    3、UI界面测试

    界面上看到的所有元素（包括空文字、控件等）颜色风格是否统一，布局是否合理、美观，符合用户习惯等等，界面测试需要考虑的内容太过繁琐，不建议写具体的用例，也很难实现自动化，主要还是通过对界面测试的理解及经验储备，去检查页面、发现bug即可。

  • 是否易于导航，导航是否直观、导航与页面结构、菜单、连接页面的风格是否一致

  • 横向比较，各控件操作方式统一、页面标签风格是否统一
  • 自适应界面设计，内容根据窗口大小自适应，文字推荐sp比例像素单位
  • 文案字体、字号、格式、规范一致
  • 页面的图片清晰、尺寸一致、配色合理、风格一致
  • 输入框说明文字的内容与系统功能是否一致
  • 小程序界面上文字长度是否加以限制、文字内容是否表意不明
  • 是否有错别字、信息是否为中文显示

  • 是否有敏感性词汇、关键词、敏感性图片，如：涉及版权、专利、隐私等图片

    4、易用性测试

    易用性测试是指用户使用软件时是否感觉，是交互的适应性、功能性和有效性的集中体现。
    image.png
    4.1本地化界面
    应支持屮文用户界面，屮文界面的关键信息不应存在非屮文字符，如选单项、标签和提示信息等。
    4.2可辨识性
    a)单一界面一次不宜载入和展示太多的信息，界面不宜出现模糊、拉伸变形等问题；
    b)界而屮按钮可点击范围应适中，按钮不宜出现点击无反应或报错等问题；
    c)标签应与内容相关联，当切换标签的时候，界而内容应跟着切换；
    d)不宜冇空白或无任何信息内容的界面。
    4.3易学性
    软件界面设计，宜冇引导用户去执行合适的操作，但不宜滥用用户引导功能或误导用户操作。
    4.4易操作性
    a)菜单层次不宜超过三层；
    b)交互流程分支不宜超过四个分支；
    c)功能相关的选项不宜离得太远；
    d)界面功能操作应有主次从属关系；
    e)界面宜支持多点触控功能；
    f)界面应有退出、返回按键或选单。
    4.5用户差错防御性
    用户界面按钮处于不可用状态时，应将按钮设置为灰色，或者删除按钮，避免误导用户。
    4.6用户界面舒适性
    a)宜支持横、竖屏模式自动切换，且能根据终端位置自适应展示竖屏或横屏；
    b)推送的广告占屏不宜超过1/3,不应无法关闭或强制用户观看超过10 s;
    c)宜支持字形大小可调整，界面和字型颜色应协调统一。
    4.7 帮助系统
    a)用户首次使用应有授权说明；
    b)功能使用说明或用户操作手册；
    c)外部消息提醒和消息查看和删除等功能；
    d)当内存或存储空间不足时，提示用户及时清理内存或存储。

    5、兼容性测试

    小程序运行在微信中，看起来是跟操作系统没关系，只要兼容微信即可，但实际上还是有关系的，因为小程序底层调用依赖于具体的操作系统，按照官方文档描述小程序在IOS上是运行在JavaScriptCore中，但在Android上是通过X5JSCore来解析的，因此推荐覆盖Android、IOS主流版本系统。
    image.png

  • 小程序的功能实现依赖小程序基础库，而小程序基础库需要依赖微信客户端本身，因此当我们的小程序使用了某些相对于微信客户端自带的基础库版本较新的API时，就会出现兼容问题；

  • 在新版本的微信客户端更新时，会灰度上线对应的小程序基础库，实现新老版本的兼容；

  • 历史数据与新版本的兼容

    5、性能测试

  • 响应时间

小程序的冷启动响应时间不宜超过3s。
小程序的热启动响应时间不宜超过1s。
小程序在界面切换的过程中，如无特殊要求，帧率应不低于20FPS。
小程序功能性操作的响应时间，如无特殊要求，应小于5 s。
注：用户有明确指标要求的，以用户要求为准。

  • 资源占用
  • 渲染时间
  • 耗电量
  • 白屏时间

  • 帧率

    6、缓存测试

    小程序会有最大10M的本地缓存，缓存的作用是提高程序的流畅度、减少网络请求，节省服务器资源，有时候用户会进行清理缓存的情况，例如切换环境（线上线下互切）、cookie、发版、登陆等，简单粗暴的方法就是将小程序删掉重新进入即可.

  • 同一手机，不同小程序应用，至少在逻辑存储上肯定不是共享缓存，满足应用级别隔离。

  • 同一手机，同一个小程序，不同微信用户扫码使用，经测试，也不共享缓存，目前测试条件下，是用户级别隔离。
  • 同一手机，同一个小程序，同一微信用户两次扫码使用，经测试，是共享缓存。

  • 同一手机，同一个小程序，不同微信用户切换使用（分别扫码两次），经测试，同一个用户共享缓存，不同用户间不共享缓存。

    8、安全性测试

  • 接口测试—传递的数据的安全性

  • 危险账号授权

  • 与小程序的app账号关联

    9、权限测试

    需要检查以下几种情况下微信用户访问的权限：
    1）未授权微信登录小程序
    未授权时，一般使用一些业务功能的时候，都会弹出提醒：先授权再操作对应功能。or在提交数据到后台的时候，会提示补充相关身份信息才能提交成功
    2）已授权微信登录小程序
    授权微信访问小程序，意味着自己的微信账号可被小程序管理方所获取，自动以微信的身份行使业务操作权限，比如咨询、支付、数据查询等
    3）同一微信号在不同手机端登录授权查看数据权限
    同一微信号在不同手机微信端授权登录同一小程序之后，所能查看的数据和操作的权限都应该是同步一致的
    4）重新授权

    五、小程序众测

    在小程序的众测领域，testin和腾讯一直是走在比较前列的，各有各的优势，如果有需要，大家可以对比两个平台进行选型。
    image.png

    1、testin众测

    由资深测试专家团队进行测试用例的设计、执行、bug探索等，覆盖小程序的所有功能、业务流程及行业通用测试点。
    把产品功能转化成实际用户使用场景，进行用例设计及测试，多维度、多场景覆盖产品功能，通过真实还原用户场景，模拟用户行为，深度挖掘产品缺陷，为产品保驾护航。
    image.png

    2、腾讯wetest

    默认测试微信最近三个版本微信容器，主要进行授权登录、异常打点、群分享等典型场景，并可以记录JS Error、Crash、ANR等典型兼容性问题。
    image.png

    六、小程序自动化测试

    小程序是基于腾讯浏览器的x5内核开发，所有在自动化测试上是有别于app测试的。

  • 由于腾讯系QQ、微信等都是基于腾讯自研X5内核，不是google原生webview（其实就是进行了二次定制），实质上也是混合应用的一种，现在很多app产品也开始流行采用X5内核作为其内嵌web浏览服务，所以掌握X5内核混合应用自动化也是app自动化测试工程师必备技能。

  • 夜神等模拟器是intel的X86架构，很多app安装不了，比如微信、qq等（虽然说可以通过安装arm解释器来解决该问题，但是进行X5内核调试的话也会出现问题），建议最好是一台真实的手机来做。
  • X5内核应用自动化方式和普通混合应用有非常多的差异，接下来以微信小程序举例介绍怎么来开展X5内核的自动化

    1、自动化测试流程

    实现小程序的自动化测试，可以借鉴下面的流程完成。
    image.png

    2、自动化测试工具

    由于微信小程序的特点，一些app自动化测试的工具不能直接使用，这里推荐一款Airtest工具，自带录制功能，进行小程序测试非常方便。
    image.png
    后续有时间，单独整理一篇airtest的使用教程，希望对大家有所帮助。

    参考

  1. ^小程序官网文档 https://developers.weixin.qq.com/miniprogram/dev/framework/