微信小程序 七月 06, 2020

微信小程序 • 自动化测试

文章字数 2.9k 阅读约需 5 mins. 阅读次数 0

引言

本篇将介绍最近在小程序开发项目上所遇到的有关自动化测试的一些笔记分享。

微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。

全面开放申请后,主体类型为企业、政府、媒体、其他组织或个人的开发者,均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。

微信小程序是一种不用下载就能使用的应用,也是一项创新,经过将近两年的发展,已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,已经有超过150万的开发者加入到了微信小程序的开发,与我们一起共同发力推动微信小程序的发展,微信小程序应用数量超过了一百万,覆盖200多个细分的行业,日活用户达到两个亿,微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会,2017年小程序带动就业104万人,社会效应不断提升。


在进行小程序自动化测试前,你需要准备👇:


Get Started

Step1: 项目初始化

cd miniprogram-demo

npm i

cd miniprogram

npm i

Step2: 引入自动化测试插件与框架

完成上述步骤后,安装miniprogram-automator,这是一款由微信官方推出的小程序自动化测试框架。

npm i miniprogram-automator --save-dev

引入jset测试框架

npm i jest

PS: 在下载完jest后,还需要前往package.json配置jest。

"scripts"
:
{
    "test"
:
    "jest"
}

添加完上述代码后,在进行测试时系统会自动找到包括.test.js结尾的测试文件并运行。

Step3: 开启自动化测试端口

PS: (该步骤可省略,当第5步出现问题时,可先开启端口再执行第5步命令)

  1. 打开微信开发者工具,前往设置 -> 通用设置 -> 安全 -> 开启服务端口

  2. 前往你的微信开发者工具安装目录,例:D:\微信开发者工具,开启自动化测试端口

.\cli.bat --auto 你的项目地址 --auto-port 9420

当出现以下信息时,表示端口启用成功,并会同时开启/重启微信开发者工具。

PS D:\微信web开发者工具> .\cli.bat --auto C:\Users\P7XXTM1-G\Desktop\miniprogram-demo\miniprogram --auto-port 9420
√ IDE server has started, listening on http://127.0.0.1:33553
[warn] DEPRECATED please upgrade to the following v2 command instead ( doc: https://developers.weixin.qq.com/miniprogram/dev/devtools/cli.html )

 cli auto --project C:\Users\P7XXTM1-G\Desktop\miniprogram-demo\miniprogram --auto-port 9420

√ Open project with automation enabled success C:\Users\P7XXTM1-G\Desktop\miniprogram-demo\miniprogram

Step4: 编写测试脚本

开启完测试端口后,新建一个miniTest文件夹用于放置测试文件,创建index.test.js文件,开始编写测试脚本。

此处使用官方的测试脚本案例👇

const automator = require('miniprogram-automator')

describe('index', () => {
    let miniProgram
    let page

    beforeAll(async () => {
        miniProgram = await automator.launch({
            cliPath: 'D://微信web开发者工具//cli.bat',// cli.bat文件一般在微信开发者工具目录下,MacOS下一般无需配置cliPath
            projectPath: './' // 默认当前项目地址即可
        })
        page = await miniProgram.reLaunch('/page/component/index') // 测试页面
        await page.waitFor(500)
    }, 30000)

    // 测试脚本
    it('desc', async () => {
        const desc = await page.$('.index-desc')
        expect(desc.tagName).toBe('view')
        expect(await desc.text()).toContain('以下将展示小程序官方组件能力')
    })

    afterAll(async () => {
        await miniProgram.close()
    })
})

Step5: 开始自动化测试

编写完测试脚本后,在终端输入npm run test,即可进行自动化测试,期间将会打开/重启微信开发者工具。

PS C:\Users\P7XXTM1-G\Desktop\miniprogram-demo\miniprogram> npm run test

> miniprogram@1.0.0 test C:\Users\P7XXTM1-G\Desktop\miniprogram-demo\miniprogram
> jest

 PASS  miniTest/index.test.js (21.827 s)
  index
    √ desc (12 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        22.683 s, estimated 27 s
Ran all test suites.

当出现上述信息时,表示自动化测试已通过。


API

  • Automator 模块提供了启动及连接开发者工具的方法。

  • MiniProgram 模块提供了控制小程序的方法。

  • Page模块提供了控制小程序页面的方法。

  • Element 模块提供了控制小程序页面元素的方法。


参考资料


0%