xiaochengxu自动化测试初探

最新推荐文章于 2024-07-01 16:51:29 发布

rlmanchang

最新推荐文章于 2024-07-01 16:51:29 发布

阅读量409

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/rlmanchang/article/details/103542136

版权

小程序专栏收录该内容

2 篇文章

订阅专栏

2019年7月我们测试主管就告诉大家微信小程序出了自动化框架。先是我们的资深测试开发看了下，给大家做了一个简单的分享。后来我有幸给大家做了一次简单的前端，顺带自己研究了一下小程序自动化。后面的工作异常的忙碌，没有空余的时间来学习了，以致于答应的小程序分享迟迟没有进行。趁着过年这3天，先总结了下环境搭建，输出了一份文档，做了一些自动化的例子，年后好分享。

环境配置---工具安装

下载vscode或webstorm等前端开发工具
安装 Node.js 并且版本大于 8.0（没有安装npm的也要安装。查看有没有安装可以执行命令 node -v 和 npm -v）
微信小程序基础库版本为 2.7.3 及以上
开发者工具版本为 1.02.1907232 及以上

使用miniprogram-automator启动小程序

做小程序自动化首先是需要有一份前端的代码。平时我们都是从远端仓库克隆一份代码到本地，然后在本地进行测试。作为测试，我们也不会去更改前端代码。但是接下来的小程序自动化，你有可能需要添加一些代码在前端工程上。为了不影响开发的前端代码，可以专门拉一个小程序的自动化分支出来，后续前端需求的代码更新，都可以将那些分支合到自动化分支，可以保证自动化分支的代码是最新的。当然这后续的维护，合并解决冲突并不是一件简单的事。在还没有自动化分支前，建议在自己本地再复制一份新的前端代码。

1、复制代码

代码复制下来后，用开发工具，如vscode打开代码。一般从git上拉的代码会没有node_modules依赖模块，可以在命令行下输入：npm install。这样会安装package.json下所记录的所有依赖。

2、安装小程序自动化 SDK

在开发工具的控制台下输入：npm i miniprogram-automator --save-dev。安装完成后，你会在node_modules文件夹下看到miniprogram-automator。

3、使用miniprogram-automator控制开发者工具

首先开启工具安全设置中的 CLI/HTTP 调用功能，如下图所示。注：必须开启以上选项，否则 SDK 将无法正常启动工具自动化功能

微信小程序自动化 SDK 本身不提供测试框架。这意味着你可以将它与市面上流行的任意 Node.js 测试框架结合使用，以此来达到编写小程序测试用例的目的。我们选择了Jest测试框架。在控制台下执行以下命令安装依赖：

npm i miniprogram-automator jest

npm i jest -g

安装完后，你可以在node_modules下看有没有jest依赖。

上面的准备工作都做好后，就可以写脚本进行自动化测试了。新建一个文件夹存放测试代码。新建一个文件，取名XX.spec.js，在控制台运行该文件用jest XX.spec.js。比如我们写了如下代码：

const automator = require('miniprogram-automator')

automator.launch({

cliPath: 'path/to/cli', // 工具 cli 位置，如果你没有更改过默认安装位置，可以忽略此项

projectPath: 'path/to/project', // 项目文件地址}).then(async miniProgram => {

const page = await miniProgram.reLaunch('/page/component/index')

await page.waitFor(500)

const element = await page.$('.kind-list-item-hd')

console.log(await element.attribute('class'))

await element.tap()

await miniProgram.close()})

上面这段代码做了哪些事：

1、引入了miniprogram-automator依赖

2、通过调用automator对象的launch方法，传入开发者工具cli地址，和项目地址这两个参数。调用该方法后，就可以启动开发者工具，并用开发者工具的cli命令打开了项目，得到一个miniProgram对象，这个对象提供了很多控制小程序的方法。

3、在回调函数里传入miniProgram，回调函数内部通过调用miniProgram的relaunch方法（传入参数为项目某个页面的路径），启动了某个页面，并拿到该页面对象。

4、让页面等待了500ms，猜测是页面启动后，渲染加载DOM需要花费一些时间

5、通过页面对象拿到页面某个元素（元素选择器采用的是类选择器，写法和jQuery比较类似）

6、在控制台打印出该元素的class属性值

7、点击这个元素

8、关闭小程序运行的连接并且关闭项目窗口

组织用例

测试框架采用的是jest，所以用例组织都是按框架的语法来的。用describe组织测试套件，it描述一个个用例。只要做过UI自动化的不难发现，小程序自动化和它们很像。每一个用例也基本是：找元素，执行某些动作，最后断言。但是我在做的过程中发现小程序自动化与selenium这样的UI自动化比，手伸的更深。selenium UI自动化，我们永远只能在盒子外面做一些操作，断言的时候，你可能只能去观察页面上的一些变化去进行断言。但是小程序自动化提供了更多可能。它提供了获取页面对象的方法，这意味着我们可以得到某个页面data里的所有属性。而data里的这些属性值，又是我们可以自定义的，也就是说可以按需自定义。在我分享的时候，我就在项目里找了这么一个例子：一个swiper页面，有选和不选两个按钮，点任意一个按钮都会出对应的动画，如点“不选”出现不选的一个动画，点“选”出现选的一个动画。并且当点击了上面某个按钮后，切换到下一张的时候，之前的选或不选会消失。也就是说，动画图片是一闪而过的。那么，你如何去断言，我点选的时候，出来的是选的动画，不选的时候出现的是不选的动画。传统的只能在盒子外层隔空瘙痒的方式，很难去做。但小程序提供了这种可能，你只需要在data里定义一个变量，在选和不选方法里去改变这个变量的值，断言时取出来判断即可。但是，不到万不得已还是不要随意更改前端代码吧，虽然我们的分支也不一样。xiaochengxu自动化提供了可能，我目前发现的有更多的断言方式，不仅是UI，接口也是可以做的。目前也只是做了一些初步的学习与实践，新的一年里希望能够学的更多，走的更远。有说错的地方大家轻拍哈

// 测试内容

it('login---错误手机号', async () => {

const currentPage_path = (await miniProgram.currentPage()).path

const element_phone=await loginPage.$('#phone')

await element_phone.input('1592875500')

const loginButton = await loginPage.$('.m_newLogin-btn');

await loginButton.tap()

expect(await loginPage.data()).toHaveProperty('Text','请输入正确格式的手机号码！')

await currentPage.waitFor(3000)

});

it('login检测---输入正确的手机号', async () => {

const element_phone=await loginPage.$('#phone')