杭州软件测试高级工程师培训

小程序自动化测试总结 - 51Testing软件测试网

小程序自动化测试总结

发表于：2019-7-04 10:30  作者：IMWeb   来源：IMWeb社区

APP测试 自动化测试 　　一、缘起-为什么要进行小程序自动化测试　　微信小程序生态日益完善，很多小程序项目页面越来越多，结构越来越复杂，业务逻辑也更加多样。以腾讯课堂小程序为例，目前腾讯课堂小程序部分页面结构和不同业务场景下的表现如下图所示：　　可以看到在核心功能上主要页面对于不同业务场景有众多不同的表现，因此在开发与发布的过程中需要手动验证大量测试用例以保证小程序按预期表现运行，善于利用工具的程序员当然会想：　　这种重复的工作能不能交给程序自动进行呢？　　web开发中对于这类测试问题已经有了很多自动化解决方案比如Selenium、Puppeteer，思路大体相同，都是让浏览器按照指定顺序自动在页面上完成点击、输入等操作，再将操作后的页面表现与想要得到的结果进行比较得到测试结论（断言）。那小程序中有没有一种方案能够按照这种思路实现自动化操作并提供页面信息用于断言呢？为了微信底层安全考虑，小程序环境一直比较封闭，留给开发者操作的余地很小，自动化操作基本无法实现，但5月底出现了miniprogram-automator工具，给了小程序开发者希望。　　二、缘遇-初试miniprogram-automator　　基于miniprogram-automator的文档描述简单总结一下，当通过命令打开开发版微信开发者工具的自动化接口并连接自动化接口后，此工具可提供以下能力：　　MiniProgram：获取小程序信息（页面堆栈、系统信息、页面内容），控制小程序（跳转页面、切换tab、调用方法）　　Page：获取页面信息（路径、元素、数据、结构），控制页面（设置渲染数据、调用方法）　　Element：获取元素信息（属性、样式、内容、位置），操控元素（点击、长按、调用方法）　　所以小程序自动化控制的实现依赖于开发版小程序开发者工具以及miniprogram-automator工具。小程序开发者工具命令行用来打开指定自动化操作服务端口。（开发者工具版本需高于v1.02.1906042）。miniprogram-automator工具用来操作开发者工具中运行的小程序并获取所需的信息。对于测试需求可以结合jest框架进行测试用例的组织和断言。　　不多废话，看完文档用一下：　　调用开发者工具命令行打开项目与指定自动化操作服务端口

PS D:\programs\内测\微信web开发者工具> ./cli.bat --auto D:\weApp\testMiniprogram --auto-port 9420　　Initializing...　　idePortFile: C:\Users\billcui\AppData\Local\微信开发者工具\User Data\Default\.ide　　starting ide...　　IDE server has started, listening on http://127.0.0.1:35510　　initialization finished　　Open project with automation enabled success D:\keminiapp\weapp-ke

这一行命令需要注意的有：　　文档要求开发者工具版本号必须高于v1.02.1906042，最好是最新的内测版工具，我是在v1.03.1906062运行成功的；　　运行这行命令之前需要先打开开发者工具菜单中的设置->安全设置->服务端口；　　自动化端口是独立于服务端口的(比如终端打印出的35510其实是服务端口)，必须要看到Open project with automation enabled success D:\keminiapp\weapp-ke这行提示才算是成功打开了自动化端口(9420)。　　命令运行成功后，开发者工具会自动打开项目，并弹出提示　　 npm i miniprogram-automator --save-dev安装SDK，创建test.js，代码中引入miniprogram-automator工具，连接自动化操作端口

const automator = require('miniprogram-automator');　　const miniProgram = automator.connect({　　wsEndpoint: 'ws://localhost:9420',　　})

利用miniprogram-automator提供的接口操作小程序从首页重启并进行相关操作

const automator = require('miniprogram-automator');　　const miniProgram = automator.connect({　　wsEndpoint: 'ws://localhost:9420',　　}).then(async miniProgram => {　　// 从首页重启　　const page = await miniProgram.reLaunch('/pages/index/index');　　// 从页面获取bottom-button组件　　const button = await page.$('bottom-button');　　// 打印出button的wxml信息　　console.log(await button.wxml());　　}).catch(e => {　　console.log('catch a error', e);　　});

利用miniprogram-automator获取操作后页面相关信息，利用jest进行组织和断言

// index.spec.js　　const automator = require('miniprogram-automator');　　describe('课堂小程序自动化测试', () => {　　let miniProgram;　　// 运行测试前调用　　beforeAll(async () => {　　miniProgram = await automator.connect({　　wsEndpoint: 'ws://localhost:9420',　　});　　});　　// 运行测试后调用　　afterAll(() => {　　miniProgram.disconnect();　　});　　// 测试内容　　it('nohost检测', async () => {　　const page = await miniProgram.reLaunch('/pages/index/index');　　const nohostButton = await page.$('nohost');　　expect(nohostButton).toBeNull();　　});　　});

运行jest index.spec.js， 如果页面中不存在nohost组件则测试通过，结果如图所示：　　三、缘聚-自动化测试在课堂微信小程序中的应用　　腾讯课堂微信小程序引入自动化测试主要是为了解决开发、预发布环境、正式环境需要反复多次打开用例课程页面，操作繁琐，耗费大量人力的问题。针对课堂小程序checklist，尽可能利用自动化测试程序完成测试验证，减少手动操作，也可以避免人为检测的遗漏。　　利用miniprogram-automator工具和jest框架，自动化测试主要能力为按照指定顺序模拟打开指定页面、点击、滚动等操作和设置page的data渲染数据，然后对特定的页面结构、数据、组件属性等信息进行断言，判断是否符合预期。　　下面以腾讯课堂微信小程序的课程详情页为例来详细说明在实际项目中如何实现自动化测试：　　课程详情页的UI主要分为视频部分，详情部分以及底部的购买按钮，未购买课程时付费课程详情页表现如下：　　假如对于未购买的无优惠活动的付费课程详情页的测试目标如下：　　按钮应显示“立即购买”，点击购买按钮可跳转到支付页　　点击试学按钮可正常播放试学视频　　未购买课程时点击课程视频无法播放　　实现这个测试，在x.spec.js文件中首先需要要按照上文的步骤引入miniprogram-automator，在beforeAll中连接已经打开自动化端口的微信小程序项目。（这里不再重复代码，见上一章）下面直接看测试内容的代码。　　按钮显示和点击跳转支付页测试

// 打开页面，通过url传参　　const page = await miniProgram.reLaunch(`/pages/course/course?cid=${commonPayCid}`);　　// 获取按钮组件信息　　const basicApplyButton = await page.$('.basic--buy');　　// 判断按钮显示内容　　expect(await basicApplyButton.wxml()).toContain('立即购买');　　// 模拟点击按钮　　await basicApplyButton.tap();　　// 等待页面跳转　　await page.waitFor(1500);　　// 获取当前页面路径　　const currentPage = await miniProgram.currentPage();　　// 判断跳转后路径是否正确　　expect(currentPage.path).toContain('pages/order/order');　　// 跳转回来　　await miniProgram.navigateBack();

目前miniprogram-automator提供了两种方法获取到页面中的组件：page.$和page.$　　经过实验发现两者的selector支持通过组件名和类名选择组件，但对于自定义组件内部的结构，就不能直接这样拿到了。　　课程详情页的底部按钮其实是一个自定义组件，并且还嵌套了子自定义组件，我们看一下底部按钮的wxml结构:　　红色框框就是想要获取的目标，尝试一下直接通过page.$('.bottom-btn')或page.$('.buy')返回的都是undefined，那怎么获取呢？我们先来看看botton-button内部是什么样子的。

const basicApplyButton = await page.$('bottom-button');　　console.log(await basicApplyButton.wxml());

获取bottom-button并打印它的wxml字符串看一下：

// 输出实际上是字符串，为了方便显示格式化了一下　　　　　　　　　　　　立即购买

发现了什么！小程序实际运行时，自定义组件内部的类名都加上了组件名前缀，再试试page.$('.basic--buy')发现果然成功获取到了，所以虽然表面上miniprogram-automator只能操作和获取page中的内容，但自定义组件内部的结构实际上也是以某种方式存在于page中的。　　接下来看一下跳转，可以直接获取到对应组件后调用.tap()方法来模拟点击，这里需要注意的是，由于微信小程序开发者工具中点击打开新页面耗时较长，需要等待页面加载一会，不然接下来获取当前页面路径的时候页面还没跳转过去就拿不到不到新页面路径了。等待的时长可以根据经验给个稍大的比较安全的值。　　点击试学按钮可正常播放试学视频

const player_video = await tapTcplayer(page, '.player-task');　　expect(await player_video.wxml()).toContain('video-current-time'); // 试学

由于微信开发者工具的限制，云点播会降级为tcplayer播放，tcplayer内部的核心组件其实是