小程序录制回放详细教程

这篇具有很好参考价值的文章主要介绍了小程序录制回放详细教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

录制环境

  • 微信开发者工具
    新版开发板 Nightly Build 下载链接
  • 云测插件
    详情参考 安装云测插件

1. 开始录制

小程序录屏功能,微信小程序云测,小程序,前端,javascript

点击开始录制

添加用例信息

  • 用例名:可以自定义用例名;
  • mock:可以提供request和云函数的mock,勾选默认,可以看到所有能mock的接口,在mock后,回放的时候如果在当前操作前匹配到会使用录制的数据,而且仅匹配一次;
  • 最长等待时间:录制时两个步骤之间的最长等待时间;
  • 忽略选择器:录制过程会录下来操作元素的所有选择器写法,默认使用className,但是有一些className是随机生成的,可以配置正则表达式忽略这些值是随机的className,有助于提高稳定性;
  • 清除缓存:由于录制和回放的环境会有不一致的情况,比如录制的case是在登录的情况下执行的,但是回放的时候没有登录,可能进不到测试页面导致测试失败,建议录制的case选择全部清除,可以保持录制和回放的环境一致,提高成功率;
  • 聚合touch:是指聚合touch事件为tap事件,默认勾选上。

注意: 如果用例回放需要在云测真机上进行,需要选择虚拟帐号进行录制,点击头像进行切换即可,为了确保回放环境和录制环境一致,录制的时候需要勾选清除缓存操作

2. 录制操作

目前普通的操作都支持录制

2.1 tap事件

小程序录屏功能,微信小程序云测,小程序,前端,javascript

比如点击视图容器,记录为tap事件,右边的点击事件详情,可以编辑修改

点击事件信息

  • 等待时间: 回放会等待指定的时间
  • 页面路径: 回放首先判断当前操作的页面路径是否符合预期
  • 层级: 表示是webview还是原生操作
  • 目标对象: 需要操作的元素,这里点击有下拉框可以修改成录制的其他写法,也可以手动修改target
  • text: 记录该元素的text
  • 查找方式: 下拉可以选择其他匹配模式,目前有目标对象/全局文字匹配/全局文字模糊匹配三种方式,如果当前的文案是不会发生变化的,担心因为页面层级发生变化而导致元素查找失败,可以尝试使用按文字来查找
  • 操作类型: 记录的操作
  • 回放时忽略失败: 勾选上则表示如果这个步骤失败了,不会报出来,会继续执行

注意: 在回放的时候,如果这个操作的下一步发生了页面变化,会等待页面path的变化是否符合预期,而且等待新页面在指定时间内没有异步请求了,表示页面加载完成了。

2.2 scroll事件
1. 目标对象为/,表示在当前page下滑动

小程序录屏功能,微信小程序云测,小程序,前端,javascript

2.如果有具体的目标对象,则表示在指定的区域内滑动

小程序录屏功能,微信小程序云测,小程序,前端,javascript

因为scroll事件会录制的比较多,会有一些误操作。比如页面在跳转中,但是多录制了一个scroll操作,但是这个scroll的下一步操作path发生了变化,其实这个变化不是scroll带来的,回放的时候会自动忽略这个检查。

2.3 input事件

input有两种情况:

  • 普通输入
  • 输入后带回车键
    会触发confirm事件,带回车键的情况会自动录制下来,注意新版的工具修复了这个问题,如果没有录到confirm事件,可以检查版本

小程序录屏功能,微信小程序云测,小程序,前端,javascript

2.4 longpress事件

长按事件

2.5 trigger事件

如果没有匹配到以上事件,会统一用trigger来触发

2.6 picker组件事件

会录制到hidepicker的时候触发的 change 事件,记录 change 事件的参数,回放的时候,minitest用 trigger 事件来触发,传入记录的参数。

如果有不生效的情况,可以先看有没有录制到hiderPicker View事件,其次可以看看 change 的传参是否为录制的数据。

2.6 原生操作

由于工具上能录制的原生操作有限,目前支持的原生操作有:

  • 返回主页
  • 返回上一页
  • 弹框点确定
  • 弹框点取消
  • 授权弹框确定
  • 授权弹框取消
  • 支付弹框关闭
  • 分享弹框取消
  • 分享弹框确定

注意: 真机回放的时候如果跳转到原生页,框架会失败,不建议录制跳转到原生页的操作,比如地址设置/分享出去等操作。

3.断言

小程序录屏功能,微信小程序云测,小程序,前端,javascript

目前有5种情况

3.1 Data快照

会记录当前的小程序的data值

小程序录屏功能,微信小程序云测,小程序,前端,javascript

校验模式分为全匹配和指定key校验,如果选择了指定的key,那么校验的粒度可以细化到指定的key值。

小程序录屏功能,微信小程序云测,小程序,前端,javascript

3.2 Wxml快照

会记录当前页面的wxml,进行完全匹配

小程序录屏功能,微信小程序云测,小程序,前端,javascript

3.3 检查页面元素

小程序录屏功能,微信小程序云测,小程序,前端,javascript

记录了页面元素的target和文本,校验模式有4种:

  • assertVisible:那么只会校验当前target是否存在
  • assertText:先校验target,而且当前target的text是否匹配
  • 全局文字完全匹配:校验回放中否有节点的text能完全匹配录制的text匹配
  • 全局文字模糊匹配:校验回放中否有节点的text能包含录制的text匹配
3.4 检查页面路径

小程序录屏功能,微信小程序云测,小程序,前端,javascript

校验录制的path,对于query,有3种校验模式:

  • 指定key校验,需要手动选择要校验的key
  • 不校验
  • 全匹配校验
3.5 截屏

小程序录屏功能,微信小程序云测,小程序,前端,javascript

截屏会截取当前的屏幕,在真机回放的时候只会截屏,不会对比,因为真机回放,不指定机型,容易对比失败

3.6 修改target

小程序录屏功能,微信小程序云测,小程序,前端,javascript

由于录制的case,在小程序几轮更新后,页面结构发生变化,如果重新录制,会导致工作繁琐,现在提供编辑功能

小程序录屏功能,微信小程序云测,小程序,前端,javascript

如果选择应用到全局用例,那么会遍历全部case,查找path相同,且target相同的步骤,同步修改target值。也可以应用到当前用例

小程序录屏功能,微信小程序云测,小程序,前端,javascript

target输入框,可以输入,也可以下拉选择,下拉会选择录制当前target的所有查找元素的方式可以选择。

4. 模块化管理

4.1普通模块插入

对于一些操作,多个case都有的部分,可以抽出来做基础模块来管理,可以避免重复的录制操作,比如登录操作,大部分case都需要在有登录的情况下进行,那么每个case都从头录制,会很繁琐。如果能抽出成公共模块部分,可以方便很多。

小程序录屏功能,微信小程序云测,小程序,前端,javascript

入口:点击 用例栏右侧icon,点击录制基础模块,可以录制你需要的公共部分,录制的所有的case都会进入到基础模块目录里。

小程序录屏功能,微信小程序云测,小程序,前端,javascript

基础模块的case,有一个选项为公共变量,这里可以定义要使用的公共变量,类似函数的参数,这里可以对公共变量进行增删改操作,比如这个case定义了一个叫message的公共变量,那么这个变量怎么使用呢?

小程序录屏功能,微信小程序云测,小程序,前端,javascript

对于case的target和text,点击输入框,会出现下拉框,可以选择定义的公共变量,用来占位。那怎么使用这个case,以及这个case的公共变量的值怎么填入呢?

小程序录屏功能,微信小程序云测,小程序,前端,javascript

可以进入到要使用这个基础模块case的地方,比如我们想在第一行的位置插入基础模块的case,点击右侧 + ,会出现一个弹框,可以选择添加位置,在当前操作之前还是之后,以及选择基础模块的case,如果当前的基础模块的case设置了公共变量,这里需要把公共变量的值填进去,就好比实现了一次函数调用,填入了调用值。

小程序录屏功能,微信小程序云测,小程序,前端,javascript

插入后,可以设置是否忽略,如果设置为忽略,会批量忽略该基础模块case的所有步骤,同时可以修改公共变量的值

4.2 配置登录模块

小程序录屏功能,微信小程序云测,小程序,前端,javascript

小程序录屏功能,微信小程序云测,小程序,前端,javascript

由于大部分小程序需要登录才能进入到测试页面,而登录是一个适用于大部分case的前置操作,这里提供了一个全局配置登录模块的快捷操作,可以配置当前case,也可以配置全局的case,只在minitest云测平台的回放中生效,因为工具侧回放,在当前窗口是有缓存的,回放不需要重新登录,而在云测平台回放,需要重新拉起小程序,是全新的环境。

配置操作和插入公共模块的流程一致,只能插入一个公共模块的case,可以选择应用全局或者当前用例,配置成功后,该公共模块的每个步骤都会设置为可忽略,即使失败不影响后续进行。
配置后,如果不想使用,可以删除,同样可以全局或者当前case删除。

5.云测平台真机回放

5.1同步用例

小程序录屏功能,微信小程序云测,小程序,前端,javascript

点击同步用例,可以将工具插件录制的用例导入到云测平台。工具侧录制的case会相应地转化为minium的case,右侧可以看到py脚本,可以配合minium的本地运行环境进行调试。

5.2 minitest回放逻辑

用例导入到云测平台后,会转化为minitest的py脚本。
1. 首先进入到测试的起始页面,这里是通过minium的relaunch接口拉起小程序,因为云测只支持虚拟帐号,这样可以保证录制和回放使用同样的帐号数据,不会因为帐号不同而数据信息不一致而失败。

2. 接着,开始顺序执行录制的操作,对于普通的小程序操作来说,每一步会等待录制的时间间隔,同时会等待页面加载完成(这里通过判断页面的异步请求只有2个的情况下判断页面加载完成,默认超时时间为20s),

3. 然后开始查找元素,如果是通过target查找,如果target是普通的选择器,会加多层兜底,先查找指定target,如果找不到,会用xpath兜底查一次,如果还是找不到,会用录制的text(text不为空,且没有换行符),再进行全局完全匹配查找一次,找到元素后,会执行指定操作。

4. 执行完成后,如果发生了path变化,会判断跳页是否成功,完成成功后,才判定这个操作执行成功,才能往下执行,否则会报错退出。如果指定这个操作失败后忽略,那么即使执行失败也不会报出来,会继续执行。

断言操作,会根据录制的断言类型进行,失败则退出。

5.3 真机回放报告
  • 真机回放可以看到每一个操作的结果详情

小程序录屏功能,微信小程序云测,小程序,前端,javascript

  • 每一个步骤有执行前的截图,以及录制的详情

小程序录屏功能,微信小程序云测,小程序,前端,javascript

如果执行失败,那么会有执行前后的截图,以及错误详情。如果查找不到元素,可以下载wxml文件,将其拖动到开发者工具里面,点击右键格式化,检查当前的页面结构是否与录制的时候保持一致,如果不一致,可能小程序版本发生了变化,可以重新录制。

小程序录屏功能,微信小程序云测,小程序,前端,javascript

6.常见问题分析

6.1录制没有清缓存,导致回放时进入到登录页面,不能顺利进入测试页面

小程序录屏功能,微信小程序云测,小程序,前端,javascript

比如上面回放的case,进入测试页面后,点击进入了登录授权界面,导致校验页面跳转和预期不一致而失败
建议: 可以将登陆这种通用模块录制为基础用例,在每一个case之前插入登陆,可以避免重复录制带来的繁琐。

6.2 地理位置不一致导致回放和录制页面拉取的内容不一致

小程序录屏功能,微信小程序云测,小程序,前端,javascript

上图示例,回放定位的位置拉取的数据只有一条,而录制的数据时点击的是第九条数据,后台返回不一致会导致失败。
建议: 可以通过mock后台请求来,确保回放返回的数据和录制的数据保持一致,具体做法是,录制的时候打开mock开关。

小程序录屏功能,微信小程序云测,小程序,前端,javascript

或者 打开云测--项目管理–虚拟帐号配置 功能,mock住地理位置,或者其他会影响数据的信息,可以使用这种方式来mock。

6.3 回放多了弹框

小程序录屏功能,微信小程序云测,小程序,前端,javascript

上图在点击过程中多了蓝牙授权弹框,导致页面没有跳转而失败。

对于原生的系统弹框,可以在云测启动回放的时候,配置 Auto Authorize 开关,可以自动点确认,对于一些没有录到的系统弹框可以自动解决掉。

如果是业务的弹框,需要自己处理。

6.4 查找不到元素

这类错误很普遍,即使云测的回放逻辑对查找元素做了多层兜底。这里需要使用者将错误的wxml文件下载下来,拖动到开发者工具,点击右键格式化来手动确认该元素是否存在

对于小程序迭代比较快,页面结构变化就会导致xpath查找失败,可以检查录制的版本和回放的小程序版本是否一致,也可以建议开发增加id或者class等可以唯一查找到元素的标识,这样可以增加case的稳定性。文章来源地址https://www.toymoban.com/news/detail-599294.html

需要帮助

到了这里,关于小程序录制回放详细教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包